@if (!empty($synastryGrid))
    @php
        $rows = $synastryGrid['rows'];
        $cols = $synastryGrid['cols'];
        $grid = $synastryGrid['grid'];
        $uid = 'syn_' . uniqid();
        $hideHeader = !empty($hideHeader);
        $wrapCard = isset($wrapCard) ? (bool) $wrapCard : true;
        $bodyClass = $wrapCard ? 'aspect-body p-2' : 'synastry-embed-body p-0';

        // 1. AÇI İKONLARI VE VERİSİ
        $getAspectData = function ($type, $orb = 0) {
            $type = (string) $type;

            $html = match ($type) {
                '0'
                    => '<span class="asp" title="' . t('synod') . '" 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="30" style="color:#00b894"></span>',
                '45' => '<span class="asp asp-45" title="45" style="color:#00b894"></span>',
                '60' => '<span class="asp asp-60" title="' . t('sextilee') . '" style="color:#0984e3"></span>',
                '90' => '<span class="asp asp-90" title="' . t('square') . '" style="color:#dc3545"></span>',
                '120' => '<span class="asp asp-120" title="' . t('triangle') . '" style="color:#0984e3"></span>',
                '135'
                    => '<span class="asp" title="135°" 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="150" 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="' . t('anti') . '" style="color:#dc3545"></span>',
                'PAR' => '<span class="asp asp-par" title="' . t('parallel') . '" style="color:#2d3436">||</span>',
                'CPAR'
                    => '<span class="asp asp-cpar" title="' . t('contra-parallel') . '" 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 => '',
            };

            $name = match ($type) {
                '0' => t('synod'),
                '30' => '30°',
                '45' => '45°',
                '60' => t('sextilee'),
                '90' => t('square'),
                '120' => t('triangle'),
                '135' => '135°',
                '150' => '150°',
                '180' => t('anti'),
                'PAR' => t('parallel'),
                'CPAR' => t('contra-parallel'),
                default => $type,
            };

            return ['html' => $html, 'name' => $name, 'orb' => $orb];
        };

        // 2. GEZEGEN SEMBOLLERİ (Geriye Dönük Uyumluluk için Helper)
        // Not: Asıl veriler Service'den 'glyph_html' olarak geliyor.
// Ancak 'rows' ve 'cols' içinde bu veri yoksa (eski cache vb.) diye
// basit bir fallback fonksiyonu bırakıyoruz.
$getSymFallback = function ($key) {
    return substr($key, 0, 2);
};

