{{-- resources/views/admin/athletes/ranking.blade.php --}}
@extends('admin.layouts.app')

@section('content')
<div class="page-inner">
    
    @include('admin.athletes._header_stats')

    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-sm">
                <div class="card-header bg-primary-gradient text-white">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <h4 class="card-title fw-bold text-uppercase text-white mb-0">
                                <i class="fas fa-trophy me-2"></i> Peringkat Nasional (Season Best)
                            </h4>
                            <p class="text-white-50 small mb-0">Data performa terbaik atlet berdasarkan musim kompetisi saat ini.</p>
                        </div>
                        <span class="badge badge-light text-primary fw-bold">{{ date('d M Y') }}</span>
                    </div>
                </div>
                
                <div class="card-body">
                    <ul class="nav nav-pills nav-secondary mb-4 gap-1" id="ageTab" role="tablist">
                        @foreach($ageGroups as $index => $age)
                            <li class="nav-item">
                                <a class="nav-link {{ $index === 0 ? 'active' : '' }} fw-bold custom-square-tab" 
                                   id="tab-{{ $age }}" 
                                   data-bs-toggle="pill" 
                                   href="#content-{{ $age }}" 
                                   role="tab">
                                    KATEGORI {{ $age }}
                                </a>
                            </li>
                        @endforeach
                    </ul>

                    <div class="row g-3 mb-4 bg-light p-3 rounded-0 border">
                        <div class="col-md-4">
                            <label class="small fw-bold text-uppercase text-muted">Filter Gender</label>
                            <select class="form-select genderFilter rounded-0" onchange="applyFilters()">
                                <option value="all">Semua Gender</option>
                                <option value="male">Putra (Male)</option>
                                <option value="female">Putri (Female)</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <label class="small fw-bold text-uppercase text-muted">Cari Nama Atlet</label>
                            <input type="text" class="form-control searchInput rounded-0" placeholder="Ketik nama atlet untuk menyaring..." onkeyup="applyFilters()">
                        </div>
                    </div>

                    <div class="tab-content" id="ageTabContent">
                        @foreach($ageGroups as $index => $age)
                        <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" id="content-{{ $age }}" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-hover align-middle mb-0">
                                    <thead class="table-light">
                                        <tr class="text-center text-dark small">
                                            <th width="8%">Rank</th>
                                            <th width="40%" class="text-start">Identitas Atlet</th>
                                            <th width="30%">Nomor Lomba</th>
                                            <th width="22%">Hasil Mark</th>
                                        </tr>
                                    </thead>
                                    <tbody class="rankingTableBody">
                                        @php $hasData = false; @endphp
                                        
                                        @foreach($categories as $category)
                                            @foreach($category->disciplines as $discipline)
                                                @if(isset($rankings[$age][$discipline->id]))
                                                    @php $hasData = true; @endphp
                                                    @foreach($rankings[$age][$discipline->id] as $rankData)
                                                        <tr class="ranking-row" 
                                                            data-gender="{{ $discipline->gender }}"
                                                            data-athlete-name="{{ strtolower($rankData->athlete->name) }}">
                                                            
                                                            <td class="text-center fw-bold">
                                                                @if($loop->iteration == 1)
                                                                    <i class="fas fa-trophy text-warning" title="Rank 1"></i> 1
                                                                @elseif($loop->iteration == 2)
                                                                    <i class="fas fa-medal text-secondary" title="Rank 2"></i> 2
                                                                @elseif($loop->iteration == 3)
                                                                    <i class="fas fa-medal" style="color: #cd7f32;" title="Rank 3"></i> 3
                                                                @else
                                                                    <span class="text-muted">{{ $loop->iteration }}</span>
                                                                @endif
                                                            </td>
                                                            
                                                            <td>
                                                                <div class="d-flex align-items-center gap-3">
                                                                    <div style="width: 45px; height: 45px; flex-shrink: 0;">
                                                                        <img src="{{ $rankData->athlete->photo_url ?? asset('assets/img/user.jpg') }}" class="rounded border" style="width: 100%; height: 100%; object-fit: cover; object-position: top;" alt="Foto">
                                                                    </div>
                                                                    <div>
                                                                        <a href="{{ route('admin.athletes.edit.profile', $rankData->athlete->id) }}" class="fw-bold text-dark text-decoration-none text-uppercase" style="font-size: 13px;">
                                                                            {{ $rankData->athlete->name }}
                                                                        </a>
                                                                        <div class="small text-muted" style="font-size: 12px;">
                                                                            <i class="fas fa-map-marker-alt me-1"></i>{{ $rankData->athlete->province_name }}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            
                                                            <td class="text-center">
                                                                <div class="fw-bold text-dark" style="font-size: 13px;">{{ $discipline->name }}</div>
                                                                <div class="text-muted small mt-1" style="font-size: 11px;">
                                                                    @if($discipline->gender == 'male')
                                                                        (Putra)
                                                                    @elseif($discipline->gender == 'female')
                                                                        (Putri)
                                                                    @else
                                                                        (Campuran)
                                                                    @endif
                                                                </div>
                                                            </td>
                                                            
                                                            <td class="text-center">
                                                                <div class="fw-bold text-dark fs-6">{{ $rankData->season_best }}</div>
                                                                <div class="text-muted fw-bold mt-1" style="font-size: 11px;">[SB]</div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        @endforeach
                                        
                                        @if(!$hasData)
                                            <tr class="no-data-msg">
                                                <td colspan="4" class="text-center py-5 text-muted bg-white">
                                                    <i class="fas fa-trophy fa-2x mb-2 opacity-50"></i>
                                                    <div class="fw-bold small">Belum ada data peringkat untuk kategori {{ $age }}</div>
                                                </td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function applyFilters() {
        const activePane = document.querySelector('.tab-pane.active');
        if(!activePane) return;

        const gender = document.querySelector('.genderFilter').value;
        const search = document.querySelector('.searchInput').value.toLowerCase();
        const rows = activePane.querySelectorAll('.ranking-row');
        
        rows.forEach(row => {
            const rowGender = row.getAttribute('data-gender');
            const rowName = row.getAttribute('data-athlete-name');
            let showRow = true;

            if (gender !== 'all' && rowGender !== gender) showRow = false;
            if (search !== '' && !rowName.includes(search)) showRow = false;

            row.style.display = showRow ? 'table-row' : 'none';
        });
    }

    document.querySelectorAll('a[data-bs-toggle="pill"]').forEach(tab => {
        tab.addEventListener('shown.bs.tab', () => {
            applyFilters();
        });
    });
</script>

<style>
    .custom-square-tab {
        border-radius: 0 !important; 
        border: 1px solid #ddd !important;
        margin-right: -1px;
        background: #f8f9fa !important;
        color: #6c757d !important;
        padding: 10px 20px !important;
    }
    .custom-square-tab.active {
        background: #1572e8 !important;
        color: white !important;
        border-color: #1572e8 !important;
    }

    .badge-rank { 
        width: 30px; 
        height: 30px; 
        border-radius: 50%; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        font-weight: bold; 
        font-size: 0.8rem;
    }
    .rank-1 { background: #FFD700; color: #000; border: 1px solid #e6c200; }
    .rank-2 { background: #E0E0E0; color: #000; border: 1px solid #ccc; }
    .rank-3 { background: #CD7F32; color: #fff; border: 1px solid #b87333; }
    
    .bg-primary-gradient { background: linear-gradient(-45deg, #1572e8, #1254a3); }
    
    .avatar-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .hover-underline:hover { text-decoration: underline !important; }
    .text-\[9px\] { font-size: 9px; }
</style>
@endsection