{{-- resources/views/public/athlete_detail_honours.blade.php --}}

@php
    if (!isset($achievements)) {
        $achievements = $featuredAthlete->performanceHistories->filter(function($h) {
            return in_array($h->place, [1, 2, 3]);
        })->sortByDesc('date');
    }

    $highlightHonours = $achievements->filter(function($a) {
        $name = strtolower($a->competition_name);
        return $a->place == 1 && (
            str_contains($name, 'world') || 
            str_contains($name, 'olympic') || 
            str_contains($name, 'asian') || 
            str_contains($name, 'sea games') || 
            str_contains($name, 'pon') ||
            str_contains($name, 'kejurnas')
        );
    })->take(2);

    if ($highlightHonours->isEmpty()) {
        $highlightHonours = $achievements->take(2);
    }

    $totalMedals = ($medals['gold'] ?? 0) + ($medals['silver'] ?? 0) + ($medals['bronze'] ?? 0);
@endphp

@if($achievements->count() > 0)
<section id="honours-section" class="mb-12">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
            <span class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-white shadow-lg shadow-amber-500/20"> 🏅 </span> 
            Rekam Jejak Prestasi
        </h2>
    </div>

    @if($highlightHonours->count() > 0)
    <div class="mb-8">
        <h3 class="text-sm font-semibold text-amber-600 dark:text-amber-400 uppercase tracking-wide mb-4 flex items-center gap-2">
            <span>⭐</span> Prestasi Bergengsi
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            @foreach($highlightHonours as $h)
                @php
                    $eventName = strtolower($h->competition_name);
                    $badgeText = 'Champion';
                    $badgeClass = 'bg-amber-100 text-amber-700 dark:bg-amber-500/30 dark:text-amber-300'; 

                    if (str_contains($eventName, 'world')) { 
                        $badgeText = 'World Level'; 
                        $badgeClass = 'bg-amber-100 text-amber-700 dark:bg-amber-500/30 dark:text-amber-300';
                    } elseif (str_contains($eventName, 'asian')) { 
                        $badgeText = 'Asian Level'; 
                        $badgeClass = 'bg-blue-100 text-blue-700 dark:bg-blue-500/30 dark:text-blue-300'; 
                    } elseif (str_contains($eventName, 'sea games')) { 
                        $badgeText = 'Regional'; 
                        $badgeClass = 'bg-purple-100 text-purple-700 dark:bg-purple-500/30 dark:text-purple-300'; 
                    } elseif (str_contains($eventName, 'pon')) { 
                        $badgeText = 'PON'; 
                        $badgeClass = 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/30 dark:text-emerald-300'; 
                    } elseif (str_contains($eventName, 'kejurnas')) { 
                        $badgeText = 'National'; 
                        $badgeClass = 'bg-red-100 text-red-700 dark:bg-red-500/30 dark:text-red-300'; 
                    }
                @endphp

                <div class="relative overflow-hidden card-gradient rounded-2xl p-6 border-2 border-amber-300 dark:border-amber-500/50 dark:glow-gold transition-transform hover:-translate-y-1">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-amber-200/40 to-transparent dark:from-amber-500/20 rounded-bl-full"></div>
                    <div class="flex items-start gap-4">
                        <div class="medal-badge flex-shrink-0 w-16 h-16 rounded-xl gold-gradient flex items-center justify-center shadow-lg shadow-amber-500/20">
                            <span class="text-3xl">🥇</span>
                        </div>
                        <div class="flex-1 z-10">
                            <div class="flex items-center gap-2 mb-1">
                                <span class="px-2 py-0.5 {{ $badgeClass }} text-xs font-bold rounded uppercase">
                                    {{ $badgeText }}
                                </span>
                            </div>
                            <h4 class="text-xl font-bold text-gray-900 dark:text-white mb-1 truncate" title="{{ $h->competition_name }}">
                                {{ $h->competition_name }}
                            </h4>
                            <p class="text-gray-500 dark:text-slate-400 text-sm mb-2">
                                {{ $h->discipline->name }} • {{ $h->venue }}
                            </p>
                            <div class="flex items-center gap-4">
                                <span class="mono text-lg font-bold text-amber-600 dark:text-amber-400">{{ $h->result_mark }}</span> 
                                <span class="text-gray-400 dark:text-slate-500 text-sm">{{ $h->date->format('F Y') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    @endif

    <div id="honours-grid-container">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" id="honours-grid">
            @foreach($achievements as $ach)
                @php
                    $gradient = match($ach->place) { 1 => 'gold-gradient', 2 => 'silver-gradient', 3 => 'bronze-gradient', default => 'bg-slate-700' };
                    $medalIcon = match($ach->place) { 1 => '🥇', 2 => '🥈', 3 => '🥉', default => '#' };
                    
                    $borderHover = match($ach->place) { 
                        1 => 'hover:border-amber-400 dark:hover:border-amber-500/30', 
                        2 => 'hover:border-slate-400 dark:hover:border-slate-400/30', 
                        3 => 'hover:border-orange-400 dark:hover:border-orange-500/30', 
                        default => 'hover:border-blue-400 dark:hover:border-blue-500/30' 
                    };
                    
                    $textResultColor = match($ach->place) { 
                        1 => 'text-blue-600 dark:text-blue-400', 
                        2 => 'text-blue-600 dark:text-blue-400', 
                        3 => 'text-cyan-600 dark:text-cyan-400', 
                        default => 'text-gray-900 dark:text-white' 
                    };
                    
                    $rankLabel = match($ach->place) {
                        1 => '<span class="text-amber-600 dark:text-amber-400 text-xs font-semibold">🏆 Gold</span>',
                        2 => '<span class="text-slate-600 dark:text-slate-300 text-xs font-semibold">🥈 Silver</span>',
                        3 => '<span class="text-orange-600 dark:text-orange-400 text-xs font-semibold">🥉 Bronze</span>',
                        default => '<span class="text-gray-500 dark:text-slate-500 text-xs">Rank ' . $ach->place . '</span>'
                    };
                @endphp

                <div class="honour-card card-gradient rounded-xl p-5 border border-gray-200 dark:border-slate-700/50 {{ $borderHover }} transition-all" style="display: none;">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-12 h-12 rounded-lg {{ $gradient }} flex items-center justify-center shadow-md">
                            <span class="text-xl">{{ $medalIcon }}</span>
                        </div>
                        <div class="overflow-hidden">
                            <p class="text-gray-900 dark:text-white font-semibold truncate" title="{{ $ach->competition_name }}">{{ $ach->competition_name }}</p>
                            <p class="text-gray-500 dark:text-slate-500 text-sm truncate">{{ $ach->discipline->name }} • {{ $ach->venue }}</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="mono {{ $textResultColor }} font-bold">{{ $ach->result_mark }}</span> 
                        {!! $rankLabel !!}
                    </div>
                </div>
            @endforeach
        </div>

        @if($achievements->count() > 6)
        <div class="flex justify-center items-center mt-6 gap-4">
            <button id="btnPrevHonour" class="px-4 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 rounded-lg disabled:opacity-50 transition-all text-sm font-semibold">
                &larr; Sebelumnya
            </button>
            <span class="text-gray-500 dark:text-slate-400 text-sm">
                Halaman <span id="honourPageNum" class="text-gray-900 dark:text-white font-bold">1</span> dari <span id="honourTotalPages">1</span>
            </span>
            <button id="btnNextHonour" class="px-4 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 rounded-lg disabled:opacity-50 transition-all text-sm font-semibold">
                Selanjutnya &rarr;
            </button>
        </div>
        @endif
    </div>

    <div class="mt-6 card-gradient rounded-xl p-4 border border-gray-200 dark:border-slate-700/50">
        <div class="flex flex-wrap items-center justify-center gap-8">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg gold-gradient flex items-center justify-center shadow-sm"><span>🥇</span></div>
                <div>
                    <p class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ $medals['gold'] ?? 0 }}</p>
                    <p class="text-xs text-gray-500 dark:text-slate-500 uppercase">Gold</p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg silver-gradient flex items-center justify-center shadow-sm"><span>🥈</span></div>
                <div>
                    <p class="text-2xl font-bold text-gray-600 dark:text-slate-300">{{ $medals['silver'] ?? 0 }}</p>
                    <p class="text-xs text-gray-500 dark:text-slate-500 uppercase">Silver</p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bronze-gradient flex items-center justify-center shadow-sm"><span>🥉</span></div>
                <div>
                    <p class="text-2xl font-bold text-orange-600 dark:text-orange-400">{{ $medals['bronze'] ?? 0 }}</p>
                    <p class="text-xs text-gray-500 dark:text-slate-500 uppercase">Bronze</p>
                </div>
            </div>
            <div class="h-12 w-px bg-gray-300 dark:bg-slate-700 hidden sm:block"></div>
            <div class="text-center">
                <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ $totalMedals }}</p>
                <p class="text-xs text-gray-500 dark:text-slate-500 uppercase">Total Medals</p>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const cards = Array.from(document.querySelectorAll('.honour-card'));
    const itemsPerPage = 6;
    let currentPage = 1;
    const totalPages = Math.ceil(cards.length / itemsPerPage);

    const btnPrev = document.getElementById('btnPrevHonour');
    const btnNext = document.getElementById('btnNextHonour');
    const pageNumEl = document.getElementById('honourPageNum');
    const totalPagesEl = document.getElementById('honourTotalPages');

    if (cards.length > 0) {
        if(totalPagesEl) totalPagesEl.innerText = totalPages;

        function showPage(page) {
            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;

            cards.forEach((card, index) => {
                if (index >= start && index < end) {
                    card.style.display = 'block';
                    card.style.opacity = '0';
                    setTimeout(() => card.style.opacity = '1', 50);
                } else {
                    card.style.display = 'none';
                }
            });

            if(pageNumEl) pageNumEl.innerText = page;
            
            if(btnPrev) btnPrev.disabled = page === 1;
            if(btnNext) btnNext.disabled = page === totalPages;
        }

        showPage(1);

        if(btnPrev) {
            btnPrev.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    showPage(currentPage);
                }
            });
        }

        if(btnNext) {
            btnNext.addEventListener('click', () => {
                if (currentPage < totalPages) {
                    currentPage++;
                    showPage(currentPage);
                }
            });
        }
    }
});
</script>
@endif