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

@section('title', 'Registrar CEPRO')

---

{{-- ***** INICIO: CSS de Select2 (EMBEBIDO DIRECTAMENTE) ***** --}}
<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-house-door-fill me-2"></i> Registrar Nuevo Centro Educativo (CEPRO)</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

                        @if (isset($alumnoId))
                            <div class="alert alert-info small py-2">
                                <i class="bi bi-info-circle me-1"></i> Registrando CEPRO para el alumno:
                                <br>
                                <strong>{{ $alumno->nom_c ?? 'N/A' }} {{ $alumno->ape_c ?? '' }}</strong> (DNI: {{ $alumno->dni ?? 'N/A' }})
                            </div>
                        @endif

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

                            {{-- Input oculto para alumno_id si viene de la cadena --}}
                            @if (isset($alumnoId))
                                <input type="hidden" name="alumno_id" value="{{ $alumnoId }}">
                            @endif

                            {{-- Sección para seleccionar un CEPRO existente CON Select2 --}}
                            <div class="mb-3">
                                <label for="existing_cepro_select" class="form-label"><i class="bi bi-house-door-fill me-2"></i> Buscar y Seleccionar CEPRO Existente</label>
                                <select class="form-select form-select-sm bg-secondary border-secondary text-white" id="existing_cepro_select" name="selected_cepro_id" style="width: 100%;">
                                    <option value="">-- Escribe para buscar o seleccionar un CEPRO --</option>
                                    @foreach ($cepros as $ceproExistente)
                                        <option value="{{ $ceproExistente->idcepro }}"
                                            {{ old('selected_cepro_id') == $ceproExistente->idcepro ? 'selected' : '' }}>
                                            {{ $ceproExistente->nom_cepro }} (Provincia: {{ $ceproExistente->prov_cepro ?? 'N/A' }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('selected_cepro_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

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

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

                                <div class="mb-3">
                                    <label for="nivel" class="form-label"><i class="bi bi-journal-check me-2"></i> Nivel</label>
                                    <select class="form-select form-select-sm bg-secondary border-secondary text-white @error('nivel') is-invalid @enderror" id="nivel" name="nivel" required>
                                        <option value="" selected disabled>Seleccionar Nivel</option>
                                        {{-- AJUSTE AQUÍ: Los 'value' ahora son los números esperados por tu DB --}}
                                        <option value="1" {{ old('nivel') == '1' ? 'selected' : '' }}>Técnico Productivo</option>
                                        <option value="2" {{ old('nivel') == '2' ? 'selected' : '' }}>Auxiliar Técnico</option>
                                    </select>
                                    @error('nivel')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

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

                            <div class="d-flex justify-content-end mt-4">
                                {{-- Botón para guardar un CEPRO nuevo (SIEMPRE VISIBLE CUANDO NO HAY SELECCIÓN) --}}
                                <button type="submit" id="save_new_cepro_button" class="btn btn-primary btn-sm shadow-sm me-2" onclick="document.getElementById('action_type_cepro').value='save';">
                                    <i class="bi bi-save me-2"></i> Guardar Nuevo CEPRO
                                </button>

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

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

                                <a href="{{ route('cepros.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 existingCeproSelect = document.getElementById('existing_cepro_select');
        const ceproForm = document.getElementById('ceproForm');
        const ceproFields = document.getElementById('cepro_fields');

        const saveNewCeproButton = document.getElementById('save_new_cepro_button');
        const saveAndContinueCeproButton = document.getElementById('save_and_continue_cepro_button');
        const continueExistingCeproButton = document.getElementById('continue_existing_cepro_button');

        const alumnoIdHiddenInput = ceproForm.querySelector('input[name="alumno_id"]');
        const isChainedFromAlumno = alumnoIdHiddenInput && alumnoIdHiddenInput.value;

        $('#existing_cepro_select').select2({
            language: "es",
            placeholder: 'Escribe para buscar o seleccionar un CEPRO...',
            allowClear: true,
            minimumResultsForSearch: 1,
            dropdownParent: $('#existing_cepro_select').parent()
        });

        $('#existing_cepro_select').on('select2:open', function() {
            setTimeout(function() {
                $('.select2-container--open .select2-search__field').focus();
            }, 100);
        });

        function adjustFormState() {
            const ceproId = existingCeproSelect.value;
            
            if (ceproId && ceproId !== "") {
                Array.from(ceproFields.querySelectorAll('input, select')).forEach(element => {
                    element.disabled = true;
                    element.value = '';
                    element.removeAttribute('required');
                    element.classList.remove('is-invalid');
                });
                
                ceproForm.setAttribute('novalidate', 'novalidate');

                saveNewCeproButton.style.display = 'none';
                saveAndContinueCeproButton.style.display = 'none';
                continueExistingCeproButton.style.display = 'inline-block';

            } else {
                Array.from(ceproFields.querySelectorAll('input, select')).forEach(element => {
                    element.disabled = false;
                    if (element.id === 'nom_cepro' || element.id === 'nivel') {
                        element.setAttribute('required', 'required');
                    }
                });
                
                ceproForm.removeAttribute('novalidate');

                saveNewCeproButton.style.display = 'inline-block';
                saveAndContinueCeproButton.style.display = 'inline-block';
                continueExistingCeproButton.style.display = 'none';
            }
        }

        $('#existing_cepro_select').on('change', adjustFormState);
        adjustFormState();

        ceproForm.addEventListener('submit', function(e) {
            if (existingCeproSelect.value && existingCeproSelect.value !== "") {
                document.getElementById('action_type_cepro').value = 'save_and_continue';
            }
        });
    });
</script>
{{-- ***** FIN DEL SCRIPT JAVASCRIPT ***** --}}