@php
    $signNames = [
        'Aries',
        'Tauro',
        'Géminis',
        'Cáncer',
        'Leo',
        'Virgo',
        'Libra',
        'Escorpio',
        'Sagitario',
        'Capricornio',
        'Acuario',
        'Piscis',
    ];
@endphp

<div class="dominant-planets-wrap">
    @if (empty($dominantPlanets))
        <div class="text-center text-muted small py-3">{{ t('dominant-planets-not-found') }}</div>
    @else
        {{-- İlk 3: Podium (Altın / Gümüş / Bronz) --}}
        {{-- <div class="dominant-podium">
            @foreach (array_slice($dominantPlanets, 0, 3) as $i => $p)
                @php
                    $rankColors = ['#D4AF37', '#A0A0A0', '#CD7F32'];
                    $rankLabels = ['1.', '2.', '3.'];
                    $rankColor = $rankColors[$i] ?? '#666';
                @endphp
                <div class="dominant-podium-card"
                    style="--rank-color: {{ $rankColor }}; --planet-color: {{ $p['color'] }};">
                    <div class="dp-rank" style="background: {{ $rankColor }};">{{ $rankLabels[$i] }}</div>

                    <div class="dp-planet-icon" style="color: {{ $p['color'] }};">
                        <span style="font-family: 'HamburgSymbols'; font-size: 28px;">{{ $p['sym'] }}</span>
                    </div>

                    <div class="dp-name">{{ $p['name'] }}</div>
                    <div class="dp-score">{{ $p['score'] }} <small>puan</small></div>

                    <div class="dp-sign-house">
                        <span class="badge bg-light text-dark border" style="font-size: 0.7rem;">
                            {{ $signNames[$p['sign_idx']] ?? '?' }}
                        </span>
                        <span class="badge bg-light text-dark border" style="font-size: 0.7rem;">
                            {{ $p['house'] }}. Ev
                        </span>
                    </div>
                    <div class="dp-breakdown mt-2">
                        @php
                            $bd = $p['breakdown'];
                            $total = max(
                                1,
                                abs($bd['essential']) +
                                    abs($bd['accidental']) +
                                    abs($bd['aspectual']) +
                                    abs($bd['special']),
                            );
                        @endphp
                        <div class="dp-bar">
                            @if (($bd['essential'] ?? 0) > 0)
                                <div class="dp-bar-seg"
                                    style="width:{{ ($bd['essential'] / $total) * 100 }}%; background: #6366f1;"
                                    title="Konum: +{{ $bd['essential'] }}"></div>
                            @endif
                            @if (($bd['accidental'] ?? 0) > 0)
                                <div class="dp-bar-seg"
                                    style="width:{{ ($bd['accidental'] / $total) * 100 }}%; background: #22c55e;"
                                    title="Casa: +{{ $bd['accidental'] }}"></div>
                            @endif
                            @if (($bd['aspectual'] ?? 0) > 0)
                                <div class="dp-bar-seg"
                                    style="width:{{ ($bd['aspectual'] / $total) * 100 }}%; background: #f59e0b;"
                                    title="Aspectos: +{{ $bd['aspectual'] }}"></div>
                            @endif
                            @if (($bd['special'] ?? 0) > 0)
                                <div class="dp-bar-seg"
                                    style="width:{{ ($bd['special'] / $total) * 100 }}%; background: #ec4899;"
                                    title="Especial: +{{ $bd['special'] }}"></div>
                            @endif
                        </div>
                        <div class="dp-legend">
                            <span><i style="background:#6366f1;"></i> Konum</span>
                            <span><i style="background:#22c55e;"></i> Ev</span>
                            <span><i style="background:#f59e0b;"></i> Açılar</span>
                            <span><i style="background:#ec4899;"></i> Özel</span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div> --}}

        {{-- dominant-planets.blade.php içindeki podyum kısmı --}}
        <div class="dominant-podium">
            @foreach (array_slice($dominantPlanets, 0, 3) as $i => $p)
                @php
                    // i=0 (1.lik), i=1 (2.lik), i=2 (3.lük)
                    $rankConfigs = [
                        0 => ['color' => '#D4AF37', 'label' => '1.', 'class' => 'rank-1', 'order' => 2],
                        1 => ['color' => '#A0A0A0', 'label' => '2.', 'class' => 'rank-2', 'order' => 1],
                        2 => ['color' => '#CD7F32', 'label' => '3.', 'class' => 'rank-3', 'order' => 3],
                    ];
                    $config = $rankConfigs[$i];
                @endphp

                <div class="dominant-podium-card {{ $config['class'] }}"
                    style="--rank-color: {{ $config['color'] }}; --planet-color: {{ $p['color'] }}; order: {{ $config['order'] }};">

                    <div class="dp-rank" style="background: {{ $config['color'] }};">{{ $config['label'] }}</div>

                    <div class="dp-planet-icon" style="color: {{ $p['color'] }};">
                        <span style="font-family: 'HamburgSymbols';">{{ $p['sym'] }}</span>
                    </div>

                    <div class="dp-name">{{ $p['name'] }}</div>
                    <div class="dp-score">{{ $p['score'] }} <small>{{ t('point') }}</small></div>

                    <div class="dp-sign-house">
                        <span class="badge border">
                            {{ $signNames[$p['sign_idx']] ?? '?' }}
                        </span>
                        <span class="badge border">
                            {{ $p['house'] }}. {{ t('house') }}
                        </span>
                    </div>

                    {{-- Mini breakdown bar --}}
                    {{-- <div class="dp-breakdown mt-2">
                        @php
                            $bd = $p['breakdown'];
                            $total = max(
                                1,
                                abs($bd['essential']) +
                                    abs($bd['accidental']) +
                                    abs($bd['aspectual']) +
                                    abs($bd['special']),
                            );
                        @endphp
                        <div class="dp-bar">
                            @if (($bd['essential'] ?? 0) > 0)
                                <div class="dp-bar-seg"
                                    style="width:{{ ($bd['essential'] / $total) * 100 }}%; background: #6366f1;"
                                    title="Konum: +{{ $bd['essential'] }}"></div>
                            @endif
                            @if (($bd['accidental'] ?? 0) > 0)
                                <div class="dp-bar-seg"
                                    style="width:{{ ($bd['accidental'] / $total) * 100 }}%; background: #22c55e;"
                                    title="Casa: +{{ $bd['accidental'] }}"></div>
                            @endif
                            @if (($bd['aspectual'] ?? 0) > 0)
                                <div class="dp-bar-seg"
                                    style="width:{{ ($bd['aspectual'] / $total) * 100 }}%; background: #f59e0b;"
                                    title="Aspectos: +{{ $bd['aspectual'] }}"></div>
                            @endif
                            @if (($bd['special'] ?? 0) > 0)
                                <div class="dp-bar-seg"
                                    style="width:{{ ($bd['special'] / $total) * 100 }}%; background: #ec4899;"
                                    title="Especial: +{{ $bd['special'] }}"></div>
                            @endif
                        </div>
                        <div class="dp-legend">
                            <span><i style="background:#6366f1;"></i> Konum</span>
                            <span><i style="background:#22c55e;"></i> Ev</span>
                            <span><i style="background:#f59e0b;"></i> Açılar</span>
                            <span><i style="background:#ec4899;"></i> Özel</span>
                        </div>
                    </div> --}}
                </div>
            @endforeach
        </div>


        {{-- Detay kısmı --}}
        @if (!empty($dominantPlanets[0]['details']))
            <div class="dp-top-detail mt-2 mb-3">
                <small class="text-muted">
                    <i class="fa-solid fa-crown me-1" style="color: #D4AF37;"></i>
                    {{ $dominantPlanets[0]['name'] }}: {{ $dominantPlanets[0]['details'] }}
                </small>
            </div>
        @endif

        {{-- Kalan gezegenler (4+): kompakt liste --}}
        @if (count($dominantPlanets) > 3)
            <div class="dp-list">
                @foreach (array_slice($dominantPlanets, 3) as $j => $p)
                    <div class="dp-list-item">
                        <div class="dp-list-rank">{{ $j + 4 }}.</div>
                        <span class="dp-list-sym"
                            style="color: {{ $p['color'] }}; font-family: 'HamburgSymbols'; font-size: 18px;">
                            {{ $p['sym'] }}
                        </span>
                        <span class="dp-list-name">{{ $p['name'] }}</span>
                        <div class="dp-list-bar flex-grow-1 mx-2">
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar"
                                    style="width: {{ $p['percent'] }}%; background-color: {{ $p['color'] }};"></div>
                            </div>
                        </div>
                        <span class="dp-list-score">{{ $p['score'] }}</span>
                    </div>
                @endforeach
            </div>
        @endif

        {{-- Açı sayısı notu + tablo butonu --}}
        @if (!empty($dominantPlanets[0]))
            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-center mt-2 gap-2">
                <div class="dp-note">
                    <small class="text-muted">
                        {{ t('most-active') }}: {{ $dominantPlanets[0]['name'] }}
                        ({{ $dominantPlanets[0]['aspect_count'] }} {{ t('aspects_count', 'aspectos') }})
                    </small>
                </div>
            </div>

            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-center mt-2 gap-2">
                <div>
                    <button type="button" class="btn ag-tab-btn btn-sm" data-bs-toggle="modal"
                        data-bs-target="#dominantPlanetTableModal">
                        {{ t('dominant-planet-points-table') }}
                    </button>
                </div>
            </div>
        @endif
    @endif
