{{-- resources/views/public/home.blade.php --}}
@extends('layouts.pasi_public')

@section('content')

@if(isset($featuredAthlete) && $featuredAthlete)
    <div class="mb-4 pt-4">
        <a href="{{ route('home', request()->except(['id'])) }}" class="text-gray-500 hover:text-blue-600 dark:text-slate-400 dark:hover:text-white flex items-center gap-2 transition-colors font-medium">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
            Kembali ke Hasil Pencarian
        </a>
    </div>
    
    <section id="profile-section" class="mb-12">
        @include('public.athlete_detail') 
    </section>

@elseif(isset($athletes) && $athletes->count() > 0)
    
    <div class="text-center py-6 mb-4">
        <h2 class="text-3xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 leading-tight">Pencarian Atlet</h2>
        <p class="text-gray-600 dark:text-slate-400 max-w-2xl mx-auto text-lg mt-2">Sesuaikan filter di bawah ini untuk mencari atlet lainnya.</p>
    </div>

    <div class="card-gradient rounded-2xl p-6 mb-10 shadow-sm border border-gray-100 dark:border-slate-800">
        <form action="{{ route('home') }}" method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-4">
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Kategori</label>
                <select name="category_id" id="category_filter" class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
                    <option value="">-- Pilih Kategori --</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Gender</label>
                <select name="gender" id="gender_filter" class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
                    <option value="">-- Pilih Gender --</option>
                    <option value="male" {{ request('gender') == 'male' ? 'selected' : '' }}>Putra</option>
                    <option value="female" {{ request('gender') == 'female' ? 'selected' : '' }}>Putri</option>
                    <option value="mixed" {{ request('gender') == 'mixed' ? 'selected' : '' }}>Campuran</option>
                </select>
            </div>
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Nomor Spesialisasi</label>
                <select name="discipline_id" id="discipline_filter" class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
                    <option value="">-- Pilih Nomor --</option>
                </select>
            </div>
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Nama Atlet</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama..." class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
            </div>
            <div class="flex items-end gap-2">
                <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-bold py-3 rounded-xl shadow-lg shadow-blue-500/30 transition-all transform hover:scale-[1.02]">
                    Cari
                </button>
                <a href="{{ route('home') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 dark:bg-slate-700 dark:text-white font-bold py-3 px-4 rounded-xl border border-gray-300 dark:border-slate-600 transition-colors" title="Reset">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                </a>
            </div>
        </form>
    </div>

    <section id="results-section" class="mb-12">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
            <span>🔍</span> Ditemukan {{ $athletes->count() }} Atlet
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($athletes as $athlete)
                @include('public.athlete_card_mini', ['athlete' => $athlete])
            @endforeach
        </div>
    </section>

@elseif(request()->hasAny(['search', 'discipline_id', 'category_id']))
    
    <div class="text-center py-6 mb-4">
        <h2 class="text-3xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 leading-tight">Pencarian Atlet</h2>
    </div>

    <div class="card-gradient rounded-2xl p-6 mb-10 shadow-sm border border-gray-100 dark:border-slate-800">
        <form action="{{ route('home') }}" method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-4">
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Kategori</label>
                <select name="category_id" id="category_filter" class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
                    <option value="">-- Pilih Kategori --</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Gender</label>
                <select name="gender" id="gender_filter" class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
                    <option value="">-- Pilih Gender --</option>
                    <option value="male" {{ request('gender') == 'male' ? 'selected' : '' }}>Putra</option>
                    <option value="female" {{ request('gender') == 'female' ? 'selected' : '' }}>Putri</option>
                    <option value="mixed" {{ request('gender') == 'mixed' ? 'selected' : '' }}>Campuran</option>
                </select>
            </div>
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Nomor Spesialisasi</label>
                <select name="discipline_id" id="discipline_filter" class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
                    <option value="">-- Pilih Nomor --</option>
                </select>
            </div>
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Nama Atlet</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama..." class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
            </div>
            <div class="flex items-end gap-2">
                <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-bold py-3 rounded-xl shadow-lg shadow-blue-500/30 transition-all transform hover:scale-[1.02]">
                    Cari
                </button>
                <a href="{{ route('home') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 dark:bg-slate-700 dark:text-white font-bold py-3 px-4 rounded-xl border border-gray-300 dark:border-slate-600 transition-colors" title="Reset">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                </a>
            </div>
        </form>
    </div>

    <div class="text-center py-20 card-gradient rounded-2xl">
        <div class="inline-flex w-16 h-16 rounded-full bg-gray-100 dark:bg-slate-800 items-center justify-center mb-4 border border-gray-200 dark:border-slate-700">
            <svg class="w-8 h-8 text-gray-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Atlet tidak ditemukan.</h3>
        <p class="text-gray-500 dark:text-slate-400 mt-1">Coba ubah filter pencarian Anda di atas atau klik tombol reset.</p>
    </div>