// 3. LİSTE VERİSİNİ HAZIRLA
// Synastry verilerini (Rows/Cols) senin istediğin Pairs formatına çeviriyoruz.
$pairs = [];
foreach ($rows as $rIndex => $row) {
    foreach ($cols as $cIndex => $col) {
        $cellData = $grid[$rIndex][$cIndex] ?? null;

        if ($cellData) {
            $orb = isset($cellData['orb_val']) ? $cellData['orb_val'] : 0;
            $type = $cellData['type'] ?? '';

            // A Kişisi (Sol)
            $pA = $row;

            // B Kişisi (Sağ) - B'nin ismi row içinde olmayabilir, key kullanalım
                    $pB = $col;
                    if (!isset($pB['name'])) {
                        $pB['name'] = $pB['key'];
                    }

                    $pairs[] = [
                        'a' => $pA,
                        'b' => $pB,
                        'asp' => $getAspectData($type, $orb),
                    ];
                }
            }
        }
    @endphp

    @php
        // Başlık ve yön etiketleri için kişi isimlerini hazırla
        $pA_Name = $personA['title'] ?? ($personA['name'] ?? 'Harita');
        $pB_Name = $personB['title'] ?? ($personB['name'] ?? 'Transit');
        $pA_Color = $personA['color'] ?? '#479483';
        $pB_Color = $personB['color'] ?? '#f1c40f';

        // Başlık metni: "Solar Arc Doğum Haritası" veya "Solar Arc Transit" gibi
        if (!empty($pA_Name) && !empty($pB_Name)) {
            $pairTitle = trim($pA_Name . ' ' . $pB_Name);
        } else {
            $pairTitle = $pA_Name ?: $pB_Name;
        }

        // ✅ AI Chat için JSON veri paketi oluştur
        $synastryJsonData = [
            'person_a' => $pA_Name,
            'person_b' => $pB_Name,
            'pairs' => array_map(function ($p) {
                return [
                    'person_a_planet' => $p['a']['name'] ?? $p['a']['key'],
                    'person_a_sign' => $p['a']['sign'] ?? '',
                    'person_a_deg' => $p['a']['deg_formatted'] ?? '',
                    'person_b_planet' => $p['b']['name'] ?? $p['b']['key'],
                    'person_b_sign' => $p['b']['sign'] ?? '',
                    'person_b_deg' => $p['b']['deg_formatted'] ?? '',
                    'aspect_type' => $p['asp']['name'] ?? '',
                    'orb' => $p['asp']['orb'] ?? 0,
                ];
            }, $pairs),
        ];
    @endphp

    <div class="{{ $wrapCard ? 'aspect-card' : 'synastry-grid-embed' }}"
        data-synastry-pairs="{{ json_encode($synastryJsonData, JSON_UNESCAPED_UNICODE) }}"
        data-person-a="{{ $pA_Name }}" data-person-b="{{ $pB_Name }}">
        @if (!$hideHeader)
            <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> {{ $pairTitle }}
                </h6>
                <div>
                    <div class="ag-tabs" role="group" aria-label="Synastry tabs">
                        <button type="button" class="ag-tab-btn active" data-ag-tabs="{{ $uid }}"
                            data-ag-target="matrix">
                            {{ t('aspect-grid') }}
                        </button>
                        <button type="button" class="ag-tab-btn" data-ag-tabs="{{ $uid }}" data-ag-target="list">
                            {{ t('list') }}
                        </button>
                    </div>
                </div>
            </div>
        @endif

        <div class="{{ $bodyClass }}" data-ag-wrap="{{ $uid }}">

            {{-- PANE 1: MATRİS (Kare Tablo) --}}
            <div class="ag-pane w-100" data-ag-pane="matrix" style="display:block;">
                <div class="syn-table-wrap">
                    <table class="syn-table">
                        <thead>
                            <tr>
                                <th
                                    style="background:#fff; border-bottom:2px solid #ccc; border-right:2px solid #ccc; min-width:64px;">
                                    {{-- Sol Üst Köşe (İsimler) --}}
                                    <div style="padding:6px 3px; font-size:10px; text-align:center; line-height:1.25;">
                                        <div style="margin-bottom:3px;">
                                            <span
                                                style="color:{{ $pA_Color }}; font-weight:800; font-size:10px;">{{ Str::limit($pA_Name, 8) }}</span>
                                            <span style="color:#999; font-size: 14px;">&#8595;</span>
                                        </div>
                                        <div>
                                            <span
                                                style="color:{{ $pB_Color }}; font-weight:800; font-size:10px;">{{ Str::limit($pB_Name, 8) }}</span>
                                            <span style="color:#999; font-size: 14px;">&#8594;</span>
                                        </div>
                                    </div>
                                </th>
                                @foreach ($cols as $col)
                                    <th class="syn-col-head">
                                        <div class="syn-col-info">
                                            <span class="f-astro"
                                                style="font-size:13px; color:{{ $col['sign_color'] }}">{!! $col['sign_symbol'] ?? '' !!}</span>
                                            <span
                                                class="txt-deg">{{ $col['deg_only'] }}<br>{{ $col['min_only'] }}</span>
                                            @if (!empty($col['is_plain_text']))
                                                <span class="planet-text"
                                                    style="font-size:10px; color:{{ $col['color'] }}; margin-top:2px;">
                                                    {!! $col['glyph_html'] ?? $getSymFallback($col['key']) !!}
                                                </span>
                                            @else
                                                <span class="f-astro"
                                                    style="font-size:14px; color:{{ $col['color'] }}; margin-top:2px;">
                                                    {!! $col['glyph_html'] ?? $getSymFallback($col['key']) !!}
                                                </span>
                                            @endif
                                        </div>
                                    </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($rows as $rIndex => $row)
                                <tr>
                                    <th class="syn-row-head">
                                        <div class="syn-row-content">
                                            <div style="text-align:right; width:56px;">
                                                <div style="font-size:10px; font-weight:bold; color:#333;">
                                                    {{ $row['name'] ?? $row['key'] }}</div>
                                                <div class="d-flex align-items-center justify-content-end gap-1">
                                                    <span class="f-astro"
                                                        style="font-size:11px; color:{{ $row['sign_color'] }}">{!! $row['sign_symbol'] ?? '' !!}</span>
                                                    <span class="txt-deg">{{ $row['deg_formatted'] }}</span>
                                                </div>
                                            </div>
                                            <div
                                                style="width:22px; height:22px; display:flex; align-items:center; justify-content:center; border:1px solid #ccc; border-radius:4px; background:#fff;">
                                                @if (!empty($row['is_plain_text']))
                                                    <span class="planet-text"
                                                        style="font-size:9px; color:{{ $row['color'] }}">
                                                        {!! $row['glyph_html'] ?? $getSymFallback($row['key']) !!}
                                                    </span>
                                                @else
                                                    <span class="f-astro"
                                                        style="font-size:14px; color:{{ $row['color'] }}">
                                                        {!! $row['glyph_html'] ?? $getSymFallback($row['key']) !!}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </th>
                                    @foreach ($cols as $cIndex => $col)
                                        @php
                                            $cellData = $grid[$rIndex][$cIndex] ?? null;
                                            $isSelf = $row['key'] === $col['key'];
                                        @endphp
                                        <td class="syn-cell {{ $isSelf ? 'self-intersect' : '' }}">
                                            @if ($cellData)
                                                @php
                                                    $type = $cellData['type'] ?? '';
                                                    $orb = isset($cellData['orb_val'])
                                                        ? round($cellData['orb_val'])
                                                        : '';
                                                    $aspData = $getAspectData($type);
                                                @endphp
                                                <div
                                                    style="display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%;">
                                                    {!! $aspData['html'] !!}
                                                    @if ($orb !== '' && $orb < 10)
                                                        <span
                                                            style="font-size:8px; color:#888; margin-top:-2px;">{{ $orb }}&deg;</span>
                                                    @endif
                                                </div>
                                            @elseif($isSelf)
                                                <div style="color:#ddd;">&middot;</div>
                                            @endif
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- PANE 2: LİSTE (aspect-pairs-table ile aynı düzen: 1.Gezegen | Açı | 2.Gezegen) --}}
            <div class="ag-pane w-100" data-ag-pane="list" style="display:none;">
                <div class="ag-pairs-wrap">
                    <div class="table-responsive ag-pairs-scroll">
                        <table class="table align-middle mb-0 ag-pairs-table table-hover">
                            <thead class="table-light sticky-top" style="top:0; z-index:2;">
                                <tr>
                                    <th class="pe-3" style="color:{{ $pA_Color }};">
                                        {{ Str::limit($pA_Name, 18) }}</th>
                                    <th class="pe-4">{{ t('angles') }}</th>
                                    <th class="ps-3" style="color:{{ $pB_Color }};">
                                        {{ Str::limit($pB_Name, 18) }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($pairs as $p)
                                    <tr>
                                        {{-- 1. GEZEGEN (SOLDA - SAĞA YASLI) --}}
                                        <td class="text-end pe-1 border-end-0">
                                            <div class="planet-cell-content left-side">
                                                <div class="planet-details align-items-end me-1 d-none d-sm-flex">
                                                    <span
                                                        class="detail-name">{{ $p['a']['name'] ?? $p['a']['key'] }}</span>
                                                    <span
                                                        class="detail-deg">{{ $p['a']['deg_formatted'] ?? '' }}</span>
                                                </div>
                                                @if (!empty($p['a']['house_no']))
                                                    <span class="info-house"
                                                        title="House">{{ $p['a']['house_no'] }}</span>
                                                @endif
                                                <span class="f-astro info-sign"
                                                    style="color: {{ $p['a']['sign_color'] ?? '#555' }}"
                                                    title="{{ t('sign') }}">
                                                    {!! $p['a']['sign_symbol'] ?? '' !!}
                                                </span>
                                                @if (!empty($p['a']['is_plain_text']))
                                                    <span class="planet-text"
                                                        style="color: {{ $p['a']['color'] ?? '#000' }}; font-size: 11px; font-weight: 700; min-width: 28px; text-align: center; display: inline-block;"
                                                        title="{{ $p['a']['name'] ?? '' }}">
                                                        {!! $p['a']['glyph_html'] ?? $getSymFallback($p['a']['key']) !!}
                                                    </span>
                                                @else
                                                    <span class="f-astro info-planet"
                                                        style="color: {{ $p['a']['color'] ?? '#000' }}"
                                                        title="{{ $p['a']['name'] ?? '' }}">
                                                        {!! $p['a']['glyph_html'] ?? $getSymFallback($p['a']['key']) !!}
                                                    </span>
                                                @endif
                                            </div>
                                            <div class="d-block d-sm-none small text-muted text-end mt-1"
                                                style="font-size:10px;">
                                                {{ $p['a']['name'] ?? $p['a']['key'] }}
                                            </div>
                                        </td>

                                        {{-- AÇI (ORTA SÜTUN) --}}
                                        <td class="text-end">
                                            <div class="aspect-cell">
                                                <div class="aspect-icon">
                                                    {!! $p['asp']['html'] !!}
                                                </div>
                                                <div class="aspect-info">
                                                    <span class="aspect-name">{{ $p['asp']['name'] }}</span>
                                                    @if ($p['asp']['orb'] > 0)
                                                        <span class="aspect-orb">{{ number_format($p['asp']['orb'], 1) }}°</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>

                                        {{-- 2. GEZEGEN (SAĞDA - SOLA YASLI) --}}
                                        <td class="text-start ps-1 border-start-0">
                                            <div class="planet-cell-content right-side">
                                                @if (!empty($p['b']['is_plain_text']))
                                                    <span class="planet-text"
                                                        style="color: {{ $p['b']['color'] ?? '#000' }}; font-size: 11px; font-weight: 700; min-width: 28px; text-align: center; display: inline-block;"
                                                        title="{{ $p['b']['name'] ?? '' }}">
                                                        {!! $p['b']['glyph_html'] ?? $getSymFallback($p['b']['key']) !!}
                                                    </span>
                                                @else
                                                    <span class="f-astro info-planet"
                                                        style="color: {{ $p['b']['color'] ?? '#000' }}"
                                                        title="{{ $p['b']['name'] ?? '' }}">
                                                        {!! $p['b']['glyph_html'] ?? $getSymFallback($p['b']['key']) !!}
                                                    </span>
                                                @endif
                                                <span class="f-astro info-sign"
                                                    style="color: {{ $p['b']['sign_color'] ?? '#555' }}"
                                                    title="{{ t('sign', 'Sign') }}">
                                                    {!! $p['b']['sign_symbol'] ?? '' !!}
                                                </span>
                                                @if (!empty($p['b']['house_no']))
                                                    <span class="info-house"
                                                        title="{{ t('house') }}">{{ $p['b']['house_no'] }}</span>
                                                @endif
                                                <div class="planet-details align-items-start ms-1 d-none d-sm-flex">
                                                    <span
                                                        class="detail-name">{{ $p['b']['name'] ?? $p['b']['key'] }}</span>
                                                    <span
                                                        class="detail-deg">{{ $p['b']['deg_formatted'] ?? '' }}</span>
                                                </div>
                                            </div>
                                            <div class="d-block d-sm-none small text-muted text-start mt-1"
                                                style="font-size:10px;">
                                                {{ $p['b']['name'] ?? $p['b']['key'] }}
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted py-3">
                                            {{ t('angle-not-found') }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endif