@extends('layouts.app')
@section('title', __('messages.races_title'))

@section('content')
<div class="mx-auto max-w-6xl px-4 py-10">
    <h1 class="mb-6 font-display text-3xl font-bold">{{ __('messages.races_title') }}</h1>

    <form method="GET" class="mb-8 flex flex-wrap gap-3">
        <input type="text" name="city" value="{{ request('city') }}" placeholder="{{ __('messages.register_city') }}"
               class="rounded-md border border-ink/15 px-3 py-2 text-sm focus:border-forest focus:outline-none">
        <select name="category" class="rounded-md border border-ink/15 px-3 py-2 text-sm">
            <option value="">კატეგორია</option>
            @foreach (config('race_categories') as $cat)
                <option value="{{ $cat['ka'] }}" @selected(request('category') === $cat['ka'])>{{ $cat['ka'] }}</option>
            @endforeach
        </select>
        <select name="status" class="rounded-md border border-ink/15 px-3 py-2 text-sm">
            <option value="">{{ __('messages.race_results') }} — {{ __('messages.view_all') }}</option>
            @foreach (['published','registration_open','registration_closed','in_progress','completed'] as $s)
                <option value="{{ $s }}" @selected(request('status') === $s)>{{ __('messages.status_'.$s) }}</option>
            @endforeach
        </select>
        <button type="submit" class="btn-outline !border-ink/20 !text-ink hover:!border-forest hover:!text-forest">{{ __('messages.action_view') }}</button>
    </form>

    @forelse ($groupedRaces as $group)
        <div class="mb-10">
            @if ($group->count() > 1)
                <div class="mb-3 flex items-center gap-2 border-b border-gold/40 pb-2">
                    <span class="font-mono text-sm text-ink/50">{{ $group->first()->starts_at->translatedFormat('d F Y') }}</span>
                    <span class="font-display font-semibold">{{ $group->first()->location?->name }}</span>
                    <span class="status-pill bg-gold/20 text-gold-dark">{{ $group->count() }} სარბენი</span>
                </div>
            @endif
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($group as $race)
                    <a href="{{ $race->publicUrl() }}" class="card flex flex-col justify-between overflow-hidden hover:border-gold hover:shadow-md">
                        @if ($race->cover_photo_path)
                            <div class="aspect-[16/9] w-full bg-forest/10">
                                <img src="{{ Illuminate\Support\Facades\Storage::disk('public')->url($race->cover_photo_path) }}" alt="{{ $race->name }}" class="h-full w-full object-cover">
                            </div>
                        @endif
                        <div class="p-4">
                            <p class="font-mono text-xs text-ink/50">{{ $race->starts_at->translatedFormat('d M Y, H:i') }}</p>
                            <h2 class="mt-1 font-display font-semibold">{{ $race->name }}</h2>
                            <p class="mt-1 text-sm text-ink/60">
                                @if ($race->category)<span class="font-medium text-forest">{{ $race->category }}</span> · @endif
                                {{ $race->distance_meters }}m
                            </p>
                            <span class="status-pill mt-3 inline-block bg-forest/10 text-forest">{{ __('messages.status_'.$race->status) }}</span>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    @empty
        <p class="text-ink/50">{{ __('messages.no_upcoming_races') }}</p>
    @endforelse

    <div class="mt-8">{{ $races->links() }}</div>
</div>
@endsection