@php
    // ✅ aynı sayfada 2 firdaria render olursa accordion/collapse id’leri çakışmasın
    $uid = $uid ?? 'fir';
    $accordionId = "accordionFirdaria_{$uid}";
@endphp
<div class="firdaria-container p-2">
    @if (empty($firdaria))
        <div class="text-muted text-center p-3">{{ t('firdaria-data-not-found') }}</div>
    @else
        <div class="accordion accordion-flush" id="{{ $accordionId }}">
            @foreach ($firdaria as $index => $major)
                @php
                    $isActive = $major['is_active'];
                    $collapseId = "collapse-fir-{$uid}-" . $index;
                    $headerId = "heading-fir-{$uid}-" . $index;
                @endphp

                <div class="accordion-item border rounded mb-2 overflow-hidden shadow-sm {{ $isActive ? 'firdaria-active-item' : '' }}">
                    <h2 class="accordion-header" id="{{ $headerId }}">
                        <button class="accordion-button {{ $isActive ? 'firdaria-active-btn' : 'collapsed' }}" type="button"
                            data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}"
                            aria-expanded="{{ $isActive ? 'true' : 'false' }}" aria-controls="{{ $collapseId }}">

                            <div class="d-flex align-items-center w-100">
                                {{-- Gezegen İkonu --}}
                                <div class="me-3 d-flex align-items-center justify-content-center rounded-circle border"
                                    style="width: 32px; height: 32px;">
                                    <span
                                        style="font-family:'HamburgSymbols'; font-size: 18px; color: {{ $major['planet_info']['color'] }};">
                                        {{ $major['planet_info']['sym'] }}
                                    </span>
                                </div>

                                <div class="flex-grow-1">
                                    <div class="fw-bold d-flex align-items-center flex-wrap">
                                        <span>{{ $major['planet_info']['name'] }} {{ t('period') }}</span>
                                        @if ($isActive)
                                            <span class="firdaria-active-badge ms-2">{{ app()->getLocale() === 'tr' ? 'Aktif Dönem' : t('active') }}</span>
                                        @endif
                                    </div>
                                    <div class="small text-muted">
                                        {{ $major['years'] }} {{ t('year') }} &bull; {{ $major['start'] }} - {{ $major['end'] }}
                                    </div>
                                </div>
                            </div>
                        </button>
                    </h2>
                    <div id="{{ $collapseId }}" class="accordion-collapse collapse {{ $isActive ? 'show' : '' }}"
                        aria-labelledby="{{ $headerId }}" data-bs-parent="#{{ $accordionId }}">
                        <div class="accordion-body p-0">
                            @if (!empty($major['sub_periods']))
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover mb-0" style="font-size: 0.85rem;">
                                        <thead class="text-muted">
                                            <tr>
                                                <th class="ps-4">{{ t('sub-period') }}</th>
                                                <th class="text-end pe-4">{{ t('date-range') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($major['sub_periods'] as $sub)
                                                <tr class="{{ $sub['is_active'] ? 'table-active firdaria-active-sub' : '' }}">
                                                    <td class="ps-4 align-middle">
                                                        <span class="me-2"
                                                            style="font-family:'HamburgSymbols'; font-size: 14px; color: {{ $sub['planet_info']['color'] }};">
                                                            {{ $sub['planet_info']['sym'] }}
                                                        </span>
                                                        {{ $sub['planet_info']['name'] }}
                                                    </td>
                                                    <td class="text-end pe-4 align-middle">
                                                        {{ $sub['start'] }} - {{ $sub['end'] }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="p-3 text-center text-muted small">{{ t('sub-period-not-found') }}</div>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>