@extends('layout')
@section('content')
    <div class="container mx-auto py-6 px-4 flex flex-col sm:flex-row justify-between mt-4 space-y-3 sm:space-y-0">
        <button id="crearPrograma"
            class="bg-gray-600 hover:bg-gray-800 text-white font-semibold py-4 px-4 rounded-full transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 w-full md:w-1/3 md:mr-2 mb-2 md:mb-0 shadow-lg text-center">
            Crear Programa
        </button>
        <button id="crearPlanEstudio"
            class="bg-gray-600 hover:bg-gray-800 text-white font-semibold py-4 px-4 rounded-full transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 w-full md:w-1/3 md:mr-2 mb-2 md:mb-0 shadow-lg text-center">
            Crear Plan de Estudio
        </button>
    </div>
    <div class="container mx-auto py-3 px-4 flex flex-col sm:flex-row">
        <!-- Columna 1: Buscador y Tabla -->
        <div class="w-full sm:w-2/3 pr-2 mb-4 sm:mb-0">
            <!-- Select2 -->
            <form id="searchForm">
                <div class="flex flex-col sm:flex-row items-center w-full py-6">
                    @csrf
                    <div class="mb-6 w-full md:w-1/2 px-3">
                        <label for="codigo_plan" class="block mb-2 text-sm text-gray-700 dark:text-gray-700">Ingresar Nombre
                            o
                            Codigo</label>
                        <input type="text" name="buscar" id="codigo_plan" placeholder="Ingresar Nombre o Codigo"
                            class="w-full px-3 py-2 placeholder-gray-700 border border-blue-600 rounded-md focus:outline-none focus:ring focus:ring-blue-200 focus:border-blue-300 bg-white">
                    </div>
                    <button type="submit"
                        class="bg-emerald-500 hover:bg-emerald-700 text-white font-bold py-2 px-4 rounded w-full sm:w-auto">
                        Buscar
                    </button>
            </form>
        </div>
        <div class="overflow-y-auto max-h-96 border border-gray-300 rounded-lg shadow-md">
            <table id="tablebuscar" class="table-fixed w-full rounded-lg overflow-hidden">
                <thead class="bg-gray-700 text-white uppercase text-sm leading-normal">
                    <tr>
                        <th class="py-3 px-6 bg-emerald-500 text-center">Codigo</th>
                        <th class="py-3 px-6 bg-emerald-500 text-center">Nombre</th>
                        <th class="py-3 px-6 bg-emerald-500 text-center">Plan de Estudio</th>
                        <th class="py-3 px-6 bg-emerald-500 text-center">Identificador</th>
                        <th class="py-3 px-6 bg-emerald-500 text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody class="text-gray-600 text-sm font-light">
                    @if (empty($data))
                        <tr>
                            <td colspan="5" class="py-4 px-6 text-center">No se encontraron resultados. Por favor,
                                realice una búsqueda.</td>
                        </tr>
                    @else
                        <!-- Aquí se agregarán dinámicamente los resultados -->
                    @endif
                </tbody>
            </table>
        </div>
    </div>

    <!-- Columna 2: Tarjeta de Cancelados -->
    <div class="w-full sm:w-1/2 sm:pl-5 mt-1 sm:mt-1">
        <div
            class="bg-red-600 text-white p-6 rounded-lg shadow-lg transform transition hover:scale-105 duration-300 ease-in-out">
            <h2 class="text-2xl font-bold mb-2 text-center">Rechazados</h2>
            <table id="tablecancelated" class="table-fixed w-full bg-white rounded-md shadow-sm overflow-hidden">
                <thead>
                    <tr class="bg-red-700 text-white uppercase text-sm ">
                        <th class="py-3 px-6 text-left">Estado</th>
                        <th class="py-3 px-6 text-left">codigo</th>
                        <th class="py-3 px-6 text-left">Nombre</th>
                        <th class="py-3 px-6 text-left">Tipo</th>
                        <th class="py-3 px-6 text-right">Acciones</th>
                    </tr>
                </thead>
                <tbody class="text-gray-600 text-sm font-light">
                    <tr class="border-b border-gray-200 hover:bg-gray-100">
                        <td class="py-3 px-6 text-left"><i class="fas fa-times text-red-500"></i></td>
                        <td class="py-3 px-6 text-right">
                            <button id="revisarModal"
                                class="bg-cyan-700 hover:bg-cyan-900 text-white font-bold py-2 px-4 rounded transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"
                                data-toggle="modal" data-target="#MyModal3">
                                Revisar
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="modalEdit"
        class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
        <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
        <div class="modal-container bg-white w-8/12 md:max-w-3xl mx-auto rounded-lg shadow-lg z-50 overflow-y-auto">
            <div class="modal-content py-6 text-left px-8">
                <!-- Title -->
                <div class="flex justify-between items-center pb-4">
                    <p class="text-2xl font-bold">Modificar</p>
                    <div class="closeModal cursor-pointer z-50">
                        <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="16"
                            height="18" viewBox="0 0 18 18">
                            <path
                                d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
                            </path>
                        </svg>
                    </div>
                </div>
                <form id="updateProgramaForm" method="POST" action="{{ route('programa.updateProgramaEdit') }}">
                    @csrf
                    <div class="mb-6">
                        <label for="modifiedName" class="block text-sm font-medium text-gray-700">Ingrese Nuevo
                            Nombre</label>
                        <input type="text" id="modifiedName" name="prognom"
                            class="mt-1 p-3 focus:ring-blue-500 focus:border-blue-500 border-2 border-blue-400 hover:border-blue-600 block w-full sm:text-sm rounded-md">
                    </div>
                    <div class="mb-6">
                        <label for="modifiedcodDep" class="block text-sm font-medium text-gray-700">Ingrese Nuevo Codigo de
                            Departamento</label>
                        <input type="text" id="modifiedcodDep" name="progdep"
                            class="mt-1 p-3 focus:ring-blue-500 focus:border-blue-500 border-2 border-blue-400 hover:border-blue-600 block w-full sm:text-sm rounded-md">
                    </div>
                    <input type="hidden" id="progcod" name="progcod">
                    <!-- Footer -->
                    <div class="flex justify-end pt-4">
                        <button type="button"
                            class="closeModal focus:outline-none px-4 bg-slate-700 p-2 rounded-lg text-white hover:bg-slate-500">Cancelar</button>
                        <button type="submit"
                            class="focus:outline-none px-4 bg-emerald-500 hover:bg-emerald-700 p-2 ml-3 rounded-lg text-white">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="planEditModal"
        class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
        <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
        <div
            class="modal-container bg-white w-10/12 md:max-w-5xl mx-auto rounded-lg shadow-lg z-50 overflow-y-auto max-h-screen">
            <div class="modal-content py-6 text-left px-8">
                <!-- Title -->
                <div class="flex justify-between items-center pb-4">
                    <p class="text-2xl font-bold">Editar Plan de Estudio</p>
                    <div class="closePlanModal cursor-pointer z-50">
                        <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="16"
                            height="18" viewBox="0 0 18 18">
                            <path
                                d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
                            </path>
                        </svg>
                    </div>
                </div>
                <form id="updatePlanForm" method="POST" action="{{ route('plan.updateEstudio') }}">
                    @csrf
                    <div class="mb-6">
                        <label for="planCodigo" class="block text-sm font-medium text-gray-700">Código</label>
                        <input type="text" id="planCodigo" name="plancod" readonly
                            class="mt-1 p-3 focus:ring-blue-500 focus:border-blue-500 border-2 border-blue-400 hover:border-blue-600 block w-full sm:text-sm rounded-md">
                    </div>
                    <div class="mb-6">
                        <label for="planNombre" class="block text-sm font-medium text-gray-700">Nombre</label>
                        <input type="text" id="planNombre" name="nombre"
                            class="mt-1 p-3 focus:ring-blue-500 focus:border-blue-500 border-2 border-blue-400 hover:border-blue-600 block w-full sm:text-sm rounded-md">
                    </div>
                    <div class="mb-6">
                        <label for="planDepCod" class="block text-sm font-medium text-gray-700">Código de
                            Departamento</label>
                        <input type="text" id="planDepCod" name="depCod"
                            class="mt-1 p-3 focus:ring-blue-500 focus:border-blue-500 border-2 border-blue-400 hover:border-blue-600 block w-full sm:text-sm rounded-md">
                    </div>
                    <div class="mb-6">
                        <label for="planTipoProg" class="block text-sm font-medium text-gray-700">Tipo de Programa</label>
                        <input type="text" id="planTipoProg" name="tipoProg"
                            class="mt-1 p-3 focus:ring-blue-500 focus:border-blue-500 border-2 border-blue-400 hover:border-blue-600 block w-full sm:text-sm rounded-md">
                    </div>
                    <div class="mb-6">
                        <label for="planAno" class="block text-sm font-medium text-gray-700">Plan año</label>
                        <input type="text" id="planAno" name="anoCod"
                            class="mt-1 p-3 focus:ring-blue-500 focus:border-blue-500 border-2 border-blue-400 hover:border-blue-600 block w-full sm:text-sm rounded-md">
                    </div>
                    <div class="mb-6">
                        <label for="planVersion" class="block text-sm font-medium text-gray-700">Plan Version</label>
                        <input type="text" id="planVersion" name="versionCod"
                            class="mt-1 p-3 focus:ring-blue-500 focus:border-blue-500 border-2 border-blue-400 hover:border-blue-600 block w-full sm:text-sm rounded-md">
                    </div>
                    <div class="mb-6">
                        <label for="codDemre" class="block text-sm font-medium text-gray-700">Codigo Demre</label>
                        <input type="text" id="codDemre" name="codemre"
                            class="mt-1 p-3 focus:ring-blue-500 focus:border-blue-500 border-2 border-blue-400 hover:border-blue-600 block w-full sm:text-sm rounded-md">
                    </div>
                    <div class="mb-6">
                        <label for="planPeriodoIni" class="block text-sm font-medium text-gray-700">Periodo
                            Inicial</label>
                        <input type="text" id="planPeriodoIni" name="periodoIni"
                            class="mt-1 p-3 focus:ring-blue-500 focus:border-blue-500 border-2 border-blue-400 hover:border-blue-600 block w-full sm:text-sm rounded-md">
                    </div>
                    <!-- Footer -->
                    <div
                        class="container mx-auto py-6 px-4 flex flex-col sm:flex-row justify-between mt-4 space-y-3 sm:space-y-0">
                        <button id="crearPrograma"
                            class="bg-gray-600 text-white font-semibold py-4 px-4 rounded-full transition duration-500 ease-in-out w-full md:w-1/3 md:mr-2 mb-2 md:mb-0 shadow-lg text-center"
                            disabled>
                            En desarrollo
                        </button>
                        <button id="crearPlanEstudio"
                            class="bg-gray-600 text-white font-semibold py-4 px-4 rounded-full transition duration-500 ease-in-out w-full md:w-1/3 md:mr-2 mb-2 md:mb-0 shadow-lg text-center"
                            disabled>
                            En desarrollo
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        function showPlanModal(codigo, nombre, depCod, tipoProg, anio, version, codDemre, periodoIni) {
            // Rellenar los campos del formulario
            document.getElementById('planCodigo').value = codigo;
            document.getElementById('planNombre').value = nombre;
            document.getElementById('planDepCod').value = depCod;
            document.getElementById('planTipoProg').value = tipoProg;
            document.getElementById('planAno').value = anio;
            document.getElementById('planVersion').value = version;
            document.getElementById('codDemre').value = codDemre;
            document.getElementById('planPeriodoIni').value = periodoIni;
            // Mostrar el modal
            const modal = document.getElementById('planEditModal');
            modal.classList.remove('opacity-0', 'pointer-events-none');
            modal.classList.add('opacity-100', 'pointer-events-auto');
        }

        // Cerrar el modal
        document.querySelectorAll('.closePlanModal').forEach(element => {
            element.addEventListener('click', function() {
                const modal = document.getElementById('planEditModal');
                modal.classList.add('opacity-0', 'pointer-events-none');
                modal.classList.remove('opacity-100', 'pointer-events-auto');
            });
        });
        $('#crearPlanEstudio').click(function(e) {
            e.preventDefault();
            var token = '{{ csrf_token() }}';
            // Realizar la solicitud AJAX
            $.ajax({
                type: 'get',
                url: "{{ route('get.facultad') }}",
                data: {
                    _token: token
                },
                success: function(data) {
                    window.location.href = "{{ route('get.facultad') }}";
                },
                error: function(error) {
                    swal("Error", "Ha ocurrido un error con la solicitud realizada", "error");
                }
            });
        });

        $('#crearPrograma').click(function(e) {
            e.preventDefault();
            var token = '{{ csrf_token() }}';
            $.ajax({
                type: 'get',
                url: "{{ route('get.programa') }}",
                data: {
                    _token: token
                },
                success: function(data) {
                    window.location.href = "{{ route('get.programa') }}";
                },
                error: function(error) {
                    swal("Error", "Ha ocurrido un error con la solicitud realizada", "error");
                }
            });
        })

        $('#revisarModal').click(function(e) {
            e.preventDefault();
            let buscar = $("#codigo_plan").val();
            var token = '{{ csrf_token() }}';
            var datos = {
                buscar: buscar,
                _token: token
            }
            $.ajax({
                url: "{{ route('plan.buscar') }}",
                type: "POST",
                data: datos,
                success: function(response) {
                    $('#modality').removeClass('opacity-0 pointer-events-none').addClass(
                        'opacity-100 pointer-events-auto');
                    $('#modality1').removeClass('opacity-0 pointer-events-none').addClass('opacity-50');
                    $('#modality2').removeClass('opacity-0 pointer-events-none').addClass(
                        'opacity-100 pointer-events-auto');
                }
            });
        })

        $('#aut-btn').click(function(e) {
            e.preventDefault();
            let buscar = $("#codigo_plan").val();
            var token = '{{ csrf_token() }}';
            var datos = {
                buscar: buscar,
                _token: token
            }
            $.ajax({
                url: "{{ route('plan.buscar') }}",
                type: "POST",
                data: datos,
                success: function(response) {
                    $('#modality').removeClass('opacity-0 pointer-events-none').addClass(
                        'opacity-100 pointer-events-auto');
                    $('#modality1').removeClass('opacity-0 pointer-events-none').addClass('opacity-50');
                    $('#modality2').removeClass('opacity-0 pointer-events-none').addClass(
                        'opacity-100 pointer-events-auto');
                }
            });
        })

        function showModal(name) {
            const modal = document.querySelector('.modal');
            const parts = name.split(' - ');
            const modifiedNameInput = document.getElementById('modifiedName');
            const modifieddepInput = document.getElementById('modifiedcodDep');
            const progcodInput = document.getElementById('progcod');

            // Set the input field's value to the name from the table row
            modifiedNameInput.value = parts[1];
            modifieddepInput.value = parts[3];
            progcodInput.value = parts[0];

            // Show the modal
            modal.classList.remove('opacity-0', 'pointer-events-none');
            modal.classList.add('opacity-100', 'pointer-events-auto');

            document.getElementById('modalEdit').classList.remove('hidden');

            // Añadir evento para cerrar el modal
            document.querySelectorAll('.closeModal').forEach(element => {
                element.addEventListener('click', function() {
                    document.getElementById('modalEdit').classList.add('hidden');
                });
            });
        }

        $('#searchForm').on('submit', function(event) {
            event.preventDefault();
            let buscar = $("#codigo_plan").val();
            var token = '{{ csrf_token() }}';
            var datos = {
                buscar: buscar,
                _token: token
            }
            $.ajax({
                url: "{{ route('plan.buscar') }}",
                type: "POST",
                data: datos,
                success: function(response) {
                    // Clear existing table rows
                    $('#tablebuscar tbody').empty();
                    // Append the new table rows
                    $('#tablebuscar tbody').append(response);
                }
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const tbodyCancelado = document.querySelector('#tablecancelated tbody');

            Promise.all([
                    fetch('{{ route('dato.cancelado') }}').then(response => response.json()),
                    fetch(`{{ route('dato.estado_est', ['estado' => 'CANCELADO']) }}`).then(response =>
                        response.json())
                ])
                .then(([data1, data2]) => {
                    tbodyCancelado.innerHTML = '';

                    const createRow = (dato, tipo) => {
                        const fila = document.createElement('tr');
                        fila.classList.add('px-6', 'py-3', 'min-w-full', 'leading-normal', 'rounded-lg',
                            'border-gray-20', 'overflow-hidden', 'shadow-lg', 'bg-gray-100', 'text-sm');

                        const celdaEstado = document.createElement('td');
                        celdaEstado.classList.add('p-2');
                        celdaEstado.innerHTML =
                            `<div class="flex items-center justify-center"><i class="fas fa-times text-red-500"></i></div>`;
                        fila.appendChild(celdaEstado);

                        const celdaPlan = document.createElement('td');
                        celdaPlan.innerHTML =
                            `<p class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">${dato.PROG_COD || dato.PLAN_COD}</p>`;
                        fila.appendChild(celdaPlan);

                        const celdaNombre = document.createElement('td');
                        celdaNombre.innerHTML =
                            `<p class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">${dato.PROG_NOMBRE || dato.PLAN_NOMBRE}</p>`;
                        fila.appendChild(celdaNombre);

                        const celdaTipo = document.createElement('td');
                        celdaTipo.innerHTML =
                            `<p class="text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">${tipo}</p>`;
                        fila.appendChild(celdaTipo);

                        const celdaAccion = document.createElement('td');
                        celdaAccion.classList.add('p-2');
                        celdaAccion.innerHTML =
                            `<button id="cancelView" class="mx-auto bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110" type="button"
                                data-nombre="${dato.PROG_NOMBRE || dato.PLAN_NOMBRE}"
                                data-cod-prog="${dato.PROG_COD || dato.PLAN_COD}"
                                data-tip-prog="${tipo}"
                                data-tipo="${dato.PROG_TIPO || dato.PLAN_TIPO}"
                                data-cod-dep="${dato.PROG_DEP_COD || dato.PLAN_DEP_COD}"
                                data-anio-inicio="${dato.PROG_ANIO_INICIO || dato.PLAN_ANIO}"
                                data-sem-inicio="${dato.PROG_SEM_INICIO}"
                                data-plan-periodo-ini="${dato.PLAN_PERIODO_INI}"
                                data-comentario="${dato.PROG_COMENTARIOS || dato.PLAN_COMENTARIO}"
                                data-plan-cod-demre="${dato.PLAN_COD_DEMRE}"
                                data-plan-resolucion="${dato.PLAN_RESOLUCION}"
                                data-plan-fechares="${dato.PLAN_FECHARES}"
                                data-plan-cod-sies="${dato.PLAN_COD_SIES}"
                                data-plan-nom-corto="${dato.PLAN_NOM_CORTO}"
                                data-plan-jor-cod="${dato.PLAN_JOR_COD}"
                                data-plan-control="${dato.PLAN_CONTROL}"
                                data-plan-fac-cod="${dato.PLAN_FAC_COD}"
                                data-plan-duracion="${dato.PLAN_DURACION}"
                                data-plan-car-cod="${dato.PLAN_CAR_COD}"
                                data-plan-tipo-ing="${dato.PLAN_TIPO_ING}"
                                data-plan-tipo-mod="${dato.PLAN_TIPO_MOD}"
                                data-plan-esp-caract="${dato.PLAN_ESP_CARACT}"
                                data-plan-grado-cod="${dato.PLAN_GRADO_COD}"
                                data-plan-version="${dato.PLAN_VERSION}"
                                data-plan-ult-version="${dato.PLAN_ULT_VERSION}"
                                data-plan-anterior="${dato.PLAN_ANTERIOR}"
                                data-plan-vigencia="${dato.PLAN_VIGENCIA}"
                                data-plan-tipo-prog="${dato.PLAN_TIPO_PROG}"
                                data-plan-estado="${dato.PLAN_ESTADO}"
                                data-plan-cod="${dato.PLAN_COD || ''}"
                            >Revisar</button>`;
                        fila.appendChild(celdaAccion);
                        tbodyCancelado.appendChild(fila);
                    };

                    data1.datos.forEach(dato => createRow(dato, 'PROGRAMA'));
                    data2.datos.forEach(dato => createRow(dato, 'Plan De Estudio'));
                })
                .catch(error => console.error('Error al cargar datos:', error));

            document.addEventListener('click', function(e) {
                if (e.target && e.target.id === 'cancelView') {
                    const dataAttributes = [
                        'cod-prog', 'nombre', 'cod-dep', 'tip-prog', 'tipo', 'anio-inicio',
                        'sem-inicio', 'estado', 'comentario', 'plan-cod-demre', 'plan-resolucion',
                        'plan-fechares', 'plan-control', 'plan-version',
                        'plan-cod-sies', 'plan-nom-corto', 'plan-periodo-ini', 'plan-jor-cod',
                        'plan-fac-cod', 'plan-duracion', 'plan-car-cod', 'plan-tipo-ing',
                        'plan-tipo-mod', 'plan-esp-caract', 'plan-grado-cod', 'plan-ult-version',
                        'plan-anterior', 'plan-vigencia', 'plan-tipo-prog', 'plan-cod'
                    ];
                    let data = {};

                    dataAttributes.forEach(attr => {
                        data[attr] = e.target.getAttribute(`data-${attr}`);
                    });

                    // Depuración: Verificar si el atributo `data-plan-cod` está presente
                    console.log('Datos capturados:', data);

                    // Guardar los datos en el almacenamiento local
                    localStorage.setItem('data', JSON.stringify(data));

                    if (data['tip-prog'] === 'PROGRAMA') {
                        window.location.href = '/update_programa';
                    } else {
                        window.location.href = '/update_plan_estudio';
                    }
                }
            });
        });
    </script>
@endsection