@extends('layouts.app')
@section('title', 'Matches')
@section('show-header', true)
@section('page-title', 'Tournaments')

@section('content')
{{-- Filters --}}
<div class="px-4 pt-3 pb-2 space-y-3">
    <form method="GET" action="{{ route('matches.index') }}" class="space-y-3">
        <div class="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
            @foreach($games as $game)
            <label class="flex-shrink-0">
                <input type="radio" name="game_id" value="{{ $game->id }}" class="sr-only" {{ request('game_id') == $game->id ? 'checked' : '' }} onchange="this.form.submit()">
                <span class="cursor-pointer px-3 py-1.5 rounded-full text-sm font-semibold border transition {{ request('game_id') == $game->id ? 'bg-indigo-500 border-indigo-500 text-white' : 'bg-white/5 border-white/10 text-gray-300' }}">
                    {{ $game->name }}
                </span>
            </label>
            @endforeach
        </div>

        <div class="flex gap-2">
            <select name="status" onchange="this.form.submit()" class="flex-1 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-indigo-500">
                <option value="">All Status</option>
                <option value="upcoming" {{ request('status') === 'upcoming' ? 'selected' : '' }}>Upcoming</option>
                <option value="ongoing" {{ request('status') === 'ongoing' ? 'selected' : '' }}>Live</option>
                <option value="result" {{ request('status') === 'result' ? 'selected' : '' }}>Result</option>
            </select>
            <select name="sort" onchange="this.form.submit()" class="flex-1 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-indigo-500">
                <option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>Newest</option>
                <option value="prize" {{ request('sort') === 'prize' ? 'selected' : '' }}>Top Prize</option>
                <option value="fee" {{ request('sort') === 'fee' ? 'selected' : '' }}>Low Fee</option>
            </select>
        </div>
    </form>
</div>

{{-- My Matches Link --}}
<div class="px-4 mb-3">
    <a href="{{ route('matches.my') }}" class="flex items-center justify-between bg-indigo-500/10 border border-indigo-500/30 rounded-xl px-4 py-3 hover:bg-indigo-500/20 transition">
        <div class="flex items-center gap-2">
            <svg class="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
            <span class="text-indigo-300 text-sm font-semibold">My Matches</span>
        </div>
        <svg class="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
    </a>
</div>

{{-- Tournament Cards --}}
<div class="px-4 space-y-3 pb-4">
    @forelse($tournaments as $tournament)
    @include('user.components.tournament-card', compact('tournament'))
    @empty
    <div class="text-center py-16 text-gray-500">
        <svg class="w-14 h-14 mx-auto mb-3 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <p class="font-semibold">No tournaments found</p>
        <p class="text-sm mt-1">Try a different filter</p>
    </div>
    @endforelse
</div>

{{ $tournaments->withQueryString()->links('user.components.pagination') }}

@endsection

@push('scripts')
<script>
    document.querySelectorAll('.countdown').forEach(el => {
        const target = parseInt(el.dataset.time) * 1000;
        function update() {
            const diff = target - Date.now();
            if (diff <= 0) { el.textContent = 'Starting soon'; return; }
            const h = Math.floor(diff / 3600000);
            const m = Math.floor((diff % 3600000) / 60000);
            const s = Math.floor((diff % 60000) / 1000);
            el.textContent = h > 24 ? `${Math.floor(h/24)}d ${h%24}h` : `${h}h ${m}m ${s}s`;
        }
        update(); setInterval(update, 1000);
    });
</script>
@endpush