@extends('layout')
@section('content')
    <div class="container mx-auto py-6 px-4">
        <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            <h1 class="text-2xl font-bold text-teal-600 text-center mb-6">Creación de Programa</h1>
            @csrf
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="codigo-plan">Código Programa</label>
                <input
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-600"
                    id="codigo-plan" type="text" placeholder="Código Programa (Ej: PROG)">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="nombre-plan">Nombre de Programa</label>
                <input
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-600"
                    id="nombre-plan" type="text" placeholder="Nombre de Programa (Ej: Programa de Estudios)">
            </div>
            <div class="mb-4">
                <label for="combo_box_facultad" class="block text-sm font-medium text-gray-700">Seleccione una
                    Facultad</label>
                <select id="combo_box_facultad" name="combo_box_facultad"
                    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 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>
            <div class="mb-4">
                <label for="combo_box_programa" class="block text-sm font-medium text-gray-700">Seleccione el
                    Departamento</label>
                <select id="combo_box_programa" name="combo_box_programa"
                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-600">
                    <option value="" disabled selected>Seleccione una opción</option>
                    @foreach ($deptData as $item)
                        <option value="{{ $item['DEP_COD'] }}">
                            {{ $item['DEP_COD'] }}-{{ $item['DEP_NOMBRE'] }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="mb-4">
                <label for="combo_box_tipo" class="block text-sm font-medium text-gray-700">Seleccione el
                    Tipo Programa</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-2 focus:ring-teal-600">
                    <option value="" disabled selected>Seleccione una opción</option>
                    @foreach ($tipoPlanData as $item)
                        <option value="{{ $item['TPROG_COD'] }}">
                            {{ $item['TPROG_COD'] }}-{{ $item['TPROG_DESCRIP'] }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="ano">Año</label>
                <input
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-600"
                    id="ano" type="text" placeholder="Año (Ej: 2022)" oninput="validateInput(this, 'year')"
                    required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="semestre">Semestre</label>
                <input
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-600"
                    id="semestre" type="text" placeholder="Semestre (Ej: 1)" oninput="validateInput(this, 'semester')"
                    required>
            </div>
            <div class="flex items-center justify-center">
                <div class="text-center p-2">
                    <button id="volver" type="button"
                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-600">
                        Volver
                    </button>
                </div>
                <button id="guardarBtn"
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-600"
                    type="button">
                    Guardar
                </button>
            </div>
        </form>
    </div>

    <script>
        $('#combo_box_facultad').change(function() {
            var selectedFacultad = $(this).val();
            var deptSelect = $('#combo_box_programa');
            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");
                }
            });
        });

        function validateInput(input, type) {
            var reg;
            var errorMsg;
            if (type === "year") {
                reg = /^[0-9]{0,4}$/;
                errorMsg = "Solo se permiten hasta 4 dígitos.";
            } else if (type === "semester") {
                reg = /^[1-9]{1}$/;
                errorMsg = "Solo puede ingresar 1 digito.";
            }
            if (!reg.test(input.value)) {
                swal("Error", errorMsg, "error");
                input.value = type === "year" ? input.value.slice(0, -1) : "";
            }
        }
        document.addEventListener('DOMContentLoaded', function() {
            const data = JSON.parse(localStorage.getItem('data'));

            if (data) {
                document.getElementById('codigo-plan').value = data['cod-prog'];
                document.getElementById('nombre-plan').value = data['nombre'];
                document.getElementById('combo_box_programa').value = data['cod-dep'];
                document.getElementById('ano').value = data['anio-inicio'];
                document.getElementById('semestre').value = data['sem-inicio'];
                document.getElementById('combo_box_tipo').value = data['tipo'];

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

                // Realiza la solicitud AJAX para obtener la facultad
                var selectedDep = data['cod-dep'];
                var facSelect = $('#combo_box_facultad');
                var facUrl = '{{ route('get_facultad') }}'; // Asegúrate de reemplazar esto con la ruta correcta
                $.ajax({
                    type: 'post',
                    url: facUrl,
                    data: {
                        d_dep: selectedDep,
                        _token: '{{ csrf_token() }}' // Agrega el token CSRF aquí
                    },
                    success: function(data) {
                        // Establece la facultad seleccionada en el select
                        facSelect.val(data.datos.o_datos[0].FAC_COD);
                    },
                    error: function(error) {
                        swal("Error", "Ha ocurrido un error con la solicitud realizada", "error");
                    }
                });
            }
        });

        $(document).ready(function() {
            $("#guardarBtn").click(function(e) {
                e.preventDefault();

                // Obtener valores de los campos del formulario
                var codigoProg = $('#codigo-plan').val();
                var nombreProg = $('#nombre-plan').val();
                var departamento = $('#combo_box_programa').val();
                var tipoProg = $('#combo_box_tipo').val();
                var ano = $('#ano').val();
                var semestre = $('#semestre').val();
                var estado = 'PENDIENTE';
                var token = '{{ csrf_token() }}';


                // Validar los campos del formulario
                let invalidFields = [];
                if (!codigoProg || codigoProg.length > 15) {
                    $("#codigo_plan").css("border-color", "red");
                    invalidFields.push("Código del plan");
                } else {
                    $("#codigo_plan").css("border-color", "");
                }
                if (!nombreProg) {
                    $("#nombre-plan").css("border-color", "red");
                    invalidFields.push("Nombre del plan");
                } else {
                    $("#nombre-plan").css("border-color", "");
                }
                if (!departamento) {
                    $("#combo_box_programa").css("border-color", "red");
                    invalidFields.push("Departamento");
                } else {
                    $("#combo_box_programa").css("border-color", "");
                }
                if (!tipoProg) {
                    $("#combo_box_tipo").css("border-color", "red");
                    invalidFields.push("Tipo de programa");
                } else {
                    $("#combo_box_tipo").css("border-color", "");
                }
                if (!ano) {
                    $("#ano").css("border-color", "red");
                    invalidFields.push("Año");
                } else {
                    $("#ano").css("border-color", "");
                }
                if (!semestre || semestre.length > 1) {
                    $("#semestre").css("border-color", "red");
                    invalidFields.push("Semestre");
                } else {
                    $("#semestre").css("border-color", "");
                }

                // Mostrar mensaje de advertencia si hay campos inválidos
                if (invalidFields.length > 0) {
                    let errorMessage = "Los siguientes campos poseen un error: " + invalidFields.join(
                        ", ") + "\n Están vacíos o no cumplen con el formato requerido";
                    swal("Advertencia", errorMessage, "warning");
                    return;
                }

                // Datos a enviar en la solicitud AJAX
                var data = {
                    codigoProg: codigoProg,
                    nombreProg: nombreProg,
                    departamento: departamento,
                    tipoProg: tipoProg,
                    ano: ano,
                    semestre: semestre,
                    estado: estado,
                    _token: token
                };

                // Realizar la solicitud AJAX
                $.ajax({
                    type: 'POST',
                    url: '{{ route('programa.guardar') }}',
                    data: data,
                    success: function(response) {
                        if (response.success) {
                            swal("Éxito", response.message, "success");
                            setTimeout(function() {
                                window.location.href = '/';
                            }, 3000);
                        } else {
                            swal("Error", response.error, "error");
                            // Aquí puedes manejar el error de otra manera si es necesario
                        }
                    },
                    error: function(xhr, status, error) {
                        swal("Error", response.error, "error");
                        // Aquí puedes manejar los errores de red u otros errores de solicitud
                    }
                });
            });
        });
        //Funcion volver a la vista principal
        $('#volver').on('click', function(event) {
            event.preventDefault();
            window.location.href = '/';
        });
    </script>
@endsection