@extends('layouts.admin')
@section('title', 'Resultados')
@section('header', 'Resultados')

@section('content')

{{-- Disputas pendientes --}}
@if($enDisputa->count() > 0)
<div class="mb-6">
    <h2 class="font-semibold text-red-700 mb-3">⚠️ En disputa ({{ $enDisputa->count() }})</h2>
    @foreach($enDisputa as $r)
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-3" x-data="{open: false}">
        <div class="flex justify-between items-center">
            <div class="text-sm font-medium">
                {{ $r->encuentro->retadora->apodo }} vs {{ $r->encuentro->retada->apodo }}
                <span class="text-gray-500 ml-2">— {{ $r->created_at->format('d/m/Y') }}</span>
            </div>
            <button @click="open = !open" class="text-xs bg-red-600 text-white px-3 py-1 rounded hover:bg-red-700">
                Resolver
            </button>
        </div>
        <div x-show="open" class="mt-3">
            <p class="text-xs text-gray-600 mb-2">
                Versión retadora: {{ json_encode($r->version_retadora) }}<br>
                Versión retada: {{ json_encode($r->version_retada) }}
            </p>
            <form method="POST" action="{{ route('admin.resultados.disputa', $r) }}" class="flex gap-3 items-end">
                @csrf
                <div>
                    <label class="block text-xs font-medium mb-1">Ganadora oficial</label>
                    <select name="pareja_ganadora_id" class="border rounded px-3 py-1.5 text-sm">
                        <option value="{{ $r->encuentro->pareja_retadora_id }}">{{ $r->encuentro->retadora->apodo }}</option>
                        <option value="{{ $r->encuentro->pareja_retada_id }}">{{ $r->encuentro->retada->apodo }}</option>
                    </select>
                </div>
                <button type="submit" class="bg-red-700 text-white px-4 py-1.5 rounded text-sm hover:bg-red-800">
                    Confirmar decisión
                </button>
            </form>
        </div>
    </div>
    @endforeach
</div>
@endif

{{-- Encuentros sin resultado --}}
@if($sinResultado->count() > 0)
<div class="mb-6">
    <h2 class="font-semibold text-orange-700 mb-3">⏰ Sin resultado +24h ({{ $sinResultado->count() }})</h2>
    @foreach($sinResultado as $e)
    <div class="bg-orange-50 border border-orange-200 rounded-xl p-4 mb-3" x-data="{open: false}">
        <div class="flex justify-between items-center">
            <div class="text-sm">
                <span class="font-medium">{{ $e->retadora->apodo }}</span> vs
                <span class="font-medium">{{ $e->retada->apodo }}</span>
                <span class="text-gray-500 ml-2">{{ $e->fecha_hora->format('d/m H:i') }}</span>
            </div>
            <div class="flex gap-2">
                <button @click="open = !open"
                    class="text-xs bg-orange-600 text-white px-3 py-1 rounded hover:bg-orange-700">
                    Registrar resultado
                </button>
                <form method="POST" action="{{ route('admin.encuentros.incomparecencia', $e) }}"
                      x-data="{parId: '{{ $e->pareja_retadora_id }}'}" class="flex gap-1">
                    @csrf
                    <select name="pareja_presente_id" class="border rounded px-2 py-1 text-xs">
                        <option value="{{ $e->pareja_retadora_id }}">{{ $e->retadora->apodo }}</option>
                        <option value="{{ $e->pareja_retada_id }}">{{ $e->retada->apodo }}</option>
                    </select>
                    <button onclick="return confirm('¿Aprobar incomparecencia?')"
                        class="text-xs bg-gray-700 text-white px-2 py-1 rounded hover:bg-gray-800">
                        Incomparecencia
                    </button>
                </form>
            </div>
        </div>
        <div x-show="open" class="mt-3">
            <form method="POST" action="{{ route('admin.resultados.registrar') }}" class="grid grid-cols-6 gap-2 items-end">
                @csrf
                <input type="hidden" name="encuentro_id" value="{{ $e->id }}">
                <div class="col-span-6">
                    <label class="block text-xs font-medium mb-1">Ganadora</label>
                    <select name="pareja_ganadora_id" class="border rounded px-3 py-1.5 text-sm w-full">
                        <option value="{{ $e->pareja_retadora_id }}">{{ $e->retadora->apodo }}</option>
                        <option value="{{ $e->pareja_retada_id }}">{{ $e->retada->apodo }}</option>
                    </select>
                </div>
                @foreach(['Set 1' => 1, 'Set 2' => 2, 'Set 3' => 3] as $label => $n)
                <div class="col-span-2">
                    <label class="block text-xs text-gray-500 mb-1">{{ $label }}</label>
                    <div class="flex gap-1">
                        <input type="number" name="set{{ $n }}_retadora" min="0" max="7" placeholder="{{ $e->retadora->apodo[0] }}"
                            @if($n === 3) class="w-full border rounded px-2 py-1 text-xs" @else required class="w-full border rounded px-2 py-1 text-xs" @endif>
                        <input type="number" name="set{{ $n }}_retada" min="0" max="7" placeholder="{{ $e->retada->apodo[0] }}"
                            @if($n === 3) class="w-full border rounded px-2 py-1 text-xs" @else required class="w-full border rounded px-2 py-1 text-xs" @endif>
                    </div>
                </div>
                @endforeach
                <div class="col-span-6">
                    <button type="submit" class="bg-gray-900 text-white text-xs px-4 py-2 rounded hover:bg-gray-700">
                        Registrar resultado
                    </button>
                </div>
            </form>
        </div>
    </div>
    @endforeach
</div>
@endif

{{-- Resultados recientes --}}
<h2 class="font-semibold text-gray-700 mb-3">Resultados recientes</h2>
<div class="bg-white rounded-xl shadow-sm border overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b text-xs uppercase text-gray-500">
            <tr>
                <th class="px-4 py-3 text-left">Fecha</th>
                <th class="px-4 py-3 text-left">Retadora</th>
                <th class="px-4 py-3 text-left">Retada</th>
                <th class="px-4 py-3 text-center">Marcador</th>
                <th class="px-4 py-3 text-center">Ganadora</th>
                <th class="px-4 py-3 text-center">Tipo</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($recientes as $r)
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-2 text-gray-500">{{ $r->created_at->format('d/m/Y') }}</td>
                <td class="px-4 py-2">{{ $r->encuentro->retadora->apodo }}</td>
                <td class="px-4 py-2">{{ $r->encuentro->retada->apodo }}</td>
                <td class="px-4 py-2 text-center font-mono text-xs">
                    {{ $r->set1_retadora }}-{{ $r->set1_retada }}
                    / {{ $r->set2_retadora }}-{{ $r->set2_retada }}
                    @if($r->set3_retadora !== null)
                        / {{ $r->set3_retadora }}-{{ $r->set3_retada }}
                    @endif
                </td>
                <td class="px-4 py-2 text-center font-semibold text-green-700">{{ $r->ganadora->apodo }}</td>
                <td class="px-4 py-2 text-center">
                    <span class="text-xs px-2 py-0.5 rounded-full {{ $r->tipo === 'normal' ? 'bg-gray-100 text-gray-600' : 'bg-orange-100 text-orange-700' }}">
                        {{ $r->tipo }}
                    </span>
                </td>
            </tr>
            @empty
            <tr><td colspan="6" class="px-4 py-6 text-center text-gray-400">Sin resultados registrados.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection