{{-- resources/views/admin/competitors/national_records.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> Rekor Pesaing (International/Luar Records)
                            </h4>
                            <p class="text-white-50 small mb-0">Daftar rekor yang dipegang oleh kompetitor/pesaing dari luar daerah atau internasional.</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 Kompetitor</label>
                            <div class="input-group">
                                <input type="text" id="searchInput" class="form-control rounded-0" placeholder="Ketik nama kompetitor 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-hover align-middle border">
                                        <thead class="bg-light">
                                            <tr class="text-uppercase small text-muted">
                                                <th class="ps-4">Current Record Holder</th>
                                                <th class="text-center" style="width: 140px;">Mark</th>
                                                <th style="width: 200px;">Discipline</th>
                                                <th style="width: 350px;">Record History (Previous)</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->competitor : null; // [PERBAIKAN] menjadi competitor
                                                        @endphp
                                                        
                                                        @if($current && $mainAthlete)
                                                        <tr class="record-row border-bottom" 
                                                            data-gender="{{ $discipline->gender }}"
                                                            data-athlete-name="{{ strtolower($mainAthlete->name) }}">
                                                            
                                                            <td class="ps-4 align-top py-4">
                                                                <div class="d-flex align-items-center">
                                                                    <div class="avatar avatar-md me-3 flex-shrink-0" style="width: 50px; height: 50px;">
                                                                        @if($mainAthlete->photo)
                                                                            <img src="{{ asset('storage/'.$mainAthlete->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 fa-lg"></i>
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                    <div>
                                                                        <a href="{{ route('admin.competitors.edit.profile', $mainAthlete->id) }}" class="fw-bold text-dark text-uppercase text-decoration-none hover-underline fs-6">
                                                                            {{ $mainAthlete->name }}
                                                                        </a>
                                                                        <div class="small text-muted mb-1">
                                                                            @php $countries = config('countries'); @endphp
                                                                            @if(isset($countries[$mainAthlete->country_code])) {{ $countries[$mainAthlete->country_code]['flag'] }} @endif
                                                                            {{ $mainAthlete->country_code }}
                                                                        </div>
                                                                        <div class="text-[11px] text-primary">
                                                                            <i class="fas fa-calendar-alt me-1"></i>
                                                                            {{ $current->date ? $current->date->format('d M Y') : '-' }}
                                                                        </div>
                                                                        <div class="text-[10px] italic text-muted mt-1 line-clamp-1" title="{{ $current->competition_name }}">{{ $current->competition_name }}</div>
                                                                    </div>
                                                                </div>
                                                            </td>

                                                            <td class="text-center align-top py-4" style="border-right: 1px solid #eee; border-left: 1px solid #eee;">
                                                                <div class="fw-bold text-danger font-monospace fs-5 mb-1">
                                                                    {{ $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="badge bg-{{ $remark->badge_color }}" title="{{ $remark->name }}" style="font-size: 0.65rem; padding: 4px 8px;">
                                                                                {{ $remark->code }}
                                                                            </span>
                                                                        @endif
                                                                    @endforeach
                                                                </div>
                                                            </td>

                                                            <td class="align-top py-4">
                                                                <div class="fw-bold text-dark fs-6 mb-2">{{ $discipline->name }}</div>
                                                                
                                                                @if($discipline->gender == 'male')
                                                                    <span class="badge bg-primary text-white px-2 py-1" style="font-size: 0.65rem;">PUTRA (MALE)</span>
                                                                @elseif($discipline->gender == 'female')
                                                                    <span class="badge bg-danger text-white px-2 py-1" style="font-size: 0.65rem;">PUTRI (FEMALE)</span>
                                                                @else
                                                                    <span class="badge bg-warning text-dark px-2 py-1" style="font-size: 0.65rem;">CAMPURAN (MIX)</span>
                                                                @endif
                                                            </td>

                                                            <td class="align-top py-4 bg-light-gray" style="background-color: #fbfbfb;">
                                                                @if($histories && $histories->count() > 0)
                                                                    @foreach($histories as $h)
                                                                        @if($h && $h->competitor) {{-- [PERBAIKAN] menjadi competitor --}}
                                                                        <div class="d-flex align-items-center gap-2 mb-3 border-left border-secondary pl-3 ml-1">
                                                                            <div class="avatar avatar-xs flex-shrink-0" style="width: 32px; height: 32px;">
                                                                                @if($h->competitor->photo)
                                                                                    <img src="{{ asset('storage/'.$h->competitor->photo) }}" class="avatar-img rounded-circle border" style="width: 100%; height: 100%; object-fit: cover; object-position: top;">
                                                                                @else
                                                                                    <div class="avatar-title rounded-circle bg-light text-muted border" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 8px;">
                                                                                        <i class="fas fa-user"></i>
                                                                                    </div>
                                                                                @endif
                                                                            </div>
                                                                            <div class="flex-1">
                                                                                <div class="small fw-bold text-dark">
                                                                                    {{ $h->result_mark }} <span class="fw-normal text-muted">oleh</span> {{ $h->competitor->name }}
                                                                                </div>
                                                                                <div class="text-[9px] text-muted">{{ $h->date ? $h->date->format('M Y') : '' }} • {{ Str::limit($h->competition_name, 35) }}</div>
                                                                            </div>
                                                                        </div>
                                                                        @endif
                                                                    @endforeach
                                                                @else
                                                                    <div class="text-center text-muted opacity-50 py-3 small italic">
                                                                        <i class="fas fa-info-circle mb-1 d-block"></i>
                                                                        Tidak ada riwayat rekor lama
                                                                    </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">
                                                        <i class="fas fa-inbox fa-3x mb-3 opacity-25"></i>
                                                        <p>Belum ada data Rekor Nasional 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.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