{{-- resources/views/admin/athletes/national_records.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> Rekor Nasional (National Records)
                            </h4>
                            <p class="text-white-50 small mb-0">Daftar pemegang rekor nasional aktif dan sejarah pemecahannya.</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)
                            @php $tabSlug = Str::slug($age); @endphp
                            <li class="nav-item">
                                <a class="nav-link {{ $index === 0 ? 'active' : '' }} fw-bold custom-square-tab" 
                                   id="tab-{{ $tabSlug }}" 
                                   data-bs-toggle="pill" 
                                   href="#content-{{ $tabSlug }}" 
                                   role="tab">
                                    REKOR {{ $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 id="genderFilter" class="form-select rounded-0" onchange="applyFilters()">
                                <option value="all">Semua Gender</option>
                                <option value="male">Putra (Male)</option>
                                <option value="female">Putri (Female)</option>
                                <option value="mixed">Campuran (Mix)</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <label class="small fw-bold text-uppercase text-muted">Cari Nama Atlet</label>
                            <div class="input-group">
                                <input type="text" id="searchInput" class="form-control rounded-0" placeholder="Ketik nama atlet untuk menyaring..." onkeyup="applyFilters()">
                                <button class="btn btn-secondary rounded-0" type="button" onclick="resetFilters()">
                                    <i class="fas fa-sync-alt"></i> Reset
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="tab-content" id="ageTabContent">
                        @foreach($ageGroups as $index => $age)
                            @php $tabSlug = Str::slug($age); @endphp
                            <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" id="content-{{ $tabSlug }}" 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="small text-center text-dark">
                                                <th width="35%" class="text-start">Pemegang Rekor Saat Ini</th>
                                                <th width="20%">Nomor Lomba</th>
                                                <th width="15%">Hasil (Mark)</th>
                                                <th width="30%" class="text-start">Riwayat Sebelumnya</th>
                                            </tr>
                                        </thead>
                                        <tbody class="recordsTableBody">
                                            @php $hasData = false; @endphp
                                            
                                            @foreach($categories as $category)
                                                @foreach($category->disciplines as $discipline)
                                                    @if(isset($records[$age][$discipline->id]))
                                                        @php 
                                                            $hasData = true;
                                                            $recGroup = $records[$age][$discipline->id]; 
                                                            $current = $recGroup->current ?? null;
                                                            $histories = $recGroup->history ?? collect([]);
                                                            $mainAthlete = $current ? $current->athlete : null;
                                                        @endphp
                                                        
                                                        @if($current && $mainAthlete)
                                                        <tr class="record-row" 
                                                            data-gender="{{ $discipline->gender }}"
                                                            data-athlete-name="{{ strtolower($mainAthlete->name) }}">
                                                            
                                                            <td>
                                                                <div class="d-flex align-items-center gap-3">
                                                                    <div style="width: 45px; height: 45px; flex-shrink: 0;">
                                                                        <img src="{{ $mainAthlete->photo_url }}" 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', $mainAthlete->id) }}" class="fw-bold text-dark text-decoration-none text-uppercase" style="font-size: 13px;">
                                                                            {{ $mainAthlete->name }}
                                                                        </a>
                                                                        <div class="small text-muted" style="font-size: 12px;">
                                                                            <i class="fas fa-map-marker-alt me-1"></i>{{ $mainAthlete->province_name }}
                                                                        </div>
                                                                        <div class="small text-muted mt-1" style="font-size: 11px;" title="{{ $current->competition_name }}">
                                                                            {{ $current->date ? $current->date->format('d M Y') : '-' }} • {{ Str::limit($current->competition_name, 35) }}
                                                                        </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">{{ $current->result_mark }}</div>
                                                                <div class="d-flex justify-content-center flex-wrap gap-1 mt-1">
                                                                    @foreach($current->performanceRemarks as $remark)
                                                                        @if(str_starts_with($remark->code, 'NR') || $remark->code == 'NU18R')
                                                                            <span class="fw-bold text-dark" style="font-size: 11px;">[{{ $remark->code }}]</span>
                                                                        @endif
                                                                    @endforeach
                                                                </div>
                                                            </td>

                                                            <td>
                                                                @if($histories && $histories->count() > 0)
                                                                    <div class="d-flex flex-column gap-2">
                                                                        @foreach($histories as $h)
                                                                            @if($h && $h->athlete)
                                                                            <div class="d-flex align-items-center gap-2 border-start border-2 border-secondary ps-2">
                                                                                <div style="width: 32px; height: 32px; flex-shrink: 0;">
                                                                                    <img src="{{ $h->athlete->photo_url }}" class="rounded-circle border" style="width: 100%; height: 100%; object-fit: cover; object-position: top;" alt="Foto">
                                                                                </div>
                                                                                <div style="line-height: 1.2;">
                                                                                    <div class="fw-bold text-dark" style="font-size: 12px;">
                                                                                        {{ $h->result_mark }} <span class="fw-normal text-muted">oleh</span> {{ $h->athlete->name }}
                                                                                    </div>
                                                                                    <div class="text-muted mt-1" style="font-size: 10px;">
                                                                                        {{ $h->date ? $h->date->format('M Y') : '' }} • {{ Str::limit($h->competition_name, 35) }}
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            @endif
                                                                        @endforeach
                                                                    </div>
                                                                @else
                                                                    <div class="text-muted small fst-italic">
                                                                        - Tidak ada riwayat -
                                                                    </div>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                        @endif
                                                    @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-flag fa-2x mb-2 opacity-50"></i>
                                                        <div class="fw-bold small">Belum ada data Rekor Nasional 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.getElementById('genderFilter').value;
        const search = document.getElementById('searchInput').value.toLowerCase();
        const rows = activePane.querySelectorAll('.record-row');
        let visibleCount = 0;

        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;
            
            if (showRow) {
                row.style.display = 'table-row';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });

        let noDataMsg = activePane.querySelector('.no-data-msg');
        if(!noDataMsg) {
            const tbody = activePane.querySelector('.recordsTableBody');
            const tr = document.createElement('tr');
            tr.className = 'no-data-msg';
            tr.innerHTML = '<td colspan="4" class="text-center py-5"><i class="fas fa-search fa-3x mb-3 text-muted"></i><p class="fw-bold">Pencarian tidak ditemukan.</p></td>';
            tbody.appendChild(tr);
            noDataMsg = tr;
        }
        noDataMsg.style.display = (visibleCount === 0 && rows.length > 0) ? 'table-row' : 'none';
    }

    function resetFilters() {
        document.getElementById('genderFilter').value = 'all';
        document.getElementById('searchInput').value = '';
        applyFilters();
    }

    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;
    }
    .bg-primary-gradient { background: linear-gradient(-45deg, #1572e8, #1254a3); }
    .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .avatar-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .hover-underline:hover { text-decoration: underline !important; }
</style>
@endsection