@extends('admin.layout')

@section('title', ($evento ? 'Editar' : 'Nuevo') . ' Evento - Admin OnAPB')

@section('content')
<div class="page-header">
    <h2><i class="bi bi-calendar-event-fill"></i> {{ $evento ? 'Editar Evento' : 'Nuevo Evento' }}</h2>
    <a href="{{ route('admin.eventos.index') }}" class="btn-admin-outline">
        <i class="bi bi-arrow-left"></i> Volver
    </a>
</div>

<div class="admin-card">
    <div class="card-body">
        <form method="POST" action="{{ $evento ? route('admin.eventos.update', $evento->id_evento) : route('admin.eventos.store') }}" class="admin-form">
            @csrf
            @if($evento) @method('PUT') @endif

            <div class="row">
                <div class="col-md-8">
                    <div class="mb-3">
                        <label class="form-label">Nombre del Evento (Opcional)</label>
                        <input type="text" name="nombre_evento" class="form-control" value="{{ old('nombre_evento', $evento->nombre_evento ?? '') }}" placeholder="Ej: Paracao vs Talleres (Primera A)" {{ session('admin_role') == 2 ? 'readonly' : '' }}>
                        <small class="text-muted">Si se deja en blanco, se generará automáticamente usando los nombres de los clubes.</small>
                        @error('nombre_evento')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label text-primary fw-bold">Torneo</label>
                        <select name="id_torneo" id="id_torneo" class="form-select border-primary" {{ (session('admin_role') == 2 || $evento) ? 'disabled' : '' }}>
                            <option value="">— Ninguno / Amistoso —</option>
                            @foreach($torneos as $t)
                                <option value="{{ $t->id }}" {{ old('id_torneo', $evento->id_torneo ?? '') == $t->id ? 'selected' : '' }}>
                                    {{ $t->nombre }}
                                </option>
                            @endforeach
                        </select>
                        @if($evento)
                            <input type="hidden" name="id_torneo" value="{{ $evento->id_torneo }}">
                        @endif
                        @error('id_torneo')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label text-primary fw-bold">Grupo / Zona</label>
                        <select id="select_grupo" class="form-select border-primary" {{ (session('admin_role') == 2 || $evento) ? 'disabled' : '' }}>
                            <option value="">Seleccione Torneo primero...</option>
                        </select>
                        <small class="text-muted">Solo obligatorio para torneos.</small>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Fecha *</label>
                        <input type="date" name="fecha_evento" class="form-control" value="{{ old('fecha_evento', $evento && $evento->fecha_evento ? \Carbon\Carbon::parse($evento->fecha_evento)->format('Y-m-d') : '') }}" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Hora Inicio *</label>
                        <input type="time" name="hora_inicio" class="form-control" value="{{ old('hora_inicio', $evento ? substr($evento->hora_inicio, 0, 5) : '') }}" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Hora Fin *</label>
                        <input type="time" name="hora_fin" class="form-control" value="{{ old('hora_fin', $evento ? substr($evento->hora_fin, 0, 5) : '') }}" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Sede *</label>
                        <input type="text" name="sede" class="form-control" value="{{ old('sede', $evento->sede ?? '') }}" {{ session('admin_role') == 2 ? 'readonly' : '' }} required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Equipo Local *</label>
                        <select name="id_equipo_local" id="id_equipo_local" class="form-select equipo-select" {{ $evento ? 'disabled' : '' }} required>
                            <option value="">Seleccionar...</option>
                            @foreach($equipos as $eq)
                                <option value="{{ $eq->id_equipo }}" 
                                    data-torneos="{{ $eq->torneos->pluck('id')->join(',') }}"
                                    {{ old('id_equipo_local', $evento->id_equipo_local ?? '') == $eq->id_equipo ? 'selected' : '' }}>
                                    {{ $eq->club->nombre ?? '?' }} - {{ $eq->categoria }} {{ $eq->division }}
                                </option>
                            @endforeach
                        </select>
                        @if($evento)
                            <input type="hidden" name="id_equipo_local" value="{{ $evento->id_equipo_local }}">
                        @endif
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Equipo Visitante *</label>
                        <select name="id_equipo_visitante" id="id_equipo_visitante" class="form-select equipo-select" {{ $evento ? 'disabled' : '' }} required>
                            <option value="">Seleccionar...</option>
                            @foreach($equipos as $eq)
                                <option value="{{ $eq->id_equipo }}" 
                                    data-torneos="{{ $eq->torneos->pluck('id')->join(',') }}"
                                    {{ old('id_equipo_visitante', $evento->id_equipo_visitante ?? '') == $eq->id_equipo ? 'selected' : '' }}>
                                    {{ $eq->club->nombre ?? '?' }} - {{ $eq->categoria }} {{ $eq->division }}
                                </option>
                            @endforeach
                        </select>
                        @if($evento)
                            <input type="hidden" name="id_equipo_visitante" value="{{ $evento->id_equipo_visitante }}">
                        @endif
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="mb-3">
                        <label class="form-label">Precio ($)</label>
                        <input type="number" step="0.01" name="precio" class="form-control" value="{{ old('precio', $evento->precio ?? 0) }}" {{ session('admin_role') == 2 ? 'readonly' : '' }}>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label class="form-label">Límite QRs por Jugador *</label>
                        <input type="number" name="limite_qr_jugador" class="form-control" value="{{ old('limite_qr_jugador', $evento->limite_qr_jugador ?? 3) }}" required min="0">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 bg-light rounded border border-primary border-opacity-25">
                        <label class="form-label d-block fw-bold text-primary mb-3"><i class="bi bi-scoreboard"></i> RESULTADO FINAL (Opcional)</label>
                        <div class="d-flex align-items-center gap-3">
                            <div class="flex-grow-1">
                                <small class="text-muted d-block mb-1 text-center">LOCAL</small>
                                <input type="number" name="marcador_local" class="form-control text-center fs-4 fw-bold" value="{{ old('marcador_local', $evento->marcador_local ?? 0) }}" min="0">
                            </div>
                            <div class="pt-3 fs-3 fw-bold">:</div>
                            <div class="flex-grow-1">
                                <small class="text-muted d-block mb-1 text-center">VISITANTE</small>
                                <input type="number" name="marcador_visitante" class="form-control text-center fs-4 fw-bold" value="{{ old('marcador_visitante', $evento->marcador_visitante ?? 0) }}" min="0">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4">
                <button type="submit" class="btn-admin-primary px-5 py-3">
                    <i class="bi bi-check-lg me-2"></i> {{ $noticia ?? '' ? 'Actualizar' : ($evento ? 'ACTUALIZAR EVENTO' : 'CREAR EVENTO') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const torneoSelect = document.getElementById('id_torneo');
    const grupoSelect = document.getElementById('select_grupo');
    const equipoLocalSelect = document.getElementById('id_equipo_local');
    const equipoVisitanteSelect = document.getElementById('id_equipo_visitante');
    
    // Inyectamos el mapeo desde PHP
    const mapping = @json($torneoEquipos);
    // Equipos actuales (para cuando no hay torneo)
    const initialEquiposHtml = equipoLocalSelect.innerHTML;

    function updateGroups() {
        const torneoId = torneoSelect.value;
        grupoSelect.innerHTML = '';
        
        if (!torneoId) {
            grupoSelect.innerHTML = '<option value="">N/A (Amistoso)</option>';
            grupoSelect.disabled = true;
            unlockTeams(true); // Desbloquear para amistosos
            return;
        }

        // Obtener grupos únicos para este torneo
        const grupos = [...new Set(mapping.filter(m => m.id_torneo == torneoId).map(m => m.grupo || 'General'))];
        
        grupoSelect.innerHTML = '<option value="">Seleccione Grupo...</option>';
        grupos.forEach(g => {
            const opt = document.createElement('option');
            opt.value = g;
            opt.textContent = g;
            grupoSelect.appendChild(opt);
        });
        
        grupoSelect.disabled = false;
        unlockTeams(false); // Bloquear equipos hasta elegir grupo
    }

    function unlockTeams(unlock) {
        equipoLocalSelect.disabled = !unlock;
        equipoVisitanteSelect.disabled = !unlock;
        if (!unlock) {
            equipoLocalSelect.value = "";
            equipoVisitanteSelect.value = "";
        }
    }

    function filterEquiposByGroup() {
        const torneoId = torneoSelect.value;
        const grupo = grupoSelect.value;

        if (!torneoId) {
            // Caso amistoso: restaurar todos
            equipoLocalSelect.innerHTML = initialEquiposHtml;
            equipoVisitanteSelect.innerHTML = initialEquiposHtml;
            unlockTeams(true);
            return;
        }

        if (!grupo) {
            unlockTeams(false);
            return;
        }

        // Obtener equipos del torneo y grupo
        const equiposInGroup = mapping.filter(m => m.id_torneo == torneoId && (m.grupo == grupo || (!m.grupo && grupo == 'General')));
        const idsInGroup = equiposInGroup.map(m => m.id_equipo.toString());

        [equipoLocalSelect, equipoVisitanteSelect].forEach(select => {
            const currentVal = select.value;
            select.innerHTML = '<option value="">Seleccionar...</option>';
            
            // Re-poblar solo con los válidos
            const parser = new DOMParser();
            const doc = parser.parseFromString(`<div>${initialEquiposHtml}</div>`, 'text/html');
            const originalOptions = doc.querySelectorAll('option');
            
            originalOptions.forEach(opt => {
                if (opt.value && idsInGroup.includes(opt.value)) {
                    const newOpt = document.createElement('option');
                    newOpt.value = opt.value;
                    newOpt.textContent = opt.textContent;
                    select.appendChild(newOpt);
                }
            });
            
            select.disabled = false;
        });
    }

    torneoSelect.addEventListener('change', updateGroups);
    grupoSelect.addEventListener('change', filterEquiposByGroup);

    // Manejar estado inicial (Edición)
    if (torneoSelect.value) {
        updateGroups();
        
        // Intentar inferir el grupo del equipo local
        const firstTeamId = document.getElementsByName('id_equipo_local')[0].value;
        if (firstTeamId) {
            const rel = mapping.find(m => m.id_torneo == torneoSelect.value && m.id_equipo == firstTeamId);
            if (rel) {
                grupoSelect.value = rel.grupo || 'General';
                filterEquiposByGroup();
                
                // Asegurar que los selectores (aunque deshabilitados) muestren los equipos correctos
                @if($evento)
                    equipoLocalSelect.value = "{{ $evento->id_equipo_local }}";
                    equipoVisitanteSelect.value = "{{ $evento->id_equipo_visitante }}";
                @endif
            }
        }
    } else {
        // Si no hay torneo y no es edición restringida, dejar libre
        @if(!$evento)
            unlockTeams(true);
        @endif
    }
});
</script>
@endsection