@extends('layout')
@section('content')
    <div class="min-h-screen flex items-center justify-center">
        <div class="bg-white w-full md:w-2/3 lg:w-1/2 xl:w-2/3 rounded-lg shadow-md overflow-hidden my-3">
            <div class="p-6">
                <h2 class="text-2xl font-bold text-teal-600 text-center mb-6">Creación de Plan de Estudio</h2>
                <form action="">
                    @csrf
                    <div class="mb-4 flex flex-wrap">
                        <!-- Código del Plan -->
                        <div class="w-full md:w-1/2 pr-2">
                            <label for="codigo_plan" class="block text-sm font-medium text-gray-700">Código del Plan <span
                                    class="text-red-500">*</span></label>
                            <select name="codigo_plan" id="codigo_plan"
                                class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                                required>
                                <option value="" disabled selected>Seleccione un código disponible</option>
                            </select>
                        </div>
                        <!-- Año del Plan -->
                        <div class="w-full md:w-1/2 pr-2 md:pr-0">
                            <label for="Año" class="block text-sm font-medium text-gray-700">Año de Creacion de
                                Codigo <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <select id="Año" name="Año"
                                    class="block appearance-none w-full bg-white px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                                    required>
                                    @php
                                        $currentYear = date('Y');
                                        $years = range($currentYear, $currentYear - 10);
                                    @endphp
                                    @foreach ($years as $year)
                                        <option value="{{ $year }}">{{ $year }}</option>
                                    @endforeach
                                </select>
                                <div
                                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 20 20">
                                        <path d="M10 12l-6-6h12l-6 6z" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-4 flex flex-wrap">
                        <!-- Versión del Plan de Estudio -->
                        <div class="w-full md:w-1/2 pr-2 relative group" x-data="{ open: false }">
                            <label for="Version" class="block text-sm font-medium text-gray-700">Versión de Plan de Estudio
                                <span class="text-red-500">*</span>
                                <span class="ml-2 inline-block text-gray-400 cursor-help" @mouseover="open = true"
                                    @mouseout="open = false">
                                    <i
                                        class="fas fa-question-circle transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"></i>
                                    <span
                                        class="absolute w-60 p-2 mt-2 text-sm leading-none text-white bg-gray-600 rounded-lg shadow-lg"
                                        x-show="open" x-transition:enter="transition ease-out duration-300"
                                        x-transition:enter-start="opacity-0 transform scale-90"
                                        x-transition:enter-end="opacity-100 transform scale-100"
                                        x-transition:leave="transition ease-in duration-300"
                                        x-transition:leave-start="opacity-100 transform scale-100"
                                        x-transition:leave-end="opacity-0 transform scale-90">
                                        Corresponde a la version de plan de estudio Ej: 1
                                    </span>
                                </span>
                            </label>
                            <input type="text" name="Version" id="Version_"
                                class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                                placeholder="Ingrese la versión del plan">
                        </div>
                        <!-- Código del Plan DMRE -->
                        <div class="w-full md:w-1/2 pr-2 relative group" x-data="{ open: false }">
                            <label for="DMRE" class="block text-sm font-medium text-gray-700">Código del Plan DMRE
                                <span class="ml-2 inline-block text-gray-400 cursor-help" @mouseover="open = true"
                                    @mouseout="open = false">
                                    <i
                                        class="fas fa-question-circle transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"></i>
                                    <span
                                        class="absolute w-60 p-2 mt-2 text-sm leading-none text-white bg-gray-600 rounded-lg shadow-lg"
                                        x-show="open" x-transition:enter="transition ease-out duration-300"
                                        x-transition:enter-start="opacity-0 transform scale-90"
                                        x-transition:enter-end="opacity-100 transform scale-100"
                                        x-transition:leave="transition ease-in duration-300"
                                        x-transition:leave-start="opacity-100 transform scale-100"
                                        x-transition:leave-end="opacity-0 transform scale-90">
                                        Codigo asignado por DEMRE en oferta academica ej: 16401
                                    </span>
                                </span>
                            </label>
                            <input type="number" name="DMRE" id="DMRE"
                                class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                                placeholder="Ingrese el Código del Plan DMRE">
                        </div>
                    </div>
                    <div class="mb-4 flex flex-wrap">
                        <!-- RESOLUCION -->
                        <div class="w-full md:w-1/2 pr-2 relative group" x-data="{ open: false }">
                            <label for="RESOLUCION" class="block text-sm font-medium text-gray-700">Resolucion
                                <span class="ml-2 inline-block text-gray-400 cursor-help" @mouseover="open = true"
                                    @mouseout="open = false">
                                    <i
                                        class="fas fa-question-circle transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"></i>
                                    <span
                                        class="absolute w-60 p-2 mt-2 text-sm leading-none text-white bg-gray-600 rounded-lg shadow-lg"
                                        x-show="open" x-transition:enter="transition ease-out duration-300"
                                        x-transition:enter-start="opacity-0 transform scale-90"
                                        x-transition:enter-end="opacity-100 transform scale-100"
                                        x-transition:leave="transition ease-in duration-300"
                                        x-transition:leave-start="opacity-100 transform scale-100"
                                        x-transition:leave-end="opacity-0 transform scale-90">
                                        Numero de Resolucion Crea Plan ej : 12345
                                    </span>
                                </span>
                            </label>
                            <input type="text" name="RESOLUCION" id="RESOLUCION"
                                class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                                placeholder="Ingrese nombre o numero de la Resolucion">
                        </div>
                        <!-- FECHA DE RESOLUCION -->
                        <div class="w-full md:w-1/2 pr-2 relative group" x-data="{ open: false }">
                            <label for="fecha_res" class="block text-sm font-medium text-gray-700">Fecha de Resolucion
                                <span class="ml-2 inline-block text-gray-400 cursor-help" @mouseover="open = true"
                                    @mouseout="open = false">
                                    <i
                                        class="fas fa-question-circle transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"></i>
                                    <span
                                        class="absolute w-60 p-2 mt-2 text-sm leading-none text-white bg-gray-600 rounded-lg shadow-lg"
                                        x-show="open" x-transition:enter="transition ease-out duration-300"
                                        x-transition:enter-start="opacity-0 transform scale-90"
                                        x-transition:enter-end="opacity-100 transform scale-100"
                                        x-transition:leave="transition ease-in duration-300"
                                        x-transition:leave-start="opacity-100 transform scale-100"
                                        x-transition:leave-end="opacity-0 transform scale-90">
                                        Fecha de Resolucion de Crea Plan Ej : 01-01-2023
                                    </span>

                            </label>
                            <input type="date" name="fecha_res" id="fecha_res"
                                class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                                placeholder="Ingrese la fecha de la Resolución" required>

                        </div>
                    </div>
                    <!-- Nombre del Plan -->
                    <div class="mb-4">
                        <!-- Nombre del Plan -->
                        <label for="nombre" class="block text-sm font-medium text-gray-700">Nombre del Plan <span
                                class="text-red-500">*</span></label>
                        <input type="text" name="nombre" id="nombre"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                            placeholder="Ingrese el Nombre del Plan Hasta 200 Caracteres" required>
                    </div>

                    <!-- Periodo de Inicio -->
                    <div class="mb-4">
                        <label for="fecha_inicio" class="block text-sm font-medium text-gray-700">Periodo de
                            Inicio <span class="text-red-500">*</span></label>
                        <input type="text" name="fecha_inicio" id="fecha_inicio"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                            placeholder="Periodo de cuando se aplica el plan EJ: 2021-01" required>
                    </div>
                    <!-- Periodo de Última Versión -->
                    <div class="mb-4">
                        <label for="ultimaversion" class="block text-sm font-medium text-gray-700">Periodo de Última
                            Versión</label>
                        <input type="text" name="ultimaversion" id="ultimaversion"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                            placeholder="Periodo donde se crea el plan EJ: 2025-01">
                    </div>
                    <!-- Seleccione una Facultad -->
                    <div class="mb-4">
                        <label for="combo_box_facultad" class="block text-sm font-medium text-gray-700">Seleccione una
                            Facultad<span class="text-red-500">*</span></label>
                        <select id="combo_box_facultad" name="combo_box_facultad"
                            class="appearance-none w-full bg-white  px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600">
                            <option value="" disabled selected>Seleccione una facultad</option>
                            @foreach ($facultadData as $item)
                                <option id="option{{ $item['FAC_COD'] }}" value="{{ $item['FAC_COD'] }}">
                                    {{ $item['FAC_COD'] }}-{{ $item['FAC_DESCRIP'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <!-- Seleccione el Centro de Costo -->
                    <div class="mb-4">
                        <label for="combo_box_dept" class="block text-sm font-medium text-gray-700">Seleccione el Centro
                            de
                            Costo<span class="text-red-500">*</span></label>
                        <select id="combo_box_dept" name="combo_box_dept"
                            class="appearance-none w-full bg-white  px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600">
                            <option value="" disabled selected>Seleccione una facultad para que aparezca el centro de
                                costo</option>
                            <!-- Placeholder -->
                        </select>
                    </div>
                    <!-- Seleccione la Jornada -->
                    <div class="mb-4 flex flex-wrap">
                        <div class="w-full md:w-1/3 pr-2">
                            <label class="block text font-medium text-gray-700">Seleccione la Jornada <span
                                    class="text-red-500">*</span></label>
                            <div class="flex flex-col space-y-2">
                                @foreach ($jornadaData as $jornada)
                                    <label class="flex items-center space-x-2">
                                        <input type="radio" id="radio{{ $jornada['JOR_COD'] }}" name="jornada"
                                            value="{{ $jornada['JOR_COD'] }}"
                                            {{ $jornada['JOR_COD'] == '0' ? 'checked' : '' }}
                                            class="h-4 w-4 text-teal-600 rounded border-gray-300 focus:ring focus:ring-teal-600">
                                        <span>{{ $jornada['JOR_DESCRIP'] }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                        <div class="w-full md:w-1/3 pl-2">
                            <label class="block text font-medium text-gray-700">Seleccione la Modalidad <span
                                    class="text-red-500">*</span></label>
                            <div class="flex flex-col space-y-2">
                                @foreach ($modalidadData as $modalidad)
                                    <label class="flex items-center space-x-2">
                                        <input type="radio" id="radio{{ $modalidad['PMD_ID'] }}" name="modalidad"
                                            value="{{ $modalidad['PMD_ID'] }}"
                                            {{ $modalidad['PMD_ID'] == '0' ? 'checked' : '' }}
                                            class="h-4 w-4 text-teal-600 rounded border-gray-300 focus:ring focus:ring-teal-600">
                                        <span>{{ $modalidad['PMD_DESCRIP'] }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                        <div class="w-full md:w-1/3 pl-2">
                            <label class="block text-sm font-medium text-gray-700">Seleccione Control Finaciero<span
                                    class="text-red-500">*</span></label>
                            <div class="flex flex-col space-y-2">
                                <label class="flex items-center space-x-2">
                                    <input type="radio" id="radioUSACH" name="control" value="1" checked
                                        class="h-4 w-4 text-teal-600 rounded border-gray-300 focus:ring focus:ring-teal-600">
                                    <span>USACH</span>
                                </label>
                                <label class="flex items-center space-x-2">
                                    <input type="radio" id="radioSDT" name="control" value="2"
                                        class="h-4 w-4 text-teal-600 rounded border-gray-300 focus:ring focus:ring-teal-600">
                                    <span>SDT</span>
                                </label>
                                <label class="flex items-center space-x-2">
                                    <input type="radio" id="radioSDT" name="control" value="3"
                                        class="h-4 w-4 text-teal-600 rounded border-gray-300 focus:ring focus:ring-teal-600">
                                    <span>Cap. USACH</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- Seleccione el Tipo de Programa -->
                    <div class="mb-4">
                        <label for="combo_box2" class="block text-sm font-medium text-gray-700">Seleccione el Tipo de
                            Programa<span class="text-red-500">*</span></label>
                        <select id="combo_box2" name="combo_box2"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600">
                            @foreach ($tipoData as $item)
                                <option value="{{ $item['TPROG_COD'] }}">{{ $item['TPROG_DESCRIP'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-4">
                        <label for="combo_box_cod_search" class="block text-sm font-medium text-gray-700">Seleccione
                            código carrera<span class="text-red-500">*</span></label>
                        <input type="text" id="combo_box_cod_search" name="combo_box_cod_search"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                            placeholder="Escriba al menos 3 caracteres para buscar...">
                        <ul id="combo_box_cod_results"
                            class="mt-2 bg-white border border-gray-300 rounded-md hidden max-h-40 overflow-y-auto">
                            <!-- Los resultados de búsqueda se agregarán aquí dinámicamente -->
                        </ul>
                    </div>
                    <input type="hidden" id="combo_box_cod" name="combo_box_cod">
                    <!-- Seleccione el Régimen -->
                    <div class="mb-4">
                        <label for="combo_box1" class=" text-sm hidden font-medium text-gray-700">Seleccione el
                            Régimen<span class="text-red-500">*</span></label>
                        <select id="combo_box1" name="combo_box1"
                            class="w-full px-4 py-2 rounded-md border hidden border-gray-300 focus:outline-none focus:ring focus:ring-teal-600">
                            @foreach ($duracionData as $item)
                                <option value="{{ $item['TDU_COD'] }}">{{ $item['TDU_DESCRIP'] }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Seleccione el Tipo de Ingreso -->
                    <div class="mb-4">
                        <label for="combo_box_tipoingreso" class="block text-sm font-medium text-gray-700">Seleccione el
                            Tipo de Ingreso<span class="text-red-500">*</span></label>
                        <select id="combo_box_tipoingreso" name="combo_box_tipoingreso"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600">
                            <option value="" disabled selected>Seleccione una opción</option>
                            @foreach ($tipoingresoData as $item)
                                <option value="{{ $item['TING_COD'] }}">
                                    {{ $item['TING_COD'] }}-{{ $item['TING_DESCRIP'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <!-- Seleccione el Tipo -->
                    <div class="mb-4">
                        <label for="combo_box_tipo" class="block text-sm font-medium text-gray-700">Seleccione el
                            Tipo Plan<span class="text-red-500">*</span></label>
                        <select id="combo_box_tipo" name="combo_box_tipo"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600">
                            <option value="" disabled selected>Seleccione una opción</option>
                            @foreach ($tipoPlanData as $item)
                                <option value="{{ $item['TIP_COD'] }}">
                                    {{ $item['TIP_COD'] }}-{{ $item['TIP_DESCRIP'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <!-- Seleccione el Tipo de Grado -->
                    <div class="mb-4">
                        <label for="combo_box_tipo_grado" class="block text-sm font-medium text-gray-700">Seleccione el
                            Tipo de Grado<span class="text-red-500">*</span></label>
                        <select id="combo_box_tipo_grado" name="combo_box_tipo_grado"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600">
                            <option value="" disabled selected>Seleccione una opción</option>
                            @foreach ($tipoGradoData as $item)
                                <option value="{{ $item['NIV_COD'] }}">
                                    {{ $item['NIV_COD'] }}-{{ $item['NIV_DESCRIP'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <!-- Plan Anterior -->
                    <div class="mb-4">
                        <label for="plananterior" class="block text-sm font-medium text-gray-700">Plan Anterior</label>
                        <input type="text" name="plananterior" id="plananterior"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                            placeholder="Ingrese si tiene plan anterior">
                    </div>
                    <!-- Duración -->
                    <div class="mb-4">
                        <label for="duracion" class="block text-sm font-medium text-gray-700">Duración en
                            Semestres<span class="text-red-500">*</span></label>
                        <input type="text" name="duracion" id="duracion"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                            placeholder="Ingrese la duración">
                    </div>
                    <!-- Vigencia -->
                    <div class="mb-4">
                        <label for="combo_box_vigencia" class="block text-sm font-medium text-gray-700">Seleccione la
                            Vigencia para Alumnos<span class="text-red-500">*</span></label>
                        <select id="combo_box_vigencia" name="combo_box_tipo_vigencia"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600">
                            <option value="" disabled selected>Seleccione una opción</option>
                            @foreach ($vigenciaData as $item)
                                <option value="{{ $item['PVP_ID'] }}">
                                    {{ $item['PVP_ID'] }}-{{ $item['PVP_DESCRIPCIÓN'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <!-- Cuota Básica -->
                    <div class="mb-4">
                        <label for="cuota_basica" class="hidden text-sm font-medium text-gray-700">Cuota
                            Básica</label>
                        <input type="text" name="cuota_basica" id="cuota_basica"
                            class="w-full px-4 py-2 rounded-md border hidden border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                            placeholder="Ingrese la cuota básica">
                    </div>
                    <!-- Observaciones -->
                    <div class="mb-4">
                        <label for="observaciones" class="block text-sm font-medium text-gray-700">Observaciones</label>
                        <textarea name="observaciones" id="observaciones"
                            class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-teal-600"
                            placeholder="Ingrese observaciones"></textarea>
                    </div>
                    <!-- Botón de Volver -->
                    <div class="flex justify-center ">
                        <div class="text-center p-2">
                            <button id="volver" type="button"
                                class="bg-teal-600 text-white py-2 px-4 rounded-md hover:bg-teal-700 focus:outline-none focus:ring focus:ring-teal-600">
                                Volver
                            </button>
                        </div>
                        <!-- Botón de Crear Plan -->
                        <div class="text-center p-2">
                            <button id="inserting" type="button"
                                class="bg-teal-600 text-white py-2 px-4 rounded-md hover:bg-teal-700 focus:outline-none focus:ring focus:ring-teal-600">Crear
                                Plan</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>



    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('combo_box_cod_search');
            const resultsList = document.getElementById('combo_box_cod_results');
            const hiddenInput = document.getElementById('combo_box_cod'); // Campo oculto

            searchInput.addEventListener('input', function() {
                const query = searchInput.value;
                const dCarr = document.getElementById('combo_box_dept')
                    .value; // ID del select de departamento
                const dTipo = document.getElementById('combo_box2').value; // ID del select de tipo

                if (query.length >= 3) {
                    fetch(`/facultad/getcarrcod?d_carr=${dCarr}&d_tipo=${dTipo}&query=${query}`)
                        .then(response => response.json())
                        .then(data => {
                            resultsList.innerHTML = ''; // Limpia los resultados anteriores
                            resultsList.classList.remove('hidden');

                            if (data.length > 0) {
                                data.forEach(item => {
                                    const li = document.createElement('li');
                                    li.textContent = `${item.PROG_COD} - ${item.PROG_NOMBRE}`;
                                    li.classList.add('px-4', 'py-2', 'cursor-pointer',
                                        'hover:bg-gray-200');
                                    li.addEventListener('click', () => {
                                        searchInput.value =
                                            `${item.PROG_COD} - ${item.PROG_NOMBRE}`;
                                        hiddenInput.value = item
                                            .PROG_COD; // Actualiza el campo oculto
                                        resultsList.classList.add('hidden');
                                    });
                                    resultsList.appendChild(li);
                                });
                            } else {
                                const li = document.createElement('li');
                                li.textContent = 'No se encontraron resultados';
                                li.classList.add('px-4', 'py-2', 'text-gray-500');
                                resultsList.appendChild(li);
                            }
                        })
                        .catch(error => {
                            console.error('Error al buscar:', error);
                        });
                } else {
                    resultsList.classList.add('hidden');
                }
            });
            // Llamar a la ruta para obtener los códigos disponibles
            $.ajax({
                url: '{{ route('codigos.disponibles') }}',
                method: 'GET',
                success: function(data) {
                    if (data.length > 0) {
                        var codigoPlanSelect = $('#codigo_plan');
                        codigoPlanSelect.empty(); // Limpia las opciones existentes
                        codigoPlanSelect.append(
                            '<option value="" disabled selected>Seleccione un código disponible</option>'
                        );

                        // Agrega los códigos disponibles como opciones
                        data.forEach(function(item) {
                            codigoPlanSelect.append('<option value="' + item.CODIGO_DISPONIBLE +
                                '">' + item.CODIGO_DISPONIBLE + '</option>');
                        });
                    } else {
                        swal("Advertencia", "No hay códigos disponibles", "warning");
                    }
                },
                error: function(error) {
                    swal("Error", "No se pudieron obtener los códigos disponibles", "error");
                }
            });

            // Validar si el código seleccionado está ocupado
            $('#codigo_plan').on('change', function() {
                var codigo = $(this).val();

                if (codigo) {
                    $.ajax({
                        url: '{{ route('validar.codigo') }}',
                        method: 'POST',
                        data: {
                            codigo: codigo,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.ocupado) {
                                swal("Advertencia", response.message, "warning");
                                $('#codigo_plan').val(
                                    ''); // Limpia la selección si está ocupado
                            } else {
                                swal("Éxito", response.message, "success");
                            }
                        },
                        error: function(error) {
                            swal("Error", "No se pudo validar el código", "error");
                        }
                    });
                }
            });
            const data = JSON.parse(localStorage.getItem('data'));
            if (data) {
                document.getElementById('codigo_plan').value = data['cod-prog'];
                document.getElementById('nombre').value = data['nombre'];
                document.getElementById('Año').value = data['anio-inicio'];
                document.getElementById('Version_').value = data['plan-ult-version'];
                document.getElementById('DMRE').value = data['plan-cod-demre'];
                document.getElementById('CNED').value = data['plan-cod-cned'];
                document.getElementById('nombre').value = data['nombre'];
                document.getElementById('fecha_inicio').value = data['plan-periodo-ini'];
                document.getElementById('ultimaversion').value = data['plan-ult-version'];
                document.getElementById('combo_box_facultad').value = data['plan-fac-cod'];
                document.getElementById('combo_box_dept').value = data['cod-dep'];
                document.querySelector(`input[name="jornada"][value="${data['plan-jor-cod']}"]`).checked =
                    true;
                document.querySelector(`input[name="modalidad"][value="${data['plan-tipo-mod']}"]`)
                    .checked = true;
                document.getElementById('combo_box2').value = data['plan-tipo-prog'];
                document.getElementById('combo_box_cod').value = data['plan-car-cod'];
                document.getElementById('combo_box_tipoingreso').value = data['plan-tipo-ing'];
                document.getElementById('combo_box_tipo').value = data['tipo'];
                document.getElementById('combo_box_tipo_grado').value = data['plan-grado-cod'];
                document.getElementById('plananterior').value = data['plan-anterior'];
                document.getElementById('duracion').value = data['plan-duracion'];
                document.getElementById('combo_box_vigencia').value = data['plan-vigencia'];
                document.getElementById('observaciones').value = data['comentario'];
                document.getElementById('resolucion').value = data['plan-resolucion'];
                document.getElementById('fecha_res').value = data['plan-fechares'];
                // Establece el valor del select de facultad
                var facultadSelect = document.getElementById('combo_box_facultad');
                facultadSelect.value = data['plan-fac-cod'];
                const controlValue = data['plan-control']; // Asegúrate de que este valor exista
                const radioInput = document.querySelector(`input[name="control"][value="${controlValue}"]`);

                // Dispara el evento change en el select de facultad
                $(facultadSelect).trigger('change');

                // Establece el valor del select de departamento en la función de éxito de la solicitud AJAX
                $('#combo_box_facultad').on('change', function() {
                    var selectedFacultad = $(this).val();
                    var deptSelect = $('#combo_box_dept');
                    var deptUrl = '{{ route('get_dept') }}';
                    $.ajax({
                        type: 'get',
                        url: deptUrl,
                        data: {
                            d_facu: selectedFacultad
                        },
                        success: function(data) {
                            // Borra las opciones existentes en el segundo select
                            deptSelect.empty();

                            // Agrega las nuevas opciones basadas en los datos obtenidos
                            data.forEach(function(item) {
                                var optionText = item.DEP_COD + '-' + item.DEP_NOMBRE;

                                deptSelect.append($('<option>', {
                                    value: item.DEP_COD,
                                    text: optionText
                                }));
                            });

                            // Establece el valor del select de departamento
                            deptSelect.value = data['cod-dep'];
                        },
                        error: function(error) {
                            swal("Error", "Ha ocurrido un error con la solicitud realizada",
                                "error");
                        }
                    });
                });

                // Limpia el almacenamiento local
                localStorage.removeItem('data');
            }
        });


        $('#combo_box_facultad').change(function() {
            var selectedFacultad = $(this).val();
            var deptSelect = $('#combo_box_dept');
            var deptUrl = '{{ route('get_dept') }}';
            // Realiza la solicitud AJAX para obtener los departamentos
            $.ajax({
                type: 'get',
                url: deptUrl,
                data: {
                    d_facu: selectedFacultad
                },
                success: function(data) {
                    // Borra las opciones existentes en el segundo select
                    deptSelect.empty();

                    // Agrega las nuevas opciones basadas en los datos obtenidos
                    data.forEach(function(item) {
                        var optionText = item.DEP_COD + '-' + item.DEP_NOMBRE;

                        deptSelect.append($('<option>', {
                            value: item.DEP_COD,
                            text: optionText
                        }));
                    });
                },
                error: function(error) {
                    swal("Error", "Ha ocurrido un error con la solicitud realizada", "error");
                }
            });
        });

        $('#inserting').on('click', function(event) {
            event.preventDefault();
            let codigo_plan = $("#codigo_plan").val();
            let Año = $("#Año").val();
            let Version = $("#Version").val();
            let DMRE = $("#DMRE").val();
            let CNED = $("#CNED").val();
            let RESOLUCION = $("#RESOLUCION").val();
            let fecha_res = $("#fecha_res").val();
            let control = $("input[name='control']:checked").val();
            if (!fecha_res) {
                swal("Error", "Debe ingresar una fecha de resolución", "error");
                return;
            }

            if (!control) {
                swal("Error", "Debe seleccionar un control", "error");
                return;
            }
            let SIES = $("#SIES").val();
            let nombre = $("#nombre").val();
            let ultimaversion = $("#ultimaversion").val();
            let fecha_inicio = $("#fecha_inicio").val();
            let combo_box_facultad = $("#combo_box_facultad").val();
            let combo_box_dept = $("#combo_box_dept").val();
            let jornada = $("input[name='jornada']:checked").val();
            let modalidad = $("input[name='modalidad']:checked").val();
            let combo_box_cod = $("#combo_box_cod").val();
            console.log("Valor de combo_box_cod:", combo_box_cod); // Verifica el valor
            if (!combo_box_cod) {
                swal("Error", "Debe seleccionar un código de carrera válido", "error");
                return;
            }
            let combo_box_vigencia = $("#combo_box_vigencia").val();
            let combo_box1 = $("#combo_box1").val();
            let combo_box2 = $("#combo_box2").val();
            let combo_box_tipoingreso = $("#combo_box_tipoingreso").val();
            let combo_box_tipo = $("#combo_box_tipo").val();
            let combo_box_tipo_grado = $("#combo_box_tipo_grado").val();
            let plananterior = $("#plananterior").val();
            let duracion = $("#duracion").val();
            let cuota_basica = $("#cuota_basica").val();
            let Comentario = $("#observaciones").val();
            let esp = "0";
            let token = '{{ csrf_token() }}';
            let data = {
                codigo: codigo_plan,
                agno: Año,
                version: Version,
                codDemre: DMRE,
                codCned: CNED,
                codSies: SIES,
                nombre: nombre,
                nomCorto: nombre,
                periodoIni: fecha_inicio,
                jorCod: jornada,
                depCod: combo_box_dept,
                facCod: combo_box_facultad,
                duracion: duracion,
                carCod: combo_box_cod,
                tipoIng: combo_box_tipoingreso,
                tipoMod: modalidad,
                tipoPlan: combo_box_tipo,
                espCaract: esp,
                gradoCod: combo_box_tipo_grado,
                ultVersion: ultimaversion,
                planAnterior: plananterior,
                vigencia: combo_box_vigencia,
                tipoProg: combo_box2,
                Estado: 'PENDIENTE',
                Comentario: Comentario,
                codRes: RESOLUCION,
                fechaRes: fecha_res,
                control: control,
                _token: token
            };
            $.ajax({
                type: 'POST',
                url: '{{ route('plan.guardar') }}',
                data: data,
                dataType: 'json',
                success: function(response) {
                    if (response.message) {
                        swal("Éxito", response.message, "success");
                        setTimeout(function() {
                            window.location.href = '/';
                        }, 3000);
                    } else {
                        swal("Error", response.error, "error");
                    }
                },
                error: function(xhr, status, error) {
                    console.log(xhr.status);
                    console.log(xhr.responseText);
                    swal("Error", "Ha ocurrido un error con la solicitud realizada", "error");
                }

            });
        });

        //Funcion volver a la vista principal

        $('#volver').on('click', function(event) {
            event.preventDefault();
            window.location.href = '/';
        });
    </script>
@endsection