@else
    {{-- TAMPILAN AWAL (HOMEPAGE DEFAULT) --}}
    
    <div class="text-center py-10 mb-8 mt-4">
        <h2 class="text-3xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 leading-tight pb-2">Selamat Datang di PASI Analytics</h2>
        <p class="text-gray-600 dark:text-slate-400 max-w-2xl mx-auto text-lg mt-3">Silakan gunakan form filter di bawah ini untuk mulai mencari data dan statistik atlet nasional.</p>
    </div>

    <div class="card-gradient rounded-2xl p-6 mb-12 shadow-sm border border-gray-100 dark:border-slate-800">
        <form action="{{ route('home') }}" method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-4">
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Kategori</label>
                <select name="category_id" id="category_filter" class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
                    <option value="">-- Pilih Kategori --</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Gender</label>
                <select name="gender" id="gender_filter" class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
                    <option value="">-- Pilih Gender --</option>
                    <option value="male" {{ request('gender') == 'male' ? 'selected' : '' }}>Putra</option>
                    <option value="female" {{ request('gender') == 'female' ? 'selected' : '' }}>Putri</option>
                    <option value="mixed" {{ request('gender') == 'mixed' ? 'selected' : '' }}>Campuran</option>
                </select>
            </div>
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Nomor Spesialisasi</label>
                <select name="discipline_id" id="discipline_filter" class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
                    <option value="">-- Pilih Nomor --</option>
                </select>
            </div>
            <div>
                <label class="block text-gray-500 dark:text-slate-400 text-xs uppercase mb-2 font-semibold tracking-wider">Nama Atlet</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama..." class="w-full input-dynamic rounded-xl px-4 py-3 outline-none transition-all">
            </div>
            <div class="flex items-end gap-2">
                <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-bold py-3 rounded-xl shadow-lg shadow-blue-500/30 transition-all transform hover:scale-[1.02]">
                    Tampilkan Data
                </button>
            </div>
        </form>
    </div>

    @if(isset($activeAthletes) && $activeAthletes->count() > 0)
    <section id="active-athletes-section" class="mb-12 pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-6 flex items-center gap-2">
            <span class="relative flex h-3 w-3">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
              <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
            </span> 
            ✨ Mengenal Lebih Dekat Atlet Indonesia (Aktif)
        </h3>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
            @foreach($activeAthletes as $athlete)
                @include('public.athlete_card_mini', ['athlete' => $athlete])
            @endforeach
        </div>
    </section>
    @endif

    @if(isset($inactiveAthletes) && $inactiveAthletes->count() > 0)
    <section id="inactive-athletes-section" class="mb-12 border-t border-gray-100 dark:border-slate-800 pt-10">
        <h3 class="text-lg font-semibold text-gray-500 dark:text-slate-400 mb-6 flex items-center gap-2">
            <i class="fas fa-history"></i> ✨ Mengenal Lebih Dekat Atlet Indonesia (Pensiun/Nonaktif)
        </h3>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
            @foreach($inactiveAthletes as $athlete)
                @include('public.athlete_card_mini', ['athlete' => $athlete])
            @endforeach
        </div>
    </section>
    @endif
@endif

<script>
document.addEventListener('DOMContentLoaded', function() {
    const categorySelect = document.getElementById('category_filter');
    const genderSelect = document.getElementById('gender_filter');
    const disciplineSelect = document.getElementById('discipline_filter');

    if(!categorySelect || !genderSelect || !disciplineSelect) return;

    const oldCategory = "{{ request('category_id') }}";
    const oldGender = "{{ request('gender') }}";
    const oldDiscipline = "{{ request('discipline_id') }}";

    function updateDisciplines(selectedValue = null) {
        const categoryId = categorySelect.value;
        const gender = genderSelect.value;

        disciplineSelect.innerHTML = '<option value="">-- Pilih Nomor --</option>';

        if (categoryId && gender) {
            disciplineSelect.innerHTML = '<option value="">-- Memuat... --</option>';

            fetch(`/get-disciplines?category_id=${categoryId}&gender=${gender}`)
                .then(response => {
                     if (!response.ok) throw new Error('Network response was not ok');
                     return response.json();
                })
                .then(data => {
                    disciplineSelect.innerHTML = '<option value="">-- Pilih Nomor --</option>';
                    if (data.length > 0) {
                        data.forEach(item => {
                            const option = document.createElement('option');
                            option.value = item.id;
                            option.text = item.name;
                            
                            if (selectedValue && item.id == selectedValue) {
                                option.selected = true;
                            }
                            
                            disciplineSelect.appendChild(option);
                        });
                    } else {
                        disciplineSelect.innerHTML = '<option value="">Nomor tidak tersedia</option>';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    disciplineSelect.innerHTML = '<option value="">Gagal memuat data</option>';
                });
        }
    }

    categorySelect.addEventListener('change', () => updateDisciplines());
    genderSelect.addEventListener('change', () => updateDisciplines());

    if (oldCategory && oldGender) {
        updateDisciplines(oldDiscipline);
    }
});
</script>
@endsection