@extends('layouts.admin')

@section('title', 'Crear Nuevo Equipo')
@section('page-title', 'Crear Nuevo Equipo')

@section('content')
<form action="{{ route('admin.equipos.store') }}" method="POST" enctype="multipart/form-data" id="formEquipo">
    @csrf
    
    <!-- Información del Equipo -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-users me-2"></i>Información del Equipo
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="nombre" class="form-label">Nombre del Equipo <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nombre') is-invalid @enderror" 
                                       id="nombre" name="nombre" value="{{ old('nombre') }}" required>
                                @error('nombre')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="evento_id" class="form-label">Evento <span class="text-danger">*</span></label>
                                <select class="form-select @error('evento_id') is-invalid @enderror" 
                                        id="evento_id" name="evento_id" required>
                                    <option value="">Seleccionar evento</option>
                                    @foreach($eventos as $evento)
                                        <option value="{{ $evento->id }}" {{ old('evento_id') == $evento->id ? 'selected' : '' }}>
                                            {{ $evento->nombre }} - {{ $evento->tipo }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('evento_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="capitan_id" class="form-label">Capitán del Equipo</label>
                                <select class="form-select @error('capitan_id') is-invalid @enderror" 
                                        id="capitan_id" name="capitan_id">
                                    <option value="">Seleccionar capitán</option>
                                    @foreach($usuarios as $usuario)
                                        <option value="{{ $usuario->id }}" {{ old('capitan_id') == $usuario->id ? 'selected' : '' }}>
                                            {{ $usuario->name }} - {{ $usuario->email }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('capitan_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="estado" class="form-label">Estado</label>
                                <select class="form-select @error('estado') is-invalid @enderror" 
                                        id="estado" name="estado">
                                    <option value="activo" {{ old('estado', 'activo') == 'activo' ? 'selected' : '' }}>Activo</option>
                                    <option value="inactivo" {{ old('estado') == 'inactivo' ? 'selected' : '' }}>Inactivo</option>
                                </select>
                                @error('estado')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="descripcion" class="form-label">Descripción</label>
                                <textarea class="form-control @error('descripcion') is-invalid @enderror" 
                                          id="descripcion" name="descripcion" rows="3">{{ old('descripcion') }}</textarea>
                                @error('descripcion')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="colores_uniforme" class="form-label">Colores del Uniforme</label>
                                <input type="text" class="form-control @error('colores_uniforme') is-invalid @enderror" 
                                       id="colores_uniforme" name="colores_uniforme" 
                                       placeholder="Ej: Azul y Blanco" value="{{ old('colores_uniforme') }}">
                                @error('colores_uniforme')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="logo" class="form-label">Logo del Equipo</label>
                                <input type="file" class="form-control @error('logo') is-invalid @enderror" 
                                       id="logo" name="logo" accept="image/*">
                                @error('logo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Formatos permitidos: JPG, PNG, GIF. Máximo 2MB.</small>
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="notas" class="form-label">Notas Adicionales</label>
                                <textarea class="form-control @error('notas') is-invalid @enderror" 
                                          id="notas" name="notas" rows="2">{{ old('notas') }}</textarea>
                                @error('notas')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Director Técnico -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-user-tie me-2"></i>Director Técnico <span class="text-danger">*</span>
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="dt_nombre" class="form-label">Nombre <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('director_tecnico.nombre') is-invalid @enderror" 
                                       id="dt_nombre" name="director_tecnico[nombre]" value="{{ old('director_tecnico.nombre') }}" required>
                                @error('director_tecnico.nombre')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="dt_apellido" class="form-label">Apellido <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('director_tecnico.apellido') is-invalid @enderror" 
                                       id="dt_apellido" name="director_tecnico[apellido]" value="{{ old('director_tecnico.apellido') }}" required>
                                @error('director_tecnico.apellido')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="dt_documento" class="form-label">Documento <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('director_tecnico.documento') is-invalid @enderror" 
                                       id="dt_documento" name="director_tecnico[documento]" value="{{ old('director_tecnico.documento') }}" required>
                                @error('director_tecnico.documento')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="dt_fecha_nacimiento" class="form-label">Fecha de Nacimiento <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('director_tecnico.fecha_nacimiento') is-invalid @enderror" 
                                       id="dt_fecha_nacimiento" name="director_tecnico[fecha_nacimiento]" value="{{ old('director_tecnico.fecha_nacimiento') }}" required>
                                @error('director_tecnico.fecha_nacimiento')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="dt_telefono" class="form-label">Teléfono</label>
                                <input type="text" class="form-control @error('director_tecnico.telefono') is-invalid @enderror" 
                                       id="dt_telefono" name="director_tecnico[telefono]" value="{{ old('director_tecnico.telefono') }}">
                                @error('director_tecnico.telefono')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="dt_email" class="form-label">Email</label>
                                <input type="email" class="form-control @error('director_tecnico.email') is-invalid @enderror" 
                                       id="dt_email" name="director_tecnico[email]" value="{{ old('director_tecnico.email') }}">
                                @error('director_tecnico.email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Jugadores -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <i class="fas fa-running me-2"></i>Jugadores 
                        <span class="badge bg-info ms-2" id="contadorJugadores">0/6 mínimo</span>
                    </h6>
                    <button type="button" class="btn btn-sm btn-primary" id="agregarJugador">
                        <i class="fas fa-plus me-1"></i>Agregar Jugador
                    </button>
                </div>
                <div class="card-body">
                    <div id="jugadoresContainer">
                        <!-- Los jugadores se agregarán dinámicamente aquí -->
                    </div>
                    <div class="alert alert-info mt-3">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Requisitos:</strong> Mínimo 6 jugadores requeridos. Cada jugador debe tener un número de camiseta único.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Botones de acción -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="fas fa-save me-1"></i>Crear Equipo
                    </button>
                    <a href="{{ route('admin.equipos.index') }}" class="btn btn-secondary">
                        <i class="fas fa-times me-1"></i>Cancelar
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
let contadorJugadores = 0;
const numerosUsados = new Set();

// Template para jugador
function getJugadorTemplate(index) {
    return `
        <div class="jugador-item border rounded p-3 mb-3" data-index="${index}">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0">Jugador ${index + 1}</h6>
                <button type="button" class="btn btn-sm btn-outline-danger eliminar-jugador">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Nombre <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="jugadores[${index}][nombre]" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Apellido <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="jugadores[${index}][apellido]" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Documento <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="jugadores[${index}][documento]" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Fecha de Nacimiento <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" name="jugadores[${index}][fecha_nacimiento]" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Posición <span class="text-danger">*</span></label>
                        <select class="form-select" name="jugadores[${index}][posicion]" required>
                            <option value="">Seleccionar posición</option>
                            <option value="portero">Portero</option>
                            <option value="defensa">Defensa</option>
                            <option value="mediocampo">Mediocampo</option>
                            <option value="delantero">Delantero</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Número de Camiseta <span class="text-danger">*</span></label>
                        <input type="number" class="form-control numero-camiseta" name="jugadores[${index}][numero_camiseta]" 
                               min="1" max="99" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Teléfono</label>
                        <input type="text" class="form-control" name="jugadores[${index}][telefono]">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" name="jugadores[${index}][email]">
                    </div>
                </div>
            </div>
        </div>
    `;
}

// Agregar jugador
$('#agregarJugador').click(function() {
    const jugadorHtml = getJugadorTemplate(contadorJugadores);
    $('#jugadoresContainer').append(jugadorHtml);
    contadorJugadores++;
    actualizarContador();
});

// Eliminar jugador
$(document).on('click', '.eliminar-jugador', function() {
    const jugadorItem = $(this).closest('.jugador-item');
    const numeroInput = jugadorItem.find('.numero-camiseta');
    const numero = parseInt(numeroInput.val());
    
    if (numero) {
        numerosUsados.delete(numero);
    }
    
    jugadorItem.remove();
    actualizarContador();
});

// Validar números de camiseta únicos
$(document).on('change', '.numero-camiseta', function() {
    const numero = parseInt($(this).val());
    const input = $(this);
    
    // Remover número anterior si existía
    const numeroAnterior = parseInt(input.data('numero-anterior'));
    if (numeroAnterior) {
        numerosUsados.delete(numeroAnterior);
    }
    
    if (numero && numerosUsados.has(numero)) {
        alert('Este número de camiseta ya está en uso. Por favor, selecciona otro.');
        input.val('');
        input.focus();
        return;
    }
    
    if (numero) {
        numerosUsados.add(numero);
        input.data('numero-anterior', numero);
    }
});

// Actualizar contador
function actualizarContador() {
    const totalJugadores = $('.jugador-item').length;
    const badge = $('#contadorJugadores');
    
    badge.text(`${totalJugadores}/6 mínimo`);
    
    if (totalJugadores >= 6) {
        badge.removeClass('bg-warning bg-danger').addClass('bg-success');
    } else if (totalJugadores >= 4) {
        badge.removeClass('bg-success bg-danger').addClass('bg-warning');
    } else {
        badge.removeClass('bg-success bg-warning').addClass('bg-danger');
    }
}

// Validación del formulario - VERSIÓN SIMPLIFICADA PARA DEPURACIÓN
$('#formEquipo').submit(function(e) {
    console.log('=== FORMULARIO ENVIADO ===');
    console.log('Evento submit capturado');
    
    // Validación mínima solo para probar
    const nombreEquipo = $('#nombre').val().trim();
    const eventoId = $('#evento_id').val();
    
    console.log('Nombre del equipo:', nombreEquipo);
    console.log('Evento ID:', eventoId);
    
    if (!nombreEquipo || !eventoId) {
        console.log('Error: Campos básicos vacíos');
        e.preventDefault();
        alert('Por favor, complete el nombre del equipo y seleccione un evento.');
        return false;
    }
    
    console.log('Validación básica pasada - permitiendo envío');
    // Permitir el envío del formulario
    return true;
});

// Agregar algunos jugadores por defecto
$(document).ready(function() {
    // Agregar 6 jugadores por defecto para cumplir con el mínimo requerido
    for (let i = 0; i < 6; i++) {
        $('#agregarJugador').click();
    }
});
</script>
@endpush