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

<div class="card-gradient rounded-2xl p-6 mb-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
            <span class="text-2xl">🏆</span> Riwayat Kompetisi
        </h3>
        
        <div class="flex gap-2">
            <select id="filterYear" class="input-dynamic rounded-lg px-3 py-2 text-sm outline-none transition-all"> 
                <option value="all">Semua Tahun</option>
                @foreach($featuredAthlete->performanceHistories->pluck('date')->map->format('Y')->unique()->sortDesc() as $year)
                    <option value="{{ $year }}">{{ $year }}</option>
                @endforeach
            </select> 
            <select id="filterEvent" class="input-dynamic rounded-lg px-3 py-2 text-sm outline-none transition-all"> 
                <option value="all">Semua Event</option> 
                @foreach($groupedHistories->keys() as $discName)
                    <option value="{{ $discName }}">{{ $discName }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full" id="historyTable">
            <thead>
                <tr class="text-left text-gray-500 dark:text-slate-500 text-sm uppercase tracking-wide border-b border-gray-200 dark:border-slate-700/50">
                    <th class="pb-4 pr-4 font-semibold">Tanggal</th>
                    <th class="pb-4 pr-4 font-semibold">Kejuaraan</th>
                    <th class="pb-4 pr-4 font-semibold">Nomor</th>
                    <th class="pb-4 pr-4 font-semibold">Catatan</th>
                    <th class="pb-4 pr-4 font-semibold">Posisi</th>
                    <th class="pb-4 font-semibold">Lokasi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-slate-700/30" id="tableBody">
                @forelse($featuredAthlete->performanceHistories->sortByDesc('date') as $history)
                    <tr class="history-row hover:bg-gray-50 dark:hover:bg-slate-800/30 transition-colors" 
                        data-year="{{ $history->date->format('Y') }}" 
                        data-event="{{ $history->discipline->name }}">
                        
                        <td class="py-4 pr-4 text-gray-500 dark:text-slate-400 whitespace-nowrap">
                            {{ $history->date->format('d M Y') }}
                        </td>

                        <td class="py-4 pr-4">
                            <span class="text-gray-900 dark:text-white font-medium block">{{ $history->competition_name }}</span>
                            
                            @if($history->rankingCategory)
                                <span class="mt-1 inline-block px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400 text-xs rounded border border-blue-200 dark:border-blue-500/30">
                                    {{ $history->rankingCategory->code }}
                                </span>
                            @elseif(Str::contains(strtolower($history->competition_name), 'pon'))
                                <span class="mt-1 inline-block px-2 py-0.5 bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400 text-xs rounded border border-emerald-200 dark:border-emerald-500/30">PON</span>
                            @elseif(Str::contains(strtolower($history->competition_name), 'sea games'))
                                <span class="mt-1 inline-block px-2 py-0.5 bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-400 text-xs rounded border border-purple-200 dark:border-purple-500/30">Regional</span>
                            @endif
                        </td>

                        <td class="py-4 pr-4 text-gray-700 dark:text-white">
                            {{ $history->discipline->name }}
                        </td>

                        <td class="py-4 pr-4 mono text-blue-600 dark:text-blue-400 font-bold whitespace-nowrap">
                            {{ $history->result_mark }}
                            @if($history->discipline->unit_symbol) <span class="text-gray-400 dark:text-slate-500 text-sm font-normal">{{ $history->discipline->unit_symbol }}</span> @endif
                        </td>

                        <td class="py-4 pr-4">
                            @if($history->place == 1)
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full gold-gradient text-slate-900 font-bold text-sm shadow-sm">1</span>
                            @elseif($history->place == 2)
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full silver-gradient text-slate-900 font-bold text-sm shadow-sm">2</span>
                            @elseif($history->place == 3)
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bronze-gradient text-slate-900 font-bold text-sm shadow-sm">3</span>
                            @else
                                <span class="text-gray-400 dark:text-slate-500 ml-3 font-mono">#{{ $history->place ?? '-' }}</span>
                            @endif
                        </td>

                        <td class="py-4 text-gray-500 dark:text-slate-400">
                            @php
                                $countryData = config('countries.' . $history->country_code);
                                $flag = $countryData['flag'] ?? '🏳️';
                                $countryName = $countryData['name'] ?? $history->country_code;
                            @endphp
                            
                            <span class="me-1 text-lg" title="{{ $countryName }}">
                                {{ $flag }}
                            </span>
                            {{ $history->venue }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="py-8 text-center text-gray-500 dark:text-slate-500">
                            Belum ada data kompetisi.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="flex justify-between items-center mt-4 border-t border-gray-200 dark:border-slate-700/50 pt-4" id="paginationControls">
        <span class="text-sm text-gray-500 dark:text-slate-400">
            Menampilkan <span id="showingStart" class="font-medium text-gray-900 dark:text-white">0</span> - <span id="showingEnd" class="font-medium text-gray-900 dark:text-white">0</span> dari <span id="totalRows" class="font-medium text-gray-900 dark:text-white">0</span> data
        </span>
        <div class="flex gap-2">
            <button id="prevBtn" class="px-3 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium">Sebelumnya</button>
            <button id="nextBtn" class="px-3 py-1 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium">Selanjutnya</button>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const tableBody = document.getElementById('tableBody');
    const rows = Array.from(document.querySelectorAll('.history-row'));
    const filterYear = document.getElementById('filterYear');
    const filterEvent = document.getElementById('filterEvent');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const showingStart = document.getElementById('showingStart');
    const showingEnd = document.getElementById('showingEnd');
    const totalRowsEl = document.getElementById('totalRows');
    
    const rowsPerPage = 5; 
    let currentPage = 1;
    let filteredRows = rows; 

    function applyFilter() {
        const year = filterYear.value;
        const event = filterEvent.value;

        filteredRows = rows.filter(row => {
            const rowYear = row.getAttribute('data-year');
            const rowEvent = row.getAttribute('data-event');
            
            const matchYear = (year === 'all' || rowYear === year);
            const matchEvent = (event === 'all' || rowEvent === event);

            return matchYear && matchEvent;
        });

        currentPage = 1; 
        renderTable();
    }

    function renderTable() {
        rows.forEach(row => row.style.display = 'none');

        const totalItems = filteredRows.length;
        const start = (currentPage - 1) * rowsPerPage;
        const end = start + rowsPerPage;
        const pageItems = filteredRows.slice(start, end);

        pageItems.forEach(row => row.style.display = '');

        if (totalItems === 0) {
            showingStart.textContent = 0;
            showingEnd.textContent = 0;
        } else {
            showingStart.textContent = start + 1;
            showingEnd.textContent = Math.min(end, totalItems);
        }
        totalRowsEl.textContent = totalItems;

        prevBtn.disabled = currentPage === 1;
        nextBtn.disabled = end >= totalItems;
    }

    filterYear.addEventListener('change', applyFilter);
    filterEvent.addEventListener('change', applyFilter);

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

    nextBtn.addEventListener('click', () => {
        const totalItems = filteredRows.length;
        if ((currentPage * rowsPerPage) < totalItems) {
            currentPage++;
            renderTable();
        }
    });

    renderTable();
});
</script>