@extends('layout')
@section('content')
    <div class="container mx-auto py-0 flex flex-col md:flex-row justify-between mt-8">
        <a href="{{ route('get.programa') }}"
            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
        </a>
        <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 Programa -->
            Crear Plan de Estudio
        </button>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-2 mt-5">
        <!-- Card 1 -->
        <div class="bg-yellow-500 text-black p-3 rounded-xl shadow-lg transform transition ">
            <h2 class="text-2xl font-bold mb-2 text-center">Pendientes</h2>
            <div class="overflow-x-auto mt-3">
                <table id="texample" class="table-fixed min-w-full leading-normal rounded-lg overflow-hidden shadow-lg">
                    <thead>
                        <tr class="bg-gray-700 text-white uppercase text-sm leading-normal">
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Estado</th>
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Plan</th>
                            <th class="w-2/6 px-5 py-3 text-left font-semibold">Nombre</th>
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Tipo</th>
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Acción</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <!-- Aquí se llenarán los datos dinámicamente -->
                    </tbody>
                </table>

            </div>
        </div>
        <!-- Card 2 -->
        <div class="bg-green-400 text-black p-3 rounded-xl shadow-lg transform transition ">
            <h2 class="text-2xl font-bold mb-2 text-center">Autorizados</h2>
            <div class="overflow-x-auto mt-3">
                <table id="autorizadotable"
                    class="table-fixed min-w-full leading-normal rounded-lg overflow-hidden shadow-lg">
                    <thead>
                        <tr class="bg-gray-700 text-white uppercase text-sm leading-normal">
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Estado</th>
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Plan</th>
                            <th class="w-2/6 px-5 py-3 text-left font-semibold">Nombre</th>
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Tipo</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <!-- Aquí se llenarán los datos dinámicamente -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Card 3 -->
        <div
            class="bg-red-600 text-black p-3 rounded-xl shadow-lg transform transition hover:scale-100 duration-300 ease-in-out">
            <h2 class="text-2xl font-bold mb-2 text-center">Rechazados</h2>
            <div class="overflow-x-auto mt-3">
                <table id="tablecancelated"
                    class="table-fixed min-w-full leading-normal rounded-lg overflow-hidden shadow-lg">
                    <thead>
                        <tr class="bg-gray-700 text-white uppercase text-sm leading-normal">
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Estado</th>
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Plan</th>
                            <th class="w-2/6 px-5 py-3 text-left font-semibold">Nombre</th>
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Tipo</th>
                            <th class="w-1/6 px-5 py-3 text-left font-semibold">Acción</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <!-- Aquí se llenarán los datos dinámicamente -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="planEstudioModal"
        class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
        <div id="planEstudioModalOverlay" class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
        <div id="planEstudioModalContainer"
            class="modal-container bg-white w-11/12 md:max-w-6xl mx-auto rounded-lg shadow-2xl z-50 overflow-y-auto">
            <!-- Header -->
            <div class="modal-header bg-slate-600 px-6 py-4 text-white flex justify-between items-center">
                <h2 class="text-2xl font-bold">Autorizar</h2>
                <div id="closex" class="modal-close cursor-pointer z-50">
                    <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" 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>
            <!-- Body -->
            <div class="modal-body my-5 px-6 overflow-y-auto max-h-96">
                <table class="min-w-full divide-y divide-gray-300">
                    <tbody class="bg-white divide-y divide-gray-300">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Codigo de Plan</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planCod"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Nombre de Plan</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planNombre"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Año del Plan</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planAnio"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Plan Anterior</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planAnterior"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Codigo de Carrera
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planCarCod"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Nombre Resolucion</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planNomResolucion"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Fecha Resolucion
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planFecResolucion"></td>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Codigo DEMRE</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planCodDemre"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Codigo SIES</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planCodSies"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Comentarios</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planComentario"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Codigo de
                                Departamento</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planDepCod"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Duracion</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planDuracion"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">PLAN_ESP_CARACT
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planEspCaract"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Codigo Facultad
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planFacCod"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">PLAN_GRADO_COD</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planGradoCod"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Jornada</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planJorCod"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Control</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planControl"></td>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Nombre Corto</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planNomCorto"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Periodo de inicio
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planPeriodoIni"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Tipo de Plan</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planTipo"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Tipo de Ingreso
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planTipoIng"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Tipo de Modalidad
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planTipoMod"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Tipo de Programa
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planTipoProg"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Ultima Version</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planUltVersion"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Version del Plan
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planVersion"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Vigencia</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planVigencia"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Estado</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="planESTADO"></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Footer -->
            <div class="modal-footer bg-gray-50 px-6 py-4 flex justify-end">
                <button id="cancelPlanEstudio"
                    class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-2">Rechazar</button>
                <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
                    id="autorizarPlanEstudio-btn">Autorizar</button>
            </div>
        </div>
    </div>
    <div id="programaModal"
        class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
        <div id="programaModalOverlay" class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
        <div id="programaModalContainer"
            class="modal-container bg-white w-11/12 md:max-w-6xl mx-auto rounded-lg shadow-2xl z-50 overflow-y-auto">

            <!-- Header -->
            <div class="modal-header bg-slate-600 px-6 py-4 text-white flex justify-between items-center">
                <h2 class="text-2xl font-bold">Autorizar</h2>
                <div id="closeprog" class="modal-close cursor-pointer z-50">
                    <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18"
                        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>

            <!-- Body -->
            <div class="modal-body my-5 px-6 overflow-y-auto max-h-96">
                <table class="min-w-full divide-y divide-gray-200">
                    <tbody class="bg-white divide-y divide-gray-300">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Codigo proceso</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="programacodProg"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Nombre Proceso</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="programaName"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Tipo Proceso</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="programatipProg"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Codigo de
                                Departamento</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="programacodDep"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Año inicio</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="programaanioInicio">
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Semestre</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="programasemInicio"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Comentarios</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="progComentarios"></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-bold">Estado</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" id="progEstado"></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Footer -->
            <div class="modal-footer bg-gray-50 px-6 py-4 flex justify-end">
                <button id="cancelPrograma"
                    class="focus:outline-none px-3 py-2 bg-red-700 rounded-lg text-sm text-white hover:bg-red-800 transition duration-200 ease-in-out transform hover:scale-105">Rechazar</button>
                <button
                    class="focus:outline-none px-3 py-2 bg-blue-500 ml-2 rounded-lg text-sm text-white hover:bg-blue-600 transition duration-200 ease-in-out transform hover:scale-105"
                    id="autorizarPrograma-btn">Autorizar</button>
            </div>
        </div>
    </div>
    <div id="infoModal" class="hidden fixed z-10 inset-0 overflow-y-auto animate__animated animate__fadeIn">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-800 opacity-75"></div>
            </div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div
                class="inline-block align-middle bg-white rounded-lg text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full animate__animated animate__bounceIn">

                <!-- Header -->
                <div class="bg-slate-600  px-4 py-5 border-b  sm:px-6">
                    <div class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                            class="h-6 w-6 text-white">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                        <h3 class="text-lg leading-6 font-medium text-white ml-4">
                            Cancelado
                        </h3>
                    </div>
                </div>

                <!-- Body -->
                <div class="bg-white px-6 py-4 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modaltittleContent">
                        Información del Programa
                    </h3>
                    <div class="mt-2" id="modalInfoContent">
                        <!-- Aquí se añadirá la información dinámicamente -->
                    </div>
                </div>

                <!-- Footer -->
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button"
                        class="closeModal mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('autorizarPrograma-btn').addEventListener('click', function() {
            swal({
                title: "¿Estás seguro?",
                text: "¿Estás seguro de que quieres autorizar este programa?",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((result) => {
                if (result) {
                    const progCod = document.getElementById('programacodProg').textContent;
                    const progNom = document.getElementById('programaName').textContent;
                    const progDep = Number(document.getElementById('programacodDep').textContent);
                    const progTipo = Number(document.getElementById('programatipProg').textContent);
                    console.log('Datos del programa:', progCod, progNom, progDep, progTipo);
                    var token = '{{ csrf_token() }}';
                    console.log('Token CSRF:', token);
                    $.ajax({
                        url: "{{ route('programa.updatePrograma') }}",
                        method: 'POST',
                        data: {
                            progcod: progCod,
                            prognom: progNom,
                            progdep: progDep,
                            progtipo: progTipo,
                            estado: 'A',
                            _token: token
                        },
                        success: function(data) {
                            swal({
                                title: '¡Éxito!',
                                text: 'La operación fue autorizada con éxito',
                                icon: 'success',
                                button: 'OK'
                            }).then((value) => {
                                location.reload();
                            });
                        },
                        error: function(error) {
                            console.log('Error recibido:', error);
                            swal(
                                'Error!',
                                'Hubo un error al autorizar el programa.',
                                'error'
                            )
                        }
                    });
                }
            })
        });
        document.getElementById('cancelPrograma').addEventListener('click', function(e) {
            e.preventDefault();
            const progCod = document.getElementById('programacodProg').textContent;
            const progNom = document.getElementById('programaName').textContent;
            const progDep = Number(document.getElementById('programacodDep').textContent);
            const progTipo = Number(document.getElementById('programatipProg').textContent);
            var token = '{{ csrf_token() }}';
            swal({
                    title: '¿Estás seguro de que quieres cancelar el plan de estudio?',
                    text: "¡No podrás revertir esto!",
                    icon: 'warning',
                    buttons: true,
                    dangerMode: true,
                    content: {
                        element: "input",
                        attributes: {
                            placeholder: "Escribe un comentario aquí...",
                            type: "text",
                        },
                    },
                })
                .then((comentario) => {
                    if (comentario) {
                        // Aquí puedes agregar el código para manejar la cancelación del plan de estudio y el comentario
                        $.ajax({
                            url: "{{ route('programa.updatePrograma') }}",
                            method: 'POST',
                            data: {
                                progcod: progCod,
                                prognom: progNom,
                                progdep: progDep,
                                progtipo: progTipo,
                                comentario: comentario,
                                estado: 'C',
                                _token: token
                            },
                            success: function(response) {
                                swal({
                                    title: '¡Cancelado!',
                                    text: 'El plan de estudio ha sido cancelado.',
                                    icon: 'success',
                                    button: 'OK'
                                }).then((value) => {
                                    location.reload();
                                });
                            },
                            error: function(error) {
                                swal(
                                    '¡Error!',
                                    'Ocurrió un error al cancelar el plan de estudio.',
                                    'error'
                                )
                            }
                        });
                    }
                });
        });
        document.getElementById('autorizarPlanEstudio-btn').addEventListener('click', function() {
            const planAnio = document.getElementById('planAnio').textContent;
            const planCod = document.getElementById('planCod').textContent;
            const planVersion = document.getElementById('planVersion').textContent;
            const planEstado = document.getElementById('planESTADO').textContent;
            const planComentario = document.getElementById('planComentario').textContent;
            var token = '{{ csrf_token() }}';
            swal({
                    title: "¿Estás seguro?",
                    text: "¿Estás seguro de que quieres autorizar este plan de estudio?",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        // Primera solicitud AJAX para actualizar la otra tabla
                        $.ajax({
                            url: "{{ route('plan.updateEstudio') }}",
                            method: 'POST',
                            data: {
                                plancod: planCod,
                                anio: planAnio,
                                version: planVersion,
                                comentario: planComentario,
                                estado: 'A',
                                _token: token
                            },
                            success: function(data) {
                                console.log('Datos recibidos de la primera solicitud:', data);
                                const planFacCod = document.getElementById('planFacCod')
                                    .textContent;
                                const planDepCod = document.getElementById('planDepCod')
                                    .textContent;
                                const planCod = document.getElementById('planCod')
                                    .textContent;

                                const planAnio = document.getElementById('planAnio').textContent;
                                const planNombre = document.getElementById('planNombre')
                                    .textContent;
                                const planGradoCod = document.getElementById('planGradoCod')
                                    .textContent;
                                const planUltVersion = document.getElementById('planUltVersion')
                                    .textContent;
                                let date = new Date();
                                let year = date.getFullYear();
                                let month = String(date.getMonth() + 1).padStart(2, '0');
                                let day = String(date.getDate()).padStart(2, '0');
                                let hour = String(date.getHours()).padStart(2, '0');
                                let minute = String(date.getMinutes()).padStart(2, '0');
                                let second = String(date.getSeconds()).padStart(2, '0');
                                var usuario = "{{ session('USR_ID') }}";
                                let effdate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
                                // Repite este paso para cada dato del modal que quieras enviar
                                var token = '{{ csrf_token() }}';
                                // Realiza la solicitud AJAX con jQuery
                                $.ajax({
                                    url: "{{ route('plan.peaplosoft') }}",
                                    method: 'POST',
                                    data: {
                                        id: 'USACH',
                                        facultad: planFacCod,
                                        deptid: 'USACH',
                                        centrocosto: planDepCod.padStart(3, '0'),
                                        codcarre: planCod,
                                        effdate: effdate,
                                        effstatus: 'A',
                                        carrera: planNombre,
                                        gradoacad: planGradoCod,
                                        carrcontrol: '1',
                                        tipocarrera: planDepCod === '150' ? 'U' : 'S',
                                        plantilla: '',
                                        ultimamod: effdate,
                                        ultimamodfuser: usuario,
                                        numdoc: '0',
                                        fechadoc: effdate,
                                        _token: token
                                    },
                                    success: function(data) {
                                        swal({
                                            title: '¡Éxito!',
                                            text: 'La operación fue autorizada con éxito',
                                            icon: 'success',
                                            button: 'OK'
                                        }).then((value) => {
                                            location.reload();
                                        });
                                    },
                                    error: function(jqXHR, textStatus, errorThrown) {
                                        swal('¡Error!',
                                            'Ocurrió un error al autorizar la operación',
                                            'error');
                                    }
                                });
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                swal('¡Error!', 'Ocurrió un error al actualizar la otra tabla',
                                    'error');
                            }
                        });
                    }
                });
        });
        document.getElementById('cancelPlanEstudio').addEventListener('click', function(e) {
            e.preventDefault();
            const planAnio = document.getElementById('planAnio').textContent;
            const planCod = document.getElementById('planCod').textContent;
            const planVersion = document.getElementById('planVersion').textContent;
            const planEstado = document.getElementById('planESTADO').textContent;
            var token = '{{ csrf_token() }}';
            swal({
                    title: '¿Estás seguro de que quieres cancelar el plan de estudio?',
                    text: "¡No podrás revertir esto!",
                    icon: 'warning',
                    buttons: true,
                    dangerMode: true,
                    content: {
                        element: "input",
                        attributes: {
                            placeholder: "Escribe un comentario aquí...",
                            type: "text",
                        },
                    },
                })
                .then((comentario) => {
                    if (comentario) {
                        // Aquí puedes agregar el código para manejar la cancelación del plan de estudio y el comentario
                        $.ajax({
                            url: "{{ route('plan.updateEstudio') }}",
                            method: 'POST',
                            data: {
                                plancod: planCod,
                                anio: planAnio,
                                version: planVersion,
                                comentario: comentario, // Agrega el comentario aquí
                                estado: 'C',
                                _token: token
                            },
                            success: function(response) {
                                swal({
                                    title: '¡Cancelado!',
                                    text: 'El plan de estudio ha sido cancelado.',
                                    icon: 'success',
                                    button: 'OK'
                                }).then((value) => {
                                    location.reload();
                                });
                            },
                            error: function(error) {
                                swal(
                                    '¡Error!',
                                    'Ocurrió un error al cancelar el plan de estudio.',
                                    'error'
                                )
                            }
                        });
                    }
                });
        });

        $('#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) {
                    console.log(error);
                }
            });
        });
        document.getElementById('closex').addEventListener('click', function() {
            const planModal = document.getElementById('planEstudioModal');
            planModal.classList.add('opacity-0', 'pointer-events-none');
            planModal.classList.remove('opacity-100', 'pointer-events-auto');
        });

        document.getElementById('closeprog').addEventListener('click', function() {
            const planModal = document.getElementById('programaModal');
            planModal.classList.add('opacity-0', 'pointer-events-none');
            planModal.classList.remove('opacity-100', 'pointer-events-auto');
        });

        document.addEventListener('DOMContentLoaded', function() {
            const tbody = document.querySelector('#texample tbody');
            const autorizarBtn = document.getElementById('autorizar-btn');
            const ingresarBtn = document.getElementById('ingresar-btn');

            // Hacer las solicitudes AJAX
            Promise.all([
                    fetch('{{ route('dato.pendiente') }}').then(response => response.json()),
                    fetch(`{{ route('dato.estado_est', ['estado' => 'PENDIENTE']) }}`).then(response =>
                        response
                        .json())
                ])
                .then(([data1, data2]) => {
                    console.log('Datos recibidos:', data1, data2);
                    tbody.innerHTML = '';
                    data2.datos.forEach(dato => {
                        const fila = document.createElement('tr');
                        fila.classList.add('bg-white'); // Agrega esta línea

                        const celdaEstado = document.createElement('td');
                        celdaEstado.classList.add('px-4', 'py-2');
                        celdaEstado.innerHTML =
                            `<div class="flex items-center justify-center"><i class="fas fa-exclamation text-m text-yellow-500"></i></div>`;
                        fila.appendChild(celdaEstado);

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

                        const celdaNombre = document.createElement('td');
                        celdaNombre.classList.add('px-4', 'py-2');
                        celdaNombre.innerHTML =
                            `<p class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">${dato.PLAN_NOM_CORTO}</p>`;
                        fila.appendChild(celdaNombre);

                        const celdaTipo = document.createElement('td');
                        celdaTipo.classList.add('px-4', 'py-2');
                        celdaTipo.innerHTML =
                            `<p class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Plan De Estudio</p>`;
                        fila.appendChild(celdaTipo);

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


                        tbody.appendChild(fila);
                    });
                    data1.datos.forEach(dato => {
                        const fila = document.createElement('tr');
                        fila.classList.add('bg-white'); // Agrega esta línea

                        const celdaEstado = document.createElement('td');
                        celdaEstado.classList.add('px-4', 'py-2');
                        celdaEstado.innerHTML =
                            `<div class="flex items-center justify-center"><i class="fas fa-exclamation text-m text-yellow-500"></i></div>`;
                        fila.appendChild(celdaEstado);

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

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

                        const celdaTipo = document.createElement('td');
                        celdaTipo.classList.add('px-4', 'py-2');
                        celdaTipo.innerHTML =
                            `<p class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Programa</p>`;
                        fila.appendChild(celdaTipo);

                        const celdaAccion = document.createElement('td');
                        celdaAccion.classList.add('px-4', 'py-2', 'flex', 'justify-center');
                        celdaAccion.innerHTML =
                            `<button class="revisar-btn bg-blue-500 text-xs hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110" type="button" data-nombre="${dato.PROG_NOMBRE}" data-cod-prog="${dato.PROG_COD}" data-tip-prog="${dato.PROG_TIPO}" data-cod-dep="${dato.PROG_DEP_COD}"data-anio-inicio="${dato.PROG_ANIO_INICIO}"data-sem-inicio="${dato.PROG_SEM_INICIO}" data-estado="${dato.PROG_ESTADO}" data-comentarios="${dato.PROG_COMENTARIOS}">Revisar</button>`;
                        fila.appendChild(celdaAccion);

                        tbody.appendChild(fila);
                    });
                })
                .catch(error => console.error('Error al cargar datos:', error));

            // Agrega un evento de clic al cuerpo de la tabla
            tbody.addEventListener('click', function(event) {
                // Asegúrate de que el evento fue disparado por un botón
                if (event.target.matches('.revisar-btn')) {
                    // Obtiene el botón que disparó el evento
                    const button = event.target;
                    // Obtiene la fila que contiene el botón
                    const fila = button.parentElement.parentElement;
                    const celdaTipo = fila.children[3];
                    const tipProg = celdaTipo.textContent.trim();

                    // Verifica el tipo de programa y abre el modal correspondiente
                    if (tipProg === 'Programa') {
                        const modal = document.getElementById('programaModal');
                        const nombre = button.dataset.nombre;
                        const codProg = button.dataset.codProg;
                        const tipProg = button.dataset.tipProg;
                        const codDep = button.dataset.codDep;
                        const anioInicio = button.dataset.anioInicio;
                        const semInicio = button.dataset.semInicio;
                        const comentarios = button.dataset.comentarios;
                        const estado = button.dataset.estado;

                        // Cargar los datos en los campos del modal
                        document.getElementById('programaName').textContent = nombre;
                        document.getElementById('programacodProg').textContent = codProg;
                        document.getElementById('programatipProg').textContent = tipProg;
                        document.getElementById('programacodDep').textContent = codDep;
                        document.getElementById('programaanioInicio').textContent = anioInicio;
                        document.getElementById('programasemInicio').textContent = semInicio;
                        document.getElementById('progComentarios').textContent = comentarios;
                        document.getElementById('progEstado').textContent = estado;

                        // Mostrar el modal
                        modal.classList.remove('opacity-0', 'pointer-events-none');
                        modal.classList.add('opacity-100', 'pointer-events-auto');
                    } else if (tipProg === 'Plan De Estudio') {
                        // Obtiene el modal
                        const planModal = document.getElementById('planEstudioModal');
                        // Obtiene todos los datos del botón
                        const nombre = button.dataset.nombre;
                        const codProg = button.dataset.codProg;
                        const tipProg = button.dataset.tipProg;
                        const codDep = button.dataset.codDep;
                        const anioInicio = button.dataset.anioInicio;
                        const semInicio = button.dataset.semInicio;
                        const anterior = button.dataset.anterior;
                        const carCod = button.dataset.carCod;
                        const codDemre = button.dataset.codDemre;
                        let codSies = button.dataset.codSies;
                        const comentario = button.dataset.comentario;
                        const depCod = button.dataset.depCod;
                        const duracion = button.dataset.duracion;
                        const espCaract = button.dataset.espCaract;
                        const facCod = button.dataset.facCod;
                        const gradoCod = button.dataset.gradoCod;
                        const jorCod = button.dataset.jorCod;
                        const nomCorto = button.dataset.nomCorto;
                        const periodoIni = button.dataset.periodoIni;
                        const tipo = button.dataset.tipo;
                        const tipoIng = button.dataset.tipoIng;
                        const tipoMod = button.dataset.tipoMod;
                        const tipoProg = button.dataset.tipoProg;
                        const ultVersion = button.dataset.ultVersion;
                        const version = button.dataset.version;
                        const vigencia = button.dataset.vigencia;
                        const estado = button.dataset.estado;
                        const resolucion = button.dataset.resolucion;
                        const fechares = button.dataset.fechares;
                        let control = button.dataset.control;

                        if (codSies === 'null') {
                            codSies = '0';
                        }

                        if (control === '1') {
                            control = 'USACH';
                        } else if (control === '2') {
                            control = 'SDT';
                        }
                        // Cargar los datos en los campos del modal
                        document.getElementById('planAnio').textContent = anioInicio;
                        document.getElementById('planCod').textContent = codProg;
                        document.getElementById('planNombre').textContent = nombre;
                        document.getElementById('planAnterior').textContent = anterior;
                        document.getElementById('planCarCod').textContent = carCod;
                        document.getElementById('planCodDemre').textContent = codDemre;
                        document.getElementById('planCodSies').textContent = codSies;
                        document.getElementById('planComentario').textContent = comentario;
                        document.getElementById('planDepCod').textContent = depCod;
                        document.getElementById('planDuracion').textContent = duracion;
                        document.getElementById('planEspCaract').textContent = espCaract;
                        document.getElementById('planFacCod').textContent = facCod;
                        document.getElementById('planGradoCod').textContent = gradoCod;
                        document.getElementById('planJorCod').textContent = jorCod;
                        document.getElementById('planNomCorto').textContent = nomCorto;
                        document.getElementById('planPeriodoIni').textContent = periodoIni;
                        document.getElementById('planTipo').textContent = tipo;
                        document.getElementById('planTipoIng').textContent = tipoIng;
                        document.getElementById('planTipoMod').textContent = tipoMod;
                        document.getElementById('planTipoProg').textContent = tipoProg;
                        document.getElementById('planUltVersion').textContent = ultVersion ||
                            'N/A'; // Si PLAN_ULT_VERSION es null, muestra 'N/A'
                        document.getElementById('planVersion').textContent = version;
                        document.getElementById('planVigencia').textContent = vigencia;
                        document.getElementById('planNomResolucion').textContent = resolucion;
                        document.getElementById('planFecResolucion').textContent = fechares;
                        document.getElementById('planControl').textContent = control;
                        document.getElementById('planESTADO').textContent = estado;

                        planModal.classList.remove('opacity-0', 'pointer-events-none');
                        planModal.classList.add('opacity-100', 'pointer-events-auto');
                    }
                }
            });

            const tbody2 = document.querySelector('#autorizadotable tbody');

            // Limpiar el contenido actual del tbody
            tbody2.innerHTML = '';

            // Función para crear una fila
            function crearFila(dato, tipo) {
                const fila = document.createElement('tr');
                fila.classList.add('border-b', 'border-gray-200', 'bg-gray-100', 'text-sm');

                // Celda de estado
                const celdaEstado = document.createElement('td');
                celdaEstado.innerHTML = `
                    <div class="flex items-center justify-center">
                        <i class="fas fa-check text-green-500"></i>
                    </div>`;
                fila.appendChild(celdaEstado);

                // Celda de plan o programa
                const celdaPlan = document.createElement('td');
                celdaPlan.innerHTML = `
                    <p class="px-5 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                        ${tipo === 'PROGRAMA' ? dato.PROG_COD : dato.PLAN_COD}
                    </p>`;
                fila.appendChild(celdaPlan);

                // Celda de nombre
                const celdaNombre = document.createElement('td');
                celdaNombre.innerHTML = `
                    <p class="px-5 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                        ${tipo === 'PROGRAMA' ? dato.PROG_NOMBRE : dato.PLAN_NOMBRE}
                    </p>`;
                fila.appendChild(celdaNombre);

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

                return fila;
            }

            // Hacer las solicitudes AJAX
            Promise.all([
                    fetch('{{ route('dato.autorizado') }}').then(response => response.json()),
                    fetch(`{{ route('dato.estado_est', ['estado' => 'AUTORIZO']) }}`).then(response => response
                        .json())
                ])
                .then(([data1, data2]) => {
                    // Agregar filas para los datos de la primera solicitud
                    data1.datos.forEach(dato => {
                        const fila = crearFila(dato, 'PROGRAMA');
                        tbody2.appendChild(fila);
                    });

                    // Agregar filas para los datos de la segunda solicitud
                    data2.datos.forEach(dato => {
                        const fila = crearFila(dato, 'PLAN DE ESTUDIO');
                        tbody2.appendChild(fila);
                    });
                })
                .catch(error => {
                    console.error('Error al cargar datos:', error);
                    tbody2.innerHTML = `
                        <tr>
                            <td colspan="4" class="text-center text-red-500 py-3">
                                Error al cargar los datos. Intente nuevamente más tarde.
                            </td>
                        </tr>`;
                });

            const tbodyCancelado = document.querySelector('#tablecancelated tbody');
            // Hacer las solicitudes AJAX
            tbodyCancelado.innerHTML = '';
            Promise.all([
                    fetch('{{ route('dato.cancelado') }}').then(response => response.json()),
                    fetch(`{{ route('dato.estado_est', ['estado' => 'CANCELADO']) }}`).then(response =>
                        response.json())
                ])
                .then(([data1, data2]) => {
                    // Iterar sobre los datos de la primera solicitud y agregar filas
                    data1.datos.forEach(dato => {
                        const fila = document.createElement('tr');
                        fila.classList.add('px-5', 'py-3', 'min-w-full', 'leading-normal',
                            'rounded-lg',
                            'border-gray-20', 'overflow-hidden', 'shadow-lg', 'bg-gray-100',
                            'text-sm');
                        // class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
                        const celdaEstado = document.createElement('td');
                        // Aquí puedes agregar la lógica para mostrar el ícono de estado correspondiente
                        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.classList.add('px-4', 'py-2');
                        celdaPlan.innerHTML =
                            `<p class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider" id="codigo_prog">${dato.PROG_COD}</p>`;
                        fila.appendChild(celdaPlan);

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

                        const celdaTipo = document.createElement('td');
                        celdaTipo.classList.add('px-4', 'py-2');
                        celdaTipo.innerHTML =
                            `<p class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">PROGRAMA</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}" data-cod-prog="${dato.PROG_COD}" data-tip-prog="${dato.PROG_TIPO}" data-cod-dep="${dato.PROG_DEP_COD}" data-anio-inicio="${dato.PROG_ANIO_INICIO}" data-sem-inicio="${dato.PROG_SEM_INICIO}" data-comentario="${dato.PROG_COMENTARIOS}">Revisar</button>`;
                        fila.appendChild(celdaAccion);
                        tbodyCancelado.appendChild(fila);
                    });

                    // Iterar sobre los datos de la segunda solicitud y agregar filas
                    data2.datos.forEach(dato => {
                        const fila = document.createElement('tr');
                        fila.classList.add('px-5', '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');
                        // Aquí puedes agregar la lógica para mostrar el ícono de estado correspondiente
                        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.classList.add('px-4', 'py-2');
                        celdaPlan.innerHTML =
                            `<p class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider" id="codigo_prog">${dato.PLAN_COD}</p>`;
                        fila.appendChild(celdaPlan);

                        const celdaNombre = document.createElement('td');
                        celdaNombre.classList.add('px-4', 'py-2');
                        celdaNombre.innerHTML =
                            `<p class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">${dato.PLAN_NOMBRE}</p>`;
                        fila.appendChild(celdaNombre);
                        const celdaTipo = document.createElement('td');
                        celdaTipo.classList.add('px-4', 'py-2');
                        celdaTipo.innerHTML =
                            `<p class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Plan De Estudio</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.PLAN_NOMBRE}" data-cod-prog="${dato.PLAN_COD}" data-tip-prog=Plan data-cod-dep="${dato.PLAN_DEP_COD}" data-comentario="${dato.PLAN_COMENTARIO}">Revisar</button>`;
                        fila.appendChild(celdaAccion);
                        // fila.classList.add('min-w-full',' leading-normal', 'rounded-lg' ,'overflow-hidden', 'shadow-lg');
                        tbodyCancelado.appendChild(fila);
                    });
                })
                .catch(error => console.error('Error al cargar datos:', error));
            document.addEventListener('click', function(e) {
                if (e.target && e.target.id === 'cancelView') {
                    const comentarios = e.target.getAttribute('data-comentario');
                    const nombre = e.target.getAttribute('data-nombre');

                    let tipo = e.target.getAttribute('data-tip-prog');
                    if (tipo === "Plan") {
                        tipo = "PLAN DE ESTUDIO";
                    } else if (tipo === "0") {
                        tipo = "PROGRAMA";
                    }

                    if (comentarios === 'null') {
                        mensajeComentario = 'No sea registrado comentarios .';
                    }

                    document.getElementById('modaltittleContent').innerHTML =
                        `<div class="text-center">
                <h2 class="text-xl font-bold text-gray-900">${nombre}</h2>
                <p class="text-lg text-indigo-600">${tipo}</p>
             </div>`;
                    document.getElementById('modalInfoContent').innerHTML =
                        `<div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-900">Razón del rechazo:</h3>
                <p class="text-gray-600 mt-2">${mensajeComentario}</p>
             </div>`;

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

                    // Añadir evento para cerrar el modal
                    document.querySelector('.closeModal').addEventListener('click', function() {
                        document.getElementById('infoModal').classList.add('hidden');
                    });
                }
            });
        });
    </script>
@endsection