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

@section('title', 'Crear Registro de Títulos')

@section('content')
    <div class="container">
        <h1 class="mb-4 text-white"><i class="bi bi-journal-plus me-2"></i> Crear Nuevo Registro de Títulos</h1>

        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-8">
                <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

                        {{-- Mostrar un mensaje si se está en el flujo encadenado --}}
                        @if (isset($alumno) || isset($cepro))
                            <div class="alert alert-info small py-2 mb-3">
                                <i class="bi bi-info-circle me-1"></i> Completando registro de título para:
                                <br>
                                @if (isset($alumno))
                                    <strong>Alumno:</strong> {{ $alumno->nom_c ?? 'N/A' }} {{ $alumno->ape_c ?? '' }} (DNI: {{ $alumno->dni ?? 'N/A' }})
                                @else
                                    <strong>Alumno:</strong> No especificado
                                @endif
                                <br>
                                @if (isset($cepro))
                                    <strong>CEPRO:</strong> {{ $cepro->nom_cepro ?? 'N/A' }}
                                @else
                                    <strong>CEPRO:</strong> No especificado
                                @endif
                            </div>
                        @endif

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

                            {{-- Campos Ocultos para los IDs si vienen del flujo encadenado --}}
                            @if (isset($alumnoId))
                                <input type="hidden" name="cod_datosa" value="{{ $alumnoId }}">
                            @endif
                            @if (isset($ceproId))
                                <input type="hidden" name="cod_cepro" value="{{ $ceproId }}">
                            @endif

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="libro" class="form-label"><i class="bi bi-book me-2"></i> Libro de Título</label>
                                        <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white @error('libro') is-invalid @enderror" id="libro" name="libro" value="{{ old('libro') }}">
                                        @error('libro')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="pagina" class="form-label"><i class="bi bi-file-earmark-text me-2"></i> Página de Título</label>
                                        <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white @error('pagina') is-invalid @enderror" id="pagina" name="pagina" value="{{ old('pagina') }}">
                                        @error('pagina')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="rd_number" class="form-label"><i class="bi bi-file-earmark-ruled me-2"></i> Resolución Directoral (RD)</label>
                                        {{-- MODIFICACIÓN AQUÍ: Input y Select para el RD --}}
                                        <div class="input-group">
                                            <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white @error('rd') is-invalid @enderror" id="rd_number" placeholder="Ej. 02220" value="{{ old('rd') ? explode('-', old('rd'))[0] : '' }}">
                                            <span class="input-group-text bg-secondary border-secondary text-white">-</span>
                                            <select class="form-select form-select-sm bg-secondary border-secondary text-white" id="rd_year">
                                                {{-- Las opciones de año se llenarán con JavaScript --}}
                                            </select>
                                        </div>
                                        {{-- Campo oculto para enviar el valor combinado al servidor --}}
                                        <input type="hidden" name="rd" id="rd_full" value="{{ old('rd') }}">
                                        @error('rd')
                                            <div class="invalid-feedback d-block">{{ $message }}</div> {{-- d-block para forzar la visualización --}}
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3 position-relative">
                                        <label for="fecha" class="form-label"><i class="bi bi-calendar-date me-2"></i> Fecha de Expedición</label>
                                        <div class="flatpickr-input-container">
                                            <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white flatpickr-input @error('fecha') is-invalid @enderror" id="fecha" name="fecha" value="{{ old('fecha') }}" placeholder="YYYY-MM-DD" readonly="readonly">
                                        </div>
                                        @error('fecha')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="espec" class="form-label"><i class="bi bi-award me-2"></i> Especialidad</label>
                                        <input type="text" class="form-control form-control-sm bg-secondary border-secondary text-white @error('espec') is-invalid @enderror" id="espec" name="espec" value="{{ old('espec') }}">
                                        @error('espec')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="mod" class="form-label"><i class="bi bi-mortarboard me-2"></i> Modalidad</label>
                                        <select class="form-select form-select-sm bg-secondary border-secondary text-white @error('mod') is-invalid @enderror" id="mod" name="mod">
                                            <option value="" selected disabled>Seleccionar Modalidad</option>
                                            <option value="Presencial" {{ old('mod') == 'Presencial' ? 'selected' : '' }}>Presencial</option>
                                            <option value="Semipresencial" {{ old('mod') == 'Semipresencial' ? 'selected' : '' }}>Semipresencial</option>
                                            <option value="A distancia" {{ old('mod') == 'A distancia' ? 'selected' : '' }}>A distancia</option>
                                        </select>
                                        @error('mod')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="cod_datosa" class="form-label"><i class="bi bi-person-circle me-2"></i> Alumno</label>
                                        <select class="form-select form-select-sm bg-secondary border-secondary text-white @error('cod_datosa') is-invalid @enderror" id="cod_datosa" name="cod_datosa" required
                                            @if (isset($alumnoId)) disabled @endif>
                                            <option value="" selected disabled>Seleccionar Alumno</option>
                                            @foreach ($alumnos as $currentAlumno)
                                                <option value="{{ $currentAlumno->id_datosa }}"
                                                    @if (isset($alumnoId) && $alumnoId == $currentAlumno->id_datosa)
                                                         selected
                                                    @elseif (old('cod_datosa') == $currentAlumno->id_datosa)
                                                         selected
                                                    @endif
                                                >
                                                    {{ $currentAlumno->nom_c }} {{ $currentAlumno->ape_c }} (DNI: {{ $currentAlumno->dni }})
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('cod_datosa')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="cod_cepro" class="form-label"><i class="bi bi-house-door-fill me-2"></i> CEPRO</label>
                                        <select class="form-select form-select-sm bg-secondary border-secondary text-white @error('cod_cepro') is-invalid @enderror" id="cod_cepro" name="cod_cepro" required
                                            @if (isset($ceproId)) disabled @endif>
                                            <option value="" selected disabled>Seleccionar CEPRO</option>
                                            @foreach ($cepros as $currentCepro)
                                                <option value="{{ $currentCepro->idcepro }}"
                                                    @if (isset($ceproId) && $ceproId == $currentCepro->idcepro)
                                                         selected
                                                    @elseif (old('cod_cepro') == $currentCepro->idcepro)
                                                         selected
                                                    @endif
                                                >
                                                    {{ $currentCepro->nom_cepro }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('cod_cepro')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-4">
                                <button type="submit" class="btn btn-primary btn-sm shadow-sm"><i class="bi bi-save me-2"></i> Guardar Título</button>
                                <a href="{{ route('ugels.index') }}" class="btn btn-secondary btn-sm ms-2 shadow-sm"><i class="bi bi-x-circle me-2"></i> Cancelar</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Flatpickr JS --}}
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    {{-- Flatpickr Spanish (or other locale) --}}
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/es.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Inicializar Flatpickr para el campo de fecha
            flatpickr("#fecha", {
                dateFormat: "Y-m-d", // Formato de fecha AAAA-MM-DD
                locale: "es",        // Establecer el idioma a español
                allowInput: true,    // Permitir la entrada manual
            });

            // Lógica para auto-completar el año en el campo RD
            const rdNumberInput = document.getElementById('rd_number');
            const rdYearSelect = document.getElementById('rd_year');
            const rdFullHiddenInput = document.getElementById('rd_full');
            const currentYear = new Date().getFullYear();

            // Función para poblar el select de años
            function populateYears() {
                const startYear = 1900; // Inicia desde 1900
                const endYear = currentYear + 5; // Hasta 5 años en el futuro
                let options = '';
                for (let year = endYear; year >= startYear; year--) {
                    options += `<option value="${year}">${year}</option>`;
                }
                rdYearSelect.innerHTML = options;
            }

            // Función para actualizar el campo oculto con el valor combinado
            function updateRdFullValue() {
                const numberPart = rdNumberInput.value.trim();
                const yearPart = rdYearSelect.value;
                if (numberPart !== '' && yearPart !== '') {
                    rdFullHiddenInput.value = `${numberPart}-${yearPart}`;
                } else {
                    rdFullHiddenInput.value = ''; // Si falta alguna parte, el campo combinado está vacío
                }
            }

            // Inicializar el select de años y establecer el año actual por defecto
            populateYears();

            // Pre-seleccionar el año si existe en old('rd')
            const oldRdValue = rdFullHiddenInput.value; // old('rd') ya está en el hidden input
            if (oldRdValue) {
                const parts = oldRdValue.split('-');
                if (parts.length > 1) {
                    const oldYear = parts[parts.length - 1]; // Última parte es el año
                    // Asegurarse de que el año seleccionado sea una opción válida
                    if (Array.from(rdYearSelect.options).some(option => option.value === oldYear)) {
                        rdYearSelect.value = oldYear;
                    } else {
                        // Si el año de old('rd') no está en el rango, seleccionar el actual
                        rdYearSelect.value = currentYear;
                    }
                } else {
                    // Si old('rd') no tiene el formato con guion, seleccionar el año actual
                    rdYearSelect.value = currentYear;
                }
            } else {
                // Si no hay old('rd'), seleccionar el año actual por defecto
                rdYearSelect.value = currentYear;
            }

            // Actualizar el campo oculto inicialmente
            updateRdFullValue();

            // Escuchar eventos de entrada y cambio para actualizar el campo combinado
            rdNumberInput.addEventListener('input', updateRdFullValue);
            rdYearSelect.addEventListener('change', updateRdFullValue);
        });
    </script>
@endpush