</div>

{{-- Detay tablo modalı --}}
@if (!empty($dominantPlanets))
    <div class="modal fade" id="dominantPlanetTableModal" tabindex="-1" aria-labelledby="dominantPlanetTableModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dominantPlanetTableModalLabel">
                        {{ t('dominant-planets-detailed-points-table') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('close', 'Cerrar') }}"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table
                            class="table table-sm table-bordered border-radius-10 table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>{{ t('planet') }}</th>
                                    <th class="text-center">
                                        {{ t('sign') }}
                                        <div class="small text-muted fw-normal">{{ t('sign-description') }}</div>
                                    </th>
                                    <th class="text-center">
                                        {{ t('house') }}
                                        <div class="small text-muted fw-normal">{{ t('house-description') }}</div>
                                    </th>
                                    <th class="text-center">
                                        {{ t('angle-points') }}
                                        <div class="small text-muted fw-normal">{{ t('angle-points-description') }}</div>
                                    </th>
                                    <th class="text-center">
                                        {{ t('rulership-planets') }}
                                        <div class="small text-muted fw-normal">{{ t('rulership-planets-description') }}</div>
                                    </th>
                                    <th class="text-center">
                                        {{ t('angles') }}
                                        <div class="small text-muted fw-normal">{{ t('planet-planet-angles') }}</div>
                                    </th>
                                    <th class="text-center">
                                        {{ t('total-points') }}
                                        <div class="small text-muted fw-normal">{{ t('total-points-description') }}</div>
                                    </th>
                                    <th class="text-center">
                                        {{ t('dominant-percentage') }}
                                        <div class="small text-muted fw-normal">{{ t('general-power-ratio') }}</div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($dominantPlanets as $p)
                                    @php
                                        $cols = $p['columns'] ?? [
                                            'sign' => 0,
                                            'house' => 0,
                                            'angle' => 0,
                                            'ruler' => 0,
                                            'aspects' => 0,
                                        ];
                                    @endphp
                                    <tr>
                                        <td>
                                            <span
                                                style="font-family: 'HamburgSymbols'; font-size: 16px; color: {{ $p['color'] }};"
                                                class="me-1">{{ $p['sym'] }}</span>
                                            <strong>{{ $p['name'] }}</strong>
                                        </td>
                                        <td class="text-center">{{ $cols['sign'] }}</td>
                                        <td class="text-center">{{ $cols['house'] }}</td>
                                        <td class="text-center">{{ $cols['angle'] }}</td>
                                        <td class="text-center">{{ $cols['ruler'] }}</td>
                                        <td class="text-center">{{ $cols['aspects'] }}</td>
                                        <td class="text-center">{{ $p['score'] }}</td>
                                        <td class="text-center">
                                            {{ number_format($p['percent'] ?? 0, 2) }}%
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif