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

@section('content')
<div class="page-inner">
    
    @include('admin.competitors._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 Pesaing / Luar (Season Best)
                            </h4>
                            <p class="text-white-50 small mb-0">Data performa terbaik dari kompetitor luar 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-{{ Str::slug($age) }}" 
                                   data-bs-toggle="pill" 
                                   href="#content-{{ Str::slug($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 Kompetitor</label>
                            <input type="text" class="form-control searchInput rounded-0" placeholder="Ketik nama kompetitor 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-{{ Str::slug($age) }}" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-hover align-middle border">
                                    <thead class="bg-light text-muted small uppercase">
                                        <tr>
                                            <th class="text-center" style="width: 80px;">Rank</th>
                                            <th>Competitor</th>
                                            <th class="text-end" style="width: 150px;">Result (SB)</th>
                                            <th style="width: 200px;">Discipline</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->competitor->name ?? '') }}">
                                                            
                                                            <td class="text-center">
                                                                <div class="badge-rank rank-{{ $loop->iteration }} mx-auto">
                                                                    {{ $loop->iteration }}
                                                                </div>
                                                            </td>
                                                            
                                                            <td>
                                                                <div class="d-flex align-items-center">
                                                                    <div class="avatar avatar-sm me-3 flex-shrink-0" style="width: 40px; height: 40px;">
                                                                        @if($rankData->competitor->photo)
                                                                            <img src="{{ asset('storage/'.$rankData->competitor->photo) }}" 
                                                                                 class="avatar-img rounded-circle border shadow-sm" 
                                                                                 style="width: 100%; height: 100%; object-fit: cover; object-position: top;">
                                                                        @else
                                                                            <div class="avatar-title rounded-circle border bg-light text-muted" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                                                                                <i class="fas fa-user"></i>
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                    <div>
                                                                        <a href="{{ route('admin.competitors.edit.profile', $rankData->competitor->id) }}" class="fw-bold text-dark text-uppercase text-decoration-none hover-underline">
                                                                            {{ $rankData->competitor->name }}
                                                                        </a>
                                                                        <div class="small text-muted">
                                                                            @php $countries = config('countries'); @endphp
                                                                            @if(isset($countries[$rankData->competitor->country_code])) {{ $countries[$rankData->competitor->country_code]['flag'] }} @endif
                                                                            {{ $rankData->competitor->country_code }}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            
                                                            <td class="text-end">
                                                                <div class="fw-bold text-primary fs-5 font-monospace">{{ $rankData->season_best }}</div>
                                                                <div class="text-[9px] text-muted uppercase">Season Best</div>
                                                            </td>
                                                            
                                                            <td>
                                                                <span class="badge {{ $discipline->gender == 'male' ? 'bg-primary' : 'bg-danger' }} text-white mb-1" style="font-size: 0.6rem;">
                                                                    {{ strtoupper($discipline->gender) }}
                                                                </span>
                                                                <div class="fw-bold small">{{ $discipline->name }}</div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        @endforeach
                                        
                                        @if(!$hasData)
                                            <tr class="no-data-msg">
                                                <td colspan="4" class="text-center py-5 text-muted">
                                                    <i class="fas fa-inbox fa-3x mb-3 opacity-25"></i>
                                                    <p>Belum ada data peringkat untuk kategori <b>{{ $age }}</b></p>
                                                </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