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

<style>
    .custom-scroll::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scroll::-webkit-scrollbar-track {
        background: #f1f5f9; /* Slate-100 */
        border-radius: 4px;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1; /* Slate-300 */
        border-radius: 4px;
    }
    .custom-scroll::-webkit-scrollbar-thumb:hover {
        background: #94a3b8; /* Slate-400 */
    }

    @media (prefers-color-scheme: dark) {
        .custom-scroll::-webkit-scrollbar-track {
            background: rgba(30, 41, 59, 0.5); 
        }
        .custom-scroll::-webkit-scrollbar-thumb {
            background: rgba(71, 85, 105, 0.8); 
        }
        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(100, 116, 139, 1); 
        }
    }
</style>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    
    <div class="card-gradient rounded-2xl p-6 flex flex-col" style="max-height: 500px;">
        <div class="flex items-center justify-between mb-4 flex-shrink-0">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                <span class="text-2xl">⏱️</span> Personal Best
            </h3>
            <span class="text-xs text-gray-500 dark:text-slate-500 uppercase tracking-wide">All Time</span>
        </div>

        <div class="space-y-4 overflow-y-auto custom-scroll pr-2 flex-1">
            @forelse($groupedHistories as $discName => $histories)
                @php
                    $firstItem = $histories->first();
                    $isDistance = in_array($firstItem->discipline->result_type, ['distance', 'points']);
                    
                    if($isDistance) {
                        $best = $histories->sortByDesc('result_mark')->first();
                    } else {
                        $best = $histories->sortBy('result_mark')->first();
                    }

                    // Variasi Warna Border Hover (Adaptif)
                    $hoverColors = [
                        'hover:border-blue-400 dark:hover:border-blue-500/30', 
                        'hover:border-purple-400 dark:hover:border-purple-500/30', 
                        'hover:border-emerald-400 dark:hover:border-emerald-500/30'
                    ];
                    $hoverClass = $hoverColors[$loop->index % 3];
                    
                    // Variasi Warna Teks (Gelap di Light Mode, Terang di Dark Mode)
                    $textColors = [
                        'text-blue-600 dark:text-blue-400', 
                        'text-purple-600 dark:text-purple-400', 
                        'text-emerald-600 dark:text-emerald-400'
                    ];
                    $textClass = $textColors[$loop->index % 3];
                @endphp

                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-slate-800/50 rounded-xl border border-gray-200 dark:border-slate-700/30 {{ $hoverClass }} transition-all group">
                    <div>
                        <p class="text-gray-900 dark:text-white font-bold text-lg">{{ $discName }}</p>
                        <p class="text-gray-500 dark:text-slate-500 text-sm truncate w-40" title="{{ $best->competition_name }}">{{ $best->competition_name }}</p>
                    </div>
                    <div class="text-right">
                        <p class="mono text-2xl font-bold {{ $textClass }}">
                            {{ $best->result_mark }}<span class="text-lg text-gray-400 dark:text-slate-500 ms-1">{{ $best->discipline->unit_symbol ?? '' }}</span>
                        </p>
                        
                        @php
                            $hasRecord = $best->performanceRemarks->whereIn('code', ['NR', 'WR'])->first();
                        @endphp
                        
                        @if($hasRecord)
                            <p class="text-xs text-emerald-600 dark:text-emerald-400 mt-1 font-bold">
                                {{ $hasRecord->code == 'NR' ? '🇮🇩 NR' : '🌍 WR' }}
                            </p>
                        @else
                            <p class="text-xs text-gray-400 dark:text-slate-400 mt-1">{{ $best->date->format('Y') }}</p>
                        @endif
                    </div>
                </div>
            @empty
                <div class="text-center py-8">
                    <p class="text-gray-500 dark:text-slate-500 text-sm">Belum ada catatan Personal Best.</p>
                </div>
            @endforelse
        </div>
    </div>

    <div class="card-gradient rounded-2xl p-6 flex flex-col" style="max-height: 500px;">
        <div class="flex items-center justify-between mb-4 flex-shrink-0">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                <span class="text-2xl">📊</span> Season Best {{ date('Y') }}
            </h3>
            <span class="px-2 py-1 bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400 text-xs rounded-full border border-emerald-200 dark:border-emerald-500/30">Active</span>
        </div>

        <div class="space-y-4 overflow-y-auto custom-scroll pr-2 flex-1">
            @forelse($groupedHistories as $discName => $histories)
                @php
                    $thisYearHistories = $histories->filter(function($h) {
                        return $h->date->format('Y') == date('Y');
                    });

                    if ($thisYearHistories->isEmpty()) continue;

                    $firstItem = $thisYearHistories->first();
                    $isDistance = in_array($firstItem->discipline->result_type, ['distance', 'points']);

                    if($isDistance) {
                        $sb = $thisYearHistories->sortByDesc('result_mark')->first();
                        $pb = $histories->sortByDesc('result_mark')->first();
                    } else {
                        $sb = $thisYearHistories->sortBy('result_mark')->first();
                        $pb = $histories->sortBy('result_mark')->first();
                    }

                    $diff = null;
                    if(is_numeric($sb->result_mark) && is_numeric($pb->result_mark)) {
                        $diff = abs($sb->result_mark - $pb->result_mark);
                        $diff = round($diff, 2);
                    }
                @endphp

                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-slate-800/50 rounded-xl border border-gray-200 dark:border-slate-700/30 hover:border-gray-400 dark:hover:border-slate-500/30 transition-all">
                    <div>
                        <p class="text-gray-900 dark:text-white font-bold text-lg">{{ $discName }}</p>
                        <p class="text-gray-500 dark:text-slate-500 text-sm truncate w-40" title="{{ $sb->competition_name }}">{{ $sb->competition_name }}</p>
                    </div>
                    <div class="text-right">
                        <p class="mono text-2xl font-bold text-gray-800 dark:text-white">
                            {{ $sb->result_mark }}<span class="text-lg text-gray-400 dark:text-slate-500 ms-1">{{ $sb->discipline->unit_symbol ?? '' }}</span>
                        </p>
                        
                        @if($diff !== null && $diff > 0)
                            <p class="text-xs text-amber-600 dark:text-amber-400 mt-1" title="Selisih dari PB">
                                {{ $isDistance ? '-' : '+' }}{{ $diff }} vs PB
                            </p>
                        @elseif($diff === 0.0)
                            <p class="text-xs text-emerald-600 dark:text-emerald-400 mt-1 font-bold">Equals PB!</p>
                        @else
                            <p class="text-xs text-gray-400 dark:text-slate-400 mt-1">SB</p>
                        @endif
                    </div>
                </div>
            @empty
                <div class="text-center py-8">
                    <p class="text-gray-500 dark:text-slate-500 text-sm">Belum ada data kompetisi di tahun {{ date('Y') }}.</p>
                </div>
            @endforelse
        </div>
    </div>

</div>