{{-- resources/views/alumnos/create.blade.php --}}
@extends('layouts.app')

@section('title', 'Crear Alumno')


{{-- ***** INICIO: CSS de Select2 (EMBEBIDO DIRECTAMENTE) ***** --}}
{{-- Esto es lo que necesitas para que Select2 se vea bien y funcione --}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    /* Estilos para que Select2 se integre con tu tema oscuro */
    .select2-container--default .select2-selection--single {
        background-color: #495057 !important; /* bg-secondary */
        border-color: #495057 !important; /* border-secondary */
        color: #fff !important; /* text-white */
        height: calc(1.5em + 0.5rem + 2px); /* Altura para Bootstrap form-control-sm */
        padding: 0.25rem 0.5rem !important; /* Padding para Bootstrap form-control-sm */
    }
    .select2-container--default .select2-selection__rendered {
        color: #fff !important;
        line-height: calc(1.5em + 0.5rem) !important; /* Ajusta línea de texto */
        padding-left: 0 !important; /* Elimina padding excesivo si lo hay */
    }
    .select2-container--default .select2-selection__placeholder {
        color: #adb5bd !important; /* Color del placeholder */
    }
    .select2-container--default .select2-selection__arrow b {
        border-color: #fff transparent transparent transparent !important; /* Flecha blanca */
    }
    .select2-dropdown {
        background-color: #343a40 !important; /* Fondo del menú desplegable */
        border-color: #495057 !important;
    }
    .select2-results__option {
        color: #fff !important; /* Color del texto de las opciones */
    }
    .select2-results__option--highlighted.select2-results__option--selectable {
        background-color: #0d6efd !important; /* Resaltado al pasar el ratón */
        color: #fff !important;
    }
    .select2-search input {
        background-color: #6c757d !important; /* Fondo del campo de búsqueda interno */
        border-color: #6c757d !important;
        color: #fff !important; /* Color del texto del campo de búsqueda interno */
    }
    .select2-container--default .select2-selection--single .select2-selection__clear {
        color: #fff;
        margin-right: 12px; /* Espacio para el icono de borrar */
    }
</style>
{{-- ***** FIN: CSS de Select2 ***** --}}

@section('content')
    <div class="container">
        <h1 class="mb-4 text-white"><i class="bi bi-person-plus me-2"></i> Crear Nuevo Alumno</h1>

        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <div class="card bg-dark shadow-sm text-white">
                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        <form action="{{ route('alumnos.store') }}" method="POST" id="alumnoForm">
                            @csrf

                            {{-- Sección para el selector de alumno existente CON Select2 --}}
                            <div class="mb-3">
                                <label for="existing_alumno_select" class="form-label"><i class="bi bi-person-bounding-box me-2"></i> Buscar y Seleccionar Alumno</label>
                                {{-- Este <select> es transformado por Select2 en tu buscador/selector combinado --}}
                                <select class="form-select form-select-sm" id="existing_alumno_select" name="selected_alumno_id" style="width: 100%;">
                                    <option value="">-- Escribe para buscar o seleccionar un alumno --</option>
                                    @foreach ($alumnos as $alumno)
                                        <option value="{{ $alumno->id_datosa }}"
                                            {{ old('selected_alumno_id') == $alumno->id_datosa ? 'selected' : '' }}>
                                            {{ $alumno->ape_c }} {{ $alumno->nom_c }} (DNI: {{ $alumno->dni }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('selected_alumno_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Campo oculto para diferenciar la acción del formulario --}}
                            <input type="hidden" name="action_type" id="action_type_alumno" value="save">

                            {{-- Campos del formulario para crear un nuevo alumno --}}
                            <div id="alumno_fields">
                                <div class="mb-3">
                                    <label for="nom_c" class="form-label"><i class="bi bi-person-fill me-2"></i> Nombres</label>
                                    <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white @error('nom_c') is-invalid @enderror" id="nom_c" name="nom_c" value="{{ old('nom_c') }}" required>
                                    @error('nom_c')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="ape_c" class="form-label"><i class="bi bi-person-fill me-2"></i> Apellidos</label>
                                    <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white @error('ape_c') is-invalid @enderror" id="ape_c" name="ape_c" value="{{ old('ape_c') }}" required>
                                    @error('ape_c')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="dni" class="form-label"><i class="bi bi-credit-card-2-front-fill me-2"></i> DNI</label>
                                    <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white @error('dni') is-invalid @enderror" id="dni" name="dni" value="{{ old('dni') }}" required>
                                    @error('dni')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Botones de acción --}}
                            <div class="d-flex justify-content-end mt-4">
                                {{-- Botón para guardar un ALUMNO nuevo --}}
                                <button type="submit" id="save_button" class="btn btn-primary btn-sm shadow-sm me-2" onclick="document.getElementById('action_type_alumno').value='save';">
                                    <i class="bi bi-save me-2"></i> Guardar Alumno
                                </button>

                                {{-- Botón para guardar y continuar con un ALUMNO (nuevo o existente) --}}
                                <button type="submit" id="save_and_continue_button" class="btn btn-success btn-sm shadow-sm me-2" onclick="document.getElementById('action_type_alumno').value='save_and_continue';">
                                    <i class="bi bi-arrow-right-circle me-2"></i> Guardar y Continuar
                                </button>

                                {{-- Botón para continuar con un ALUMNO existente (solo si hay uno seleccionado) --}}
                                <button type="submit" id="continue_existing_button" class="btn btn-info btn-sm shadow-sm me-2" onclick="document.getElementById('action_type_alumno').value='save_and_continue';">
                                    <i class="bi bi-person-check me-2"></i> Continuar con este Alumno
                                </button>

                                <a href="{{ route('alumnos.index') }}" class="btn btn-secondary btn-sm shadow-sm"><i class="bi bi-x-circle me-2"></i> Cancelar</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- jQuery debe cargarse antes de Select2 --}}
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/es.js"></script> {{-- Soporte para español --}}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const existingAlumnoSelect = document.getElementById('existing_alumno_select');
        const alumnoForm = document.getElementById('alumnoForm');
        const alumnoFields = document.getElementById('alumno_fields');

        // Referencias a los botones
        const saveButton = document.getElementById('save_button');
        const saveAndContinueButton = document.getElementById('save_and_continue_button');
        const continueExistingButton = document.getElementById('continue_existing_button');

        // Campos de nuevo alumno para fácil acceso
        const nomCInput = document.getElementById('nom_c');
        const apeCInput = document.getElementById('ape_c');
        const dniInput = document.getElementById('dni');


        // *** Inicialización de Select2 ***
        $('#existing_alumno_select').select2({
            language: "es", // Idioma español
            placeholder: 'Escribe para buscar o seleccionar un alumno...',
            allowClear: true, // Permite borrar la selección
            minimumResultsForSearch: 1, // Muestra la caja de búsqueda incluso con 1 resultado
            dropdownParent: $('#existing_alumno_select').parent() // Para correcta visualización en modales/elementos complejos
        });

        // *** Solución para asegurar que se puede escribir inmediatamente ***
        $('#existing_alumno_select').on('select2:open', function() {
            setTimeout(function() {
                $('.select2-container--open .select2-search__field').focus();
            }, 100);
        });

        // *** Lógica para habilitar/deshabilitar campos de nuevo alumno y ajustar botones ***
        function adjustFormState() {
            const alumnoId = existingAlumnoSelect.value; // Obtiene el valor seleccionado de Select2
            
            if (alumnoId && alumnoId !== "") {
                // Si se seleccionó un alumno existente:
                // 1. Deshabilitar y limpiar campos de nuevo alumno
                Array.from(alumnoFields.querySelectorAll('input')).forEach(input => {
                    input.disabled = true;
                    input.value = ''; // Limpiamos su valor
                    input.removeAttribute('required'); // Quitamos la validación HTML5
                    input.classList.remove('is-invalid'); // Limpiamos errores visuales
                });
                
                // 2. Deshabilitar la validación HTML5 para todo el formulario
                alumnoForm.setAttribute('novalidate', 'novalidate');
                
                // 3. Ocultar botones de "Guardar Nuevo" y "Guardar y Continuar (Nuevo)"
                saveButton.style.display = 'none';
                saveAndContinueButton.style.display = 'none';
                
                // 4. Mostrar botón "Continuar con este Alumno"
                continueExistingButton.style.display = 'inline-block';

            } else {
                // Si no hay alumno seleccionado (o se borró la selección):
                // 1. Habilitar campos de nuevo alumno
                Array.from(alumnoFields.querySelectorAll('input')).forEach(input => {
                    input.disabled = false;
                    // Aseguramos que los campos requeridos tengan el atributo de vuelta
                    input.setAttribute('required', 'required'); 
                });
                
                // 2. Habilitar la validación HTML5 del formulario
                alumnoForm.removeAttribute('novalidate');
                
                // 3. Mostrar botones de "Guardar Nuevo" y "Guardar y Continuar"
                saveButton.style.display = 'inline-block';
                saveAndContinueButton.style.display = 'inline-block';
                
                // 4. Ocultar botón "Continuar con este Alumno"
                continueExistingButton.style.display = 'none';
            }
        }

        // *** Event Listeners ***
        // Cada vez que la selección de Select2 cambia, ajustamos el estado del formulario.
        $('#existing_alumno_select').on('change', adjustFormState);

        // Ajusta el estado del formulario al cargar la página (por si hay un valor preseleccionado o error).
        adjustFormState();

        // *** Manejo del envío del formulario ***
        alumnoForm.addEventListener('submit', function(e) {
            // Si hay un alumno seleccionado en Select2, la acción de submit siempre será 'save_and_continue'
            if (existingAlumnoSelect.value && existingAlumnoSelect.value !== "") {
                document.getElementById('action_type_alumno').value = 'save_and_continue';
            }
            // Si no hay selección, el 'action_type' ya lo habrá definido el botón que el usuario presionó.
        });
    });
</script>
{{-- ***** FIN DEL SCRIPT JAVASCRIPT ***** --}}