{{-- resources/views/admin/athletes/index.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 d-flex flex-column flex-xl-row justify-content-between align-items-xl-center pb-3 gap-3">
                    <h4 class="card-title mb-0 flex-shrink-0">
                        <i class="fas fa-users text-primary me-2"></i>Data Atlet 
                        @if(request('training_origin')) 
                            <span class="text-muted fs-5">| {{ request('training_origin') }}</span> 
                        @endif
                    </h4>
                    
                    <div class="d-flex flex-column flex-md-row gap-2 align-items-md-center w-100 justify-content-xl-end">
                        
                        <form action="{{ route('admin.athletes.index') }}" method="GET" class="mb-0 m-0 w-100" style="max-width: 600px;">
                            
                            @if(request()->has('training_origin'))
                                <input type="hidden" name="training_origin" value="{{ request('training_origin') }}">
                            @endif

                            <div class="d-flex flex-column flex-sm-row gap-2">
                                <select name="specialty_category" class="form-select form-select-sm border-primary" style="min-width: 200px;" onchange="this.form.submit()">
                                    <option value="">Semua Kategori Lomba</option>
                                    @foreach($categories as $cat)
                                        <option value="{{ $cat->id }}" {{ request('specialty_category') == $cat->id ? 'selected' : '' }}>
                                            {{ $cat->name }}
                                        </option>
                                    @endforeach
                                </select>
                                
                                <div class="input-group input-group-sm w-100">
                                    <input type="text" name="search" class="form-control border-primary" placeholder="Cari nama atlet..." value="{{ request('search') }}">
                                    <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i></button>
                                    
                                    @if(request('search') || request('specialty_category') || request('training_origin'))
                                        <a href="{{ route('admin.athletes.index') }}" class="btn btn-danger" title="Reset Semua Filter"><i class="fas fa-times"></i></a>
                                    @endif
                                </div>
                            </div>
                        </form>

                        <div class="d-flex gap-2 flex-wrap flex-shrink-0">
                            <button type="button" class="btn btn-success btn-sm" style="border-radius: 4px;" data-bs-toggle="modal" data-bs-target="#importModal">
                                <i class="fas fa-file-import"></i> Import
                            </button>

                            <a href="{{ route('admin.athletes.export') }}" class="btn btn-secondary btn-sm" style="border-radius: 4px;">
                                <i class="fas fa-file-export"></i> Export
                            </a>

                            <a href="{{ route('admin.athletes.create') }}" class="btn btn-primary btn-sm" style="border-radius: 4px;">
                                <i class="fa fa-plus"></i> Tambah
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="card-body pt-2">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @php
                        $activeAthletes = $athletes->where('status', 'active');
                        $inactiveAthletes = $athletes->where('status', 'inactive');

                        $fixedAgeCategories = ['Master', 'Elite', 'U-20', 'U-18', 'U-16'];

                        $checkCategory = function($athlete, $targetAge) {
                            $raw = $athlete->age_category;
                            if (empty($raw)) return false;

                            if (is_array($raw)) {
                                return in_array($targetAge, $raw) || in_array(str_replace('-', '', $targetAge), $raw);
                            }

                            $rawString = strtolower((string) $raw);
                            $targetAgeLower = strtolower($targetAge);
                            $targetAgeCleanLower = str_replace('-', '', $targetAgeLower);

                            return str_contains($rawString, $targetAgeLower) || str_contains($rawString, $targetAgeCleanLower);
                        };
                    @endphp

                    <ul class="nav nav-tabs nav-line nav-color-primary mt-1 mb-4" id="athleteTabs" role="tablist">
                        
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active fw-bold" id="active-all-tab" data-bs-toggle="tab" href="#active-all" role="tab" aria-controls="active-all" aria-selected="true">
                                <i class="fas fa-running me-1"></i> Semua Atlet Aktif 
                                <span class="badge bg-primary ms-1">{{ $activeAthletes->count() }}</span>
                            </a>
                        </li>

                        @foreach($fixedAgeCategories as $age)
                            @php
                                $countAge = $activeAthletes->filter(function($athlete) use ($age, $checkCategory) {
                                    return $checkCategory($athlete, $age);
                                })->count();
                                
                                $tabId = Str::slug($age);
                            @endphp
                            <li class="nav-item" role="presentation">
                                <a class="nav-link fw-bold text-dark" id="tab-{{ $tabId }}" data-bs-toggle="tab" href="#content-{{ $tabId }}" role="tab" aria-controls="content-{{ $tabId }}" aria-selected="false">
                                    <i class="fas fa-medal me-1 text-warning"></i> {{ $age }} 
                                    <span class="badge {{ $countAge > 0 ? 'bg-info text-dark' : 'bg-light text-muted border' }} ms-1">
                                        {{ $countAge }}
                                    </span>
                                </a>
                            </li>
                        @endforeach

                        <li class="nav-item" role="presentation">
                            <a class="nav-link fw-bold text-muted" id="inactive-tab" data-bs-toggle="tab" href="#inactive-athletes" role="tab" aria-controls="inactive-athletes" aria-selected="false">
                                <i class="fas fa-user-clock me-1"></i> Nonaktif 
                                <span class="badge bg-secondary ms-1">{{ $inactiveAthletes->count() }}</span>
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content" id="athleteTabsContent">
                        
                        <div class="tab-pane fade show active" id="active-all" role="tabpanel" aria-labelledby="active-all-tab">
                            @include('admin.athletes._table', ['athleteCollection' => $activeAthletes, 'emptyMessage' => 'Belum ada data atlet aktif.'])
                        </div>

                        @foreach($fixedAgeCategories as $age)
                            @php
                                $athletesInThisAge = $activeAthletes->filter(function($athlete) use ($age, $checkCategory) {
                                    return $checkCategory($athlete, $age);
                                });
                                
                                $tabId = Str::slug($age);
                            @endphp
                            <div class="tab-pane fade" id="content-{{ $tabId }}" role="tabpanel" aria-labelledby="tab-{{ $tabId }}">
                                @include('admin.athletes._table', ['athleteCollection' => $athletesInThisAge, 'emptyMessage' => "Belum ada atlet aktif di kategori $age."])
                            </div>
                        @endforeach

                        <div class="tab-pane fade" id="inactive-athletes" role="tabpanel" aria-labelledby="inactive-tab">
                            @include('admin.athletes._table', ['athleteCollection' => $inactiveAthletes, 'emptyMessage' => 'Tidak ada data atlet nonaktif/pensiun.'])
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 8px;">
            <div class="modal-header bg-success text-white" style="border-radius: 8px 8px 0 0;">
                <h5 class="modal-title" id="importModalLabel"><i class="fas fa-file-excel me-2"></i> Import Data Atlet</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <form action="{{ route('admin.athletes.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info border-info" role="alert" style="border-radius: 4px;">
                        <div class="d-flex">
                            <div class="me-3">
                                <i class="fas fa-info-circle fa-2x"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold">Petunjuk Import:</h6>
                                <p class="small mb-2">Pastikan data Excel Anda sesuai dengan format yang telah disediakan agar sistem dapat membaca data dengan benar.</p>
                                
                                <a href="{{ route('admin.athletes.download.format') }}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-download me-1"></i> Download Format Excel (.xlsx)
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="file_excel" class="form-label fw-bold">Pilih File Excel</label>
                        <input type="file" name="file" class="form-control" id="file_excel" accept=".xlsx, .xls" required>
                        <div class="form-text">Format file yang didukung: .xlsx, .xls</div>
                    </div>
                </div>
                <div class="modal-footer bg-light" style="border-radius: 0 0 8px 8px;">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success btn-sm">Mulai Import</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .hover-underline:hover { text-decoration: underline !important; }
</style>
@endsection