@if ($modal_mensajeversion)
    <div class="modal fade" id="exampleModalCenter" data-backdrop="static" data-keyboard="false" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Actualización <strong>SGA - Versión 1.2 </strong> </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-center">
                        <h6 class="time"><strong class="text-info">DETALLES DE LAS NUEVAS INCORPORACIONES AL
                                SISTEMA</strong></h6>
                    </div>
                    <div id="DZ_W_TimeLine11" class="widget-timeline style-3 ">
                        <ul class="timeline-active style-1">
                            <li class="d-flex align-items-baseline timeline-list">
                                <div class="dz-media">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect x="2" y="2" width="12" height="12" rx="6" fill="white"
                                            stroke="#4D44B5" stroke-width="4" />
                                    </svg>
                                </div>
                                <div class="panel">
                                    <h6 class="time"><strong>EDITAR PERFIL</strong></h6>
                                    <span class="d-block text-justify pl-3"><b>- </b>Se añadió una nueva interfaz para
                                        editar los datos personales de cada tipo
                                        de usuario (Administrador, Docente y Estudiante).</span>
                                </div>
                            </li>
                            <li class="d-flex align-items-baseline timeline-list">
                                <div class="dz-media">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect x="2" y="2" width="12" height="12" rx="6" fill="white"
                                            stroke="#4D44B5" stroke-width="4" />
                                    </svg>
                                </div>
                                <div class="panel">
                                    <h6 class="time"><strong>MÓDULO INSTITUCIÓN</strong></h6>
                                    <span class="d-block text-justify pl-3"><b>- SUBMÓDULO PROGRAMAS:</b> Se agregó el
                                        catálogo de programas para inserción automática.</span>
                                </div>
                            </li>
                            <li class="d-flex align-items-baseline timeline-list">
                                <div class="dz-media">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect x="2" y="2" width="12" height="12" rx="6" fill="white"
                                            stroke="#4D44B5" stroke-width="4" />
                                    </svg>
                                </div>
                                <div class="panel">
                                    <h6 class="time"><strong>MÓDULO TRÁMITE DOCUMENTARIO</strong></h6>
                                    <span class="d-block text-justify pl-3"><b>- </b> Se agregó la vista de contactos
                                        del encargado
                                        del IESTP <br>
                                        <b>- </b> Función de añadir documento que muestre los requisitos y precios.
                                    </span>
                                </div>
                            </li>
                            <li class="d-flex align-items-baseline timeline-list">
                                <div class="dz-media">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect x="2" y="2" width="12" height="12" rx="6" fill="white"
                                            stroke="#4D44B5" stroke-width="4" />
                                    </svg>
                                </div>
                                <div class="panel">
                                    <h6 class="time"><strong>MÓDULO DE NOTAS</strong></h6>
                                    <span class="d-block text-justify pl-3"><b>- SUBMÓDULO GESTIÓN DE NOTAS:</b> Se
                                        agregó la función de
                                        activar y desactivar la edición de las notas para los docentes.</span>
                                </div>
                            </li>
                            <li class="d-flex align-items-baseline timeline-list">
                                <div class="dz-media">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect x="2" y="2" width="12" height="12" rx="6" fill="white"
                                            stroke="#4D44B5" stroke-width="4" />
                                    </svg>
                                </div>
                                <div class="panel">
                                    <h6 class="time"><strong>MÓDULO SEGUIMIENTO AL EGRESADO</strong></h6>
                                    <span class="d-block text-justify pl-3"><b>- </b>Nueva función para realizar
                                        reportes de la cantidad de egresados
                                        por programa y plan.</span>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-sm" id="btn_closet_modal">No volver a ver</button>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="idmodalactive" value="1">
    <script>
        //v

        $(document).ready(function() {
            setTimeout(function() {

                $('#exampleModalCenter').modal('show');

            }, 1750);

            var modal = document.getElementById('exampleModalCenter');
            modal.addEventListener('click', function(event) {
                event.stopPropagation();
            });

            // Deshabilitar cierre del modal con la tecla "Esc"
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape') {
                    event.preventDefault(); // Evita el comportamiento por defecto (cerrar el modal)
                }
            });


            $("#btn_closet_modal").on("click", function(event) {
                event.preventDefault();

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    },
                    type: "POST",
                    url: '/user/notificacion/update/versiones',
                    dataType: 'json',
                    success: function(response) {
                        if (response.status === true) {
                            toastr.info(response.mensaje, "Éxito!", {
                                positionClass: "toast-bottom-right",
                                timeOut: 1500,
                                closeButton: !0,
                                debug: !1,
                                newestOnTop: !0,
                                progressBar: !0,
                                preventDuplicates: !0,
                                onclick: null,
                                showDuration: "300",
                                hideDuration: "1000",
                                extendedTimeOut: "1000",
                                showEasing: "swing",
                                hideEasing: "linear",
                                showMethod: "fadeIn",
                                hideMethod: "fadeOut",
                                tapToDismiss: !1
                            });
                            $('#exampleModalCenter').modal('hide');
                        } else {
                            toastr.error(response.mensaje, "Error!", {
                                positionClass: "toast-bottom-right",
                                timeOut: 1500,
                                closeButton: !0,
                                debug: !1,
                                newestOnTop: !0,
                                progressBar: !0,
                                preventDuplicates: !0,
                                onclick: null,
                                showDuration: "300",
                                hideDuration: "1000",
                                extendedTimeOut: "1000",
                                showEasing: "swing",
                                hideEasing: "linear",
                                showMethod: "fadeIn",
                                hideMethod: "fadeOut",
                                tapToDismiss: !1
                            });
                        }
                    },
                    error: function(error) {
                        console.log("Error", error);
                    },
                });
                $('#exampleModalCenter').modal('hide');
            });
        });
    </script>
@endif