@php
    $uid = 'ag_' . uniqid();

    $labels = $aspectGrid['labels'] ?? [];
    $matrix = $aspectGrid['matrix'] ?? [];

    // ✅ Açı isimleri (type -> name)
    $aspectNames = [
        '0' => t('synod'),
        '30' => '30°',
        '45' => '45°',
        '60' => t('sextile'),
        '90' => t('square'),
        '120' => t('triangle'),
        '135' => '135°',
        '150' => '150°',
        '180' => t('anti'),
        'PAR' => t('parallel'),
        'CPAR' => t('contra-parallel'),
    ];

    // ✅ AI Chat için natal açı pairs verisi oluştur
    $natalPairsForJson = [];
    for ($i = 0; $i < count($labels); $i++) {
        for ($j = 0; $j < $i; $j++) {
            $cell = $matrix[$i][$j] ?? null;
            if ($cell) {
                $aspType = is_array($cell) ? $cell['type'] ?? '' : $cell;
                $aspOrb = is_array($cell) ? $cell['orb'] ?? 0 : 0;
                $natalPairsForJson[] = [
                    'planet_a' => $labels[$i]['name'] ?? '',
                    'planet_a_sign' => $labels[$i]['sign'] ?? '',
                    'planet_b' => $labels[$j]['name'] ?? '',
                    'planet_b_sign' => $labels[$j]['sign'] ?? '',
                    'aspect_type' => $aspectNames[$aspType] ?? $aspType,
                    'orb' => $aspOrb,
                ];
            }
        }
    }
    $natalJsonData = ['chart' => 'Natal', 'pairs' => $natalPairsForJson];

    // Açı ikonları ve renkleri (aspect-pairs-table ile aynı)
    // ✅ Tooltip: hangi iki gezegenin kesişimi olduğu ilk satırda, açı adı ve orb
    // derecesi ikinci satırda gösterilir (native title tooltip'te \n ikinci satıra geçer).
    $icon = function ($t, $planetA = null, $planetB = null) use ($aspectNames) {
        $type = is_array($t) ? $t['type'] ?? '' : $t;
        $orb = is_array($t) ? ($t['orb'] ?? ($t['orb_val'] ?? 0)) : 0;
        $aspName = $aspectNames[(string) $type] ?? (string) $type;
        $title = $aspName . "\n" . number_format((float) $orb, 1) . '°';
        if ($planetA && $planetB) {
            $title = e($planetA) . ' - ' . e($planetB) . "\n" . $title;
        }

        return match ((string) $type) {
            '0'
                => '<span class="asp" title="' . $title . '" style="color: #dc3545;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="15" r="5"/><line x1="12.5" y1="11.5" x2="19" y2="5"/></svg></span>',
            '30' => '<span class="asp asp-30" title="' . $title . '" style="color:#00b894"></span>',
            '45' => '<span class="asp asp-45" title="' . $title . '" style="color:#00b894"></span>',
            '60' => '<span class="asp asp-60" title="' . $title . '" style="color:#0984e3"></span>',
            '90' => '<span class="asp asp-90" title="' . $title . '" style="color:#dc3545"></span>',
            '120' => '<span class="asp asp-120" title="' . $title . '" style="color:#0984e3"></span>',
            '135'
                => '<span class="asp" title="' . $title . '" style="color: #dc3545;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="10" height="10"/><path d="M14 14 L19 19 M19 19 L14 19"/></svg></span>',
            '150'
                => '<span class="asp" title="' . $title . '" style="color:#00b894"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21v-10m0 0l-7-7m7 7l7-7"/></svg></span>',
            '180' => '<span class="asp asp-180" title="' . $title . '" style="color:#dc3545"></span>',
            'PAR' => '<span class="asp asp-par" title="' . $title . '" style="color:#2d3436">||</span>',
            'CPAR'
                => '<span class="asp asp-cpar" title="' . $title . '" style="color:#2d3436"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="8" y1="4" x2="8" y2="20"/><line x1="16" y1="4" x2="16" y2="20"/><line x1="4" y1="12" x2="20" y2="12"/></svg></span>',
            default => '',
        };
    };
@endphp

<div class="aspect-card" data-natal-pairs="{{ json_encode($natalJsonData, JSON_UNESCAPED_UNICODE) }}">
    <div class="aspect-header">
        <h6 class="mb-0 fw-bold text-secondary" style="font-size: .9rem;">
            {{-- <i class="bi bi-grid-3x3 me-1"></i> Açı Tablosu --}}
        </h6>
    </div>

    <div class="aspect-body" data-ag-wrap="{{ $uid }}">
        {{-- ✅ 1) MATRİS (boyutları kilitli, saf hali) --}}
        <div class="ag-pane" data-ag-pane="matrix" style="display:flex;">
            <table class="fit-aspect-table">
                <tbody>
                    @for ($i = 0; $i < count($labels); $i++)
                        @php
                            $rowIsAst = !empty($labels[$i]['is_asteroid']);
                        @endphp

                        <tr class="ag-row {{ $rowIsAst ? 'ag-row-asteroid' : '' }}">
                            @for ($j = 0; $j <= $i; $j++)
                                @php
                                    $colIsAst = !empty($labels[$j]['is_asteroid']);
                                @endphp

                                @if ($j < $i)
                                    @php $t = $matrix[$i][$j] ?? null; @endphp
                                    <td class="cell-aspect {{ $colIsAst ? 'ag-col-asteroid' : '' }}">
                                        {!! $t ? $icon($t, $labels[$i]['name'] ?? '', $labels[$j]['name'] ?? '') : '' !!}
                                    </td>
                                @else
                                    <td class="cell-diag {{ $rowIsAst ? 'ag-col-asteroid' : '' }}"
                                        title="{{ $labels[$i]['name'] ?? '' }}">
                                        @if (!empty($labels[$i]['is_plain_text']))
                                            <span class="planet-text"
                                                style="color: {{ $labels[$i]['color'] ?? '#000' }}; font-size: 11px; font-weight: 700; min-width: 28px; text-align: center; display: inline-block;"
                                                title="{{ $labels[$i]['name'] ?? '' }}">
                                                {!! $labels[$i]['glyph_html'] ?? '' !!}
                                            </span>
                                        @else
                                            <span class="f-astro info-planet planet-glyph"
                                                style="color: {{ $labels[$i]['color'] ?? '#000' }}"
                                                title="{{ $labels[$i]['name'] ?? '' }}">
                                                {!! $labels[$i]['glyph_html'] ?? '' !!}
                                            </span>
                                        @endif
                                    </td>
                                @endif
                            @endfor

                            @for ($k = $i + 1; $k < count($labels); $k++)
                                @php $colIsAst2 = !empty($labels[$k]['is_asteroid']); @endphp
                                <td class="{{ $colIsAst2 ? 'ag-col-asteroid' : '' }}" style="border:none;"></td>
                            @endfor
                        </tr>
                    @endfor
                </tbody>
            </table>
        </div>
    </div>



    @if (!empty($fixedStarConjunctions))
        <div class="fixed-stars-data" style="display:none;">
            @foreach ($fixedStarConjunctions as $item)
                @php
                    $star = $item['star'];
                    $pl = $item['planet'];
                    $orb = $item['orb'];
                @endphp
                <span data-star="{{ $star['name'] ?? ($star['key'] ?? '') }}"
                    data-planet="{{ $pl['name'] ?? ($pl['key'] ?? '') }}"
                    data-orb="{{ sprintf('%+.1f°', $orb) }}"></span>
            @endforeach
        </div>
    @endif
</div>