@extends('layout')
@section('content')
    <div class="overflow-x-auto">
        <div class="pt-14 flex items-center justify-center font-sans overflow-hidden">
            <div class="w-full md:w-3/4 lg:w-2/3">
                <h1 class="text-4xl font-bold text-center mb-4 text-gray-600">Autorizados para finanzas</h1>
                <div id="tabla" class="bg-gray-100 shadow-lg rounded-lg px-6 pt-6 pb-4 mb-4 flex flex-col my-4">
                    <div class="overflow-auto">
                        <table id="mytabla" class="min-w-max w-full table-auto">
                            <thead>
                                <tr class="bg-emerald-600 text-white uppercase text-md leading-normal">
                                    <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">COMENTARIO</th>
                                    <th class="py-3 px-6 text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="autorizadosTableBody" class="text-gray-600 text-sm font-light">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <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 h-auto md:w-10/12 lg:w-9/12 mx-auto my-auto rounded-lg shadow-xl z-50 ">
            <!-- Header -->
            <div class="modal-header bg-slate-600 px-6 py-4 text-white flex justify-between items-center">
                <h2 class="text-xl font-bold">Trasformacion a Finanzas</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-4 px-8 overflow-y-auto max-h-96 flex justify-between space-x-4">
                <!-- Columna izquierda -->
                <div class="w-1/2 pr-3 overflow-y-auto">
                    <h3 class="text-xl font-bold text-gray-700 mb-4">Información de Plan de Estudio</h3>
                    <div class="bg-yellow-100 shadow overflow-visible sm:rounded-lg">
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Codigo de Plan
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planCod">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Nombre de Plan
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planNombre">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Año de Plan
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planAnio">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Plan Anterior
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planAnterior">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Codigo Carrera
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planCarCod">
                            </p>
                        </div>
                        {{-- <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Codigo CNED
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planCodCned">
                            </p>
                        </div> --}}
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Codigo DEMRE
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planCodDemre">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Codigo SIES
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planCodSies">
                            </p>
                        </div>

                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Comentario
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planComentario">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Codigo Departamento
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planDepCod">
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Duracion en Semestres
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planDuracion">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Especial Caracteristica
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planEspCaract">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Facultad
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planFacCod">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Grado
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planGradoCod">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Jornada
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planJorCod">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Nombre Corto
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planNomCorto">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Periodo Inicio
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planPeriodoIni">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Tipo de Plan
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planTipo">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Tipo de Ingreso
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planTipoIng">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Tipo de Modalidad
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planTipoMod">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Tipo de Programa
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planTipoProg">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Ultima Version
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planUltVersion">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Version del plan
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planVersion">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Vigencia
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planVigencia">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Estado
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planESTADO">
                            </p>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col items-center justify-center space-y-12">
                    <i class="fas fa-arrow-right text-2xl text-green-600"></i>
                    <i class="fas fa-arrow-right text-2xl text-green-600"></i>
                    <i class="fas fa-arrow-right text-2xl text-green-600"></i>
                </div>
                <!-- Columna derecha -->
                <div class="w-1/2 pl-3 overflow-y-auto">
                    <h3 class="text-xl font-bold text-gray-700 mb-4">Información Enviada a Sistema Finanzas</h3>
                    <div class="bg-green-200 shadow overflow-visible sm:rounded-lg">
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Id
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="id_Finanza">
                                USACH
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Facultad
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planFac">

                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Id de departamento
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planDeptocod">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Codigo de carrera
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planCodigoCarrera">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Fecha de efectividad
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="effdate">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Effstatus
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="effstatus">
                                A
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Nombre Carrera
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planNombreFi">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Grado Academico
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="PlanGradoAca">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Carrera Control
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="Carrcontrol">
                                1
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Tipo Carrera
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planTipoCarreraFin">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Plantilla
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planPlantillafin">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Ultima Modificacion
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planUltimaModfin">
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Usuario
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planUsuariofin">
                                {{ session('USR_ID') }}
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                N° Documento
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planNumerofin">
                                0
                            </p>
                        </div>
                        <div class="px-4 py-2 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Fecha Documento
                            </h3>
                            <p class="mt-1 max-w-2xl text-sm text-gray-500" id="planfechadocfin">
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Botones -->
            <div class="flex justify-end mx-2 mb-3">
                <!-- Botón Rechazar -->
                <button type="button" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-2">
                    Rechazar
                </button>
                <!-- Botón Autorizar -->
                <button type="button" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded ">
                    Autorizar
                </button>
            </div>
        </div>
    </div>
    <script>
        // Llamar a la función para obtener y mostrar datos al cargar la página
        document.addEventListener('DOMContentLoaded', fetchAndDisplayAutorizados);

        function fetchAndDisplayAutorizados() {
            const tbodyAutorizados = document.getElementById('autorizadosTableBody');
            // Limpiar el contenido actual del tbody
            tbodyAutorizados.innerHTML = '';
            // Hacer la solicitud AJAX
            fetch(`{{ route('dato.estado_est', ['estado' => 'AUTORIZO']) }}`)
                .then(response => response.json())
                .then(data => {
                    // Iterar sobre los datos y agregar filas
                    data.datos.forEach(dato => {
                        const fila = document.createElement('tr');
                        fila.classList.add('border-b', 'border-gray-200', 'hover:bg-blue-100');
                        fila.innerHTML = `
                            <td class="py-3 px-6 text-left">${dato.PLAN_ESTADO}</td>
                            <td class="py-3 px-6 text-left">${dato.PLAN_COD}</td>
                            <td class="py-3 px-6 text-left">${dato.PLAN_NOMBRE}</td>
                            <td class="py-3 px-6 text-left">${dato.PLAN_COMENTARIO}</td>
                            <td class="py-3 px-6 text-center">
                                <button onclick='openModal(${JSON.stringify(dato).replace(/"/g, "&quot;")})' class="bg-emerald-500 text-white px-4 py-2 border rounded-md hover:bg-white hover:border-indigo-500 hover:text-black transition-colors duration-300">
                                    Revisar
                                </button>
                            </td>
                        `;
                        tbodyAutorizados.appendChild(fila);
                    });
                })
                .catch(error => console.error('Error al cargar datos:', error));
        }

        function openModal(dato) {
            const planmodal = document.getElementById("planEstudioModal");
            planmodal.classList.remove('opacity-0', 'pointer-events-none');
            planmodal.classList.add('opacity-100', 'pointer-events-auto');
            /* Datos de la tabla de la izquierda */
            document.getElementById('planCod').innerText = dato.PLAN_COD;
            document.getElementById('planNombre').innerText = dato.PLAN_NOMBRE;
            document.getElementById('planAnio').innerText = dato.PLAN_ANIO;
            document.getElementById('planAnterior').innerText = dato.PLAN_ANTERIOR;
            document.getElementById('planCarCod').innerText = dato.PLAN_CAR_COD;
            document.getElementById('planCodCned').innerText = dato.PLAN_COD_CNED;
            document.getElementById('planCodDemre').innerText = dato.PLAN_COD_DEMRE;
            document.getElementById('planCodSies').innerText = dato.PLAN_COD_SIES;
            document.getElementById('planComentario').innerText = dato.PLAN_COMENTARIO;
            document.getElementById('planDepCod').innerText = dato.PLAN_DEP_COD;
            document.getElementById('planDuracion').innerText = dato.PLAN_DURACION;
            document.getElementById('planEspCaract').innerText = dato.PLAN_ESP_CARACT;
            document.getElementById('planFacCod').innerText = dato.PLAN_FAC_COD;
            document.getElementById('planGradoCod').innerText = dato.PLAN_GRADO_COD;
            document.getElementById('planJorCod').innerText = dato.PLAN_JOR_COD;
            document.getElementById('planNomCorto').innerText = dato.PLAN_NOM_CORTO;
            document.getElementById('planPeriodoIni').innerText = dato.PLAN_PERIODO_INI;
            document.getElementById('planTipo').innerText = dato.PLAN_TIPO;
            document.getElementById('planTipoIng').innerText = dato.PLAN_TIPO_ING;
            document.getElementById('planTipoMod').innerText = dato.PLAN_TIPO_MOD;
            document.getElementById('planTipoProg').innerText = dato.PLAN_TIPO_PROG;
            document.getElementById('planUltVersion').innerText = dato.PLAN_ULT_VERSION;
            document.getElementById('planVersion').innerText = dato.PLAN_VERSION;
            document.getElementById('planVigencia').innerText = dato.PLAN_VIGENCIA;
            document.getElementById('planESTADO').innerText = dato.PLAN_ESTADO;

            /* Datos de la tabla de la derecha */
            document.getElementById('planDeptocod').innerText = dato.PLAN_DEP_COD.padStart(3, '0');
            document.getElementById('planCodigoCarrera').innerText = dato.PLAN_COD;
            document.getElementById('planFac').innerText = dato.PLAN_FAC_COD;
            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');
            let effdate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
            document.getElementById('effdate').innerText = effdate;
            document.getElementById('planNombreFi').innerText = dato.PLAN_NOMBRE;
            document.getElementById('PlanGradoAca').innerText = dato.PLAN_GRADO_COD;
            document.getElementById('planTipoCarreraFin').innerText = dato.PLAN_DEP_COD === '150' ? 'U' : 'S';
            document.getElementById('planUltimaModfin').innerText = effdate;
            document.getElementById('planfechadocfin').innerText = effdate;
        }

        function closeModal() {
            // Ocultar el modal
            const modal = document.getElementById("planEstudioModal");
            modal.classList.remove('opacity-100', 'pointer-events-auto');
            modal.classList.add('opacity-0', 'pointer-events-none');
        }
        // Cerrar el modal cuando se hace clic en el overlay o en el botón de cierre
        document.getElementById('planEstudioModalOverlay').addEventListener('click', closeModal);
        document.getElementById('closex').addEventListener('click', closeModal);
    </script>
@endsection