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

<section id="progression-section" class="mb-12">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 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-cyan-500 to-blue-600 flex items-center justify-center text-white shadow-lg shadow-cyan-500/20">📈</span> 
            Visualisasi Progresi Performa
        </h2>
        
        <div class="flex flex-wrap gap-2" id="eventButtonsContainer">
            @if(isset($chartData) && count($chartData) > 0)
                @foreach($chartData as $name => $data)
                    <button class="event-btn px-4 py-2 text-sm font-medium rounded-lg transition-all {{ $loop->first ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/30' : 'bg-gray-200 text-gray-600 hover:bg-gray-300 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600' }}" 
                            data-event="{{ $name }}">
                        {{ $name }}
                    </button>
                @endforeach
            @else
                <button class="px-4 py-2 bg-gray-200 text-gray-400 dark:bg-slate-700 dark:text-slate-500 text-sm font-medium rounded-lg cursor-not-allowed">
                    Tidak ada data
                </button>
            @endif
        </div>
    </div>

    <div class="card-gradient rounded-2xl p-4 mb-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center gap-6">
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                    <span class="text-sm text-gray-600 dark:text-slate-400 font-medium">Hasil Lomba</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
                    <span class="text-sm text-gray-600 dark:text-slate-400 font-medium">Trend Positif</span>
                </div>
            </div>
            
            <div class="flex items-center gap-2 px-3 py-1.5 bg-cyan-50 border border-cyan-200 text-cyan-700 dark:bg-cyan-500/10 dark:border-cyan-500/30 dark:text-cyan-300 rounded-lg">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                <span class="text-xs font-medium" id="chartInfoText">
                    Memuat info...
                </span>
            </div>
        </div>
    </div>

    <div class="card-gradient rounded-2xl p-6 mb-6">
        <div class="chart-container relative w-full" style="height: 350px;">
            <canvas id="publicProgressionChart"></canvas>
        </div>
    </div>
</section>