@extends('admin.layout')

@section('title', 'Preview Fixture — ' . $torneo->nombre)

@section('content')
<div class="page-header">
    <h2><i class="bi bi-calendar3-range-fill"></i> Preview del Fixture</h2>
    <a href="{{ route('admin.torneos.edit', $torneo->id) }}" class="btn-admin-outline">
        <i class="bi bi-arrow-left"></i> Volver al torneo
    </a>
</div>

<div class="admin-card mb-4">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <div>
            <h5 class="mb-0 fw-bold">{{ $torneo->nombre }}</h5>
            <span class="text-muted small">{{ count($partidosEnriquecidos) }} partidos a generar</span>
        </div>
        <span class="badge bg-warning text-dark fs-6 px-3 py-2">
            <i class="bi bi-eye me-1"></i> Solo vista previa — aún no se guardó nada
        </span>
    </div>
    <div class="card-body">

        {{-- Agrupar por jornada --}}
        @php
            $jornadas = collect($partidosEnriquecidos)->groupBy('jornada');
        @endphp

        @foreach($jornadas as $numJornada => $partidos)
            <div class="mb-4">
                <h6 class="text-uppercase fw-bold text-muted border-bottom pb-2 mb-3">
                    <i class="bi bi-calendar-event me-1"></i> Jornada {{ $numJornada }}
                    <span class="text-primary ms-2">{{ \Carbon\Carbon::parse($partidos->first()['fecha_evento'])->format('d/m/Y') }}</span>
                </h6>
                <div class="table-responsive">
                    <table class="table table-sm table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Local</th>
                                <th class="text-center">vs</th>
                                <th>Visitante</th>
                                <th>Fecha</th>
                                <th>Hora</th>
                                <th>Sede</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($partidos as $p)
                            <tr>
                                <td class="fw-bold">{{ $p['nombre_local'] }}</td>
                                <td class="text-center text-muted">🆚</td>
                                <td class="fw-bold">{{ $p['nombre_visitante'] }}</td>
                                <td>{{ \Carbon\Carbon::parse($p['fecha_evento'])->format('d/m/Y') }}</td>
                                <td>{{ substr($p['hora_inicio'], 0, 5) }}</td>
                                <td class="text-muted">{{ $p['sede'] ?: '—' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endforeach

        {{-- Botón de confirmación --}}
        <div class="border-top pt-4 mt-2 d-flex gap-3 justify-content-end">
            <a href="{{ route('admin.torneos.edit', $torneo->id) }}" class="btn btn-outline-secondary">
                <i class="bi bi-x-lg me-1"></i> Cancelar
            </a>
            <form method="POST" action="{{ route('admin.torneos.fixture.confirmar', $torneo->id) }}" class="confirm-submit"
                  data-confirm-text="Se crearán {{ count($partidosEnriquecidos) }} partidos en la base de datos. Esta acción no se puede deshacer fácilmente."
                  data-confirm-button="Sí, generar fixture"
                  data-confirm-icon="warning">
                @csrf
                <input type="hidden" name="fecha_inicio"        value="{{ $fixtureParams['fecha_inicio'] }}">
                <input type="hidden" name="dias_entre_jornadas" value="{{ $fixtureParams['dias_entre_jornadas'] }}">
                <input type="hidden" name="sede_default"        value="{{ $fixtureParams['sede_default'] }}">
                <input type="hidden" name="doble_rueda"         value="{{ $fixtureParams['doble_rueda'] ? 1 : 0 }}">
                <button type="submit" class="btn-admin px-5 py-3">
                    <i class="bi bi-check2-circle me-2"></i> Confirmar y Generar Fixture
                </button>
            </form>
        </div>


    </div>
</div>
@endsection