@extends('layouts.app')
@section('title', $race->name)

@section('content')
<div class="mx-auto max-w-4xl px-4 py-10">
    <span class="status-pill bg-forest/10 text-forest">{{ __('messages.status_'.$race->status) }}</span>
    <h1 class="mt-3 font-display text-3xl font-bold">{{ $race->name }}</h1>
    <p class="mt-1 text-ink/60">{{ $race->starts_at->translatedFormat('d F Y, H:i') }} · {{ $race->location?->name }}</p>

    @if ($race->cover_photo_path)
        <img src="{{ Illuminate\Support\Facades\Storage::disk('public')->url($race->cover_photo_path) }}" alt="{{ $race->name }}" class="mt-6 h-64 w-full rounded-lg object-cover">
    @endif

    @if ($siblingRaces->isNotEmpty())
        <div class="mt-6 rounded-lg border border-gold/40 bg-gold/5 p-4">
            <p class="mb-2 text-sm font-semibold text-gold-dark">იმავე დღეს, იმავე ლოკაციაზე — სხვა სარბენები:</p>
            <div class="flex flex-wrap gap-2">
                @foreach ($siblingRaces as $sibling)
                    <a href="{{ $sibling->publicUrl() }}" class="status-pill bg-white text-ink hover:border-gold border border-ink/10">
                        {{ $sibling->starts_at->format('H:i') }} — {{ $sibling->category ?: $sibling->name }} ({{ $sibling->distance_meters }}m)
                    </a>
                @endforeach
            </div>
        </div>
    @endif

    <div class="mt-6 grid gap-4 rounded-lg border border-ink/10 bg-white p-4 sm:grid-cols-3">
        <div><p class="text-xs uppercase text-ink/40">{{ __('messages.race_distance') }}</p><p class="font-mono font-semibold">{{ $race->distance_meters }} m</p></div>
        @if ($race->category)
            <div><p class="text-xs uppercase text-ink/40">კატეგორია</p><p class="font-semibold">{{ $race->category }}</p></div>
        @endif
        @if ($race->track_surface)
            <div><p class="text-xs uppercase text-ink/40">{{ __('messages.race_surface') }}</p><p class="font-semibold">{{ __('messages.surface_'.$race->track_surface) }}</p></div>
        @endif
        @if ($race->track_condition)
            <div><p class="text-xs uppercase text-ink/40">{{ __('messages.race_condition') }}</p><p class="font-semibold">{{ __('messages.condition_'.$race->track_condition) }}</p></div>
        @endif
        @if ($race->prize_fund)
            <div><p class="text-xs uppercase text-ink/40">{{ __('messages.race_prize_fund') }}</p><p class="font-mono font-semibold">{{ number_format($race->prize_fund, 0) }} ₾</p></div>
        @endif
        @if ($race->entry_fee)
            <div><p class="text-xs uppercase text-ink/40">{{ __('messages.race_entry_fee') }}</p><p class="font-mono font-semibold">{{ number_format($race->entry_fee, 0) }} ₾</p></div>
        @endif
    </div>

    @if ($race->description)
        <div class="prose prose-sm mt-6 max-w-none text-ink/80">{!! nl2br(e($race->description)) !!}</div>
    @endif

    @auth
        @if (in_array($race->status, ['published', 'registration_open']))
            @php $ownedHorses = auth()->user()->ownedHorses; @endphp
            @if ($ownedHorses->isNotEmpty())
                <form action="{{ route('dashboard.entry-requests.store', ['locale' => app()->getLocale(), 'race' => $race]) }}" method="POST"
                      class="mt-6 flex flex-wrap items-end gap-3 rounded-lg border border-gold/40 bg-gold/5 p-4">
                    @csrf
                    <div>
                        <label class="mb-1 block text-xs text-ink/60">{{ __('messages.horses_title') }}</label>
                        <select name="horse_id" required class="rounded-md border border-ink/15 px-3 py-2 text-sm">
                            @foreach ($ownedHorses as $horse)
                                <option value="{{ $horse->id }}">{{ $horse->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-1 block text-xs text-ink/60">{{ __('messages.jockeys_title') }}</label>
                        <select name="jockey_profile_id" required class="rounded-md border border-ink/15 px-3 py-2 text-sm">
                            @foreach (\App\Models\JockeyProfile::orderBy('id')->limit(50)->get() as $jockey)
                                <option value="{{ $jockey->id }}">{{ $jockey->user->fullName() }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn-primary">{{ __('messages.action_submit') }} — {{ __('messages.race_participants') }}</button>
                </form>
            @endif
        @endif
    @endauth

    <h2 class="mb-4 mt-10 font-display text-xl font-bold">{{ __('messages.race_participants') }} / {{ __('messages.race_results') }}</h2>

    {{-- Desktop table --}}
    <div class="hidden overflow-x-auto rounded-lg border border-ink/10 sm:block">
        <table class="w-full text-sm" data-responsive-table>
            <thead class="bg-forest text-cream">
                <tr>
                    <th class="p-3 text-left">#</th>
                    <th class="p-3 text-left">{{ __('messages.horses_title') }}</th>
                    <th class="p-3 text-left">{{ __('messages.jockeys_title') }}</th>
                    <th class="p-3 text-left">{{ __('messages.race_results') }}</th>
                    <th class="p-3 text-left"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-ink/10 bg-white">
                @foreach ($participants as $p)
                    <tr>
                        <td class="p-3 font-mono">{{ $p->number }}</td>
                        <td class="p-3"><a href="{{ $p->horse->publicUrl() }}" class="hover:text-forest">{{ $p->horse->name }}</a></td>
                        <td class="p-3"><a href="{{ $p->jockey->publicUrl() }}" class="hover:text-forest">{{ $p->jockey->user->fullName() }}</a></td>
                        <td class="p-3">
                            @if ($p->result?->is_official)
                                <span class="rank-badge rank-badge--{{ min($p->result->position ?? 9, 3) }}">{{ $p->result->badge() }}</span>
                                <span class="ml-2 font-mono text-xs text-ink/50">{{ $p->result->formattedTime() }}</span>
                            @else
                                <span class="text-ink/40">—</span>
                            @endif
                        </td>
                        <td class="p-3">
                            @auth
                                @if ($p->result?->is_official)
                                    <form action="{{ route('dashboard.disputes.store', ['locale' => app()->getLocale(), 'result' => $p->result]) }}" method="POST" class="inline">
                                        @csrf
                                        <input type="hidden" name="reason" data-prompt-target value="">
                                        <button type="button" data-prompt-submit="მიზეზი:" class="text-xs text-red-600 hover:underline">გასაჩივრება</button>
                                    </form>
                                @endif
                            @endauth
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Mobile cards (spec §54) --}}
    <div class="space-y-3 sm:hidden">
        @foreach ($participants as $p)
            <div class="card p-3">
                <div class="flex items-center justify-between">
                    <span class="font-mono text-sm text-ink/50">#{{ $p->number }}</span>
                    @if ($p->result?->is_official)
                        <span class="rank-badge rank-badge--{{ min($p->result->position ?? 9, 3) }}">{{ $p->result->badge() }}</span>
                    @endif
                </div>
                <p class="mt-1 font-semibold">{{ $p->horse->name }}</p>
                <p class="text-sm text-ink/60">{{ $p->jockey->user->fullName() }}</p>
            </div>
        @endforeach
    </div>
</div>
@endsection