
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="https://www.globales.com/uploads/webmobile/LOGO_GLOBALES_2023-06.png" type="image/png">
<title>Globales | Formaciones</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <!-- Font Awesome para los íconos -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- jQuery Timepicker Addon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<style>

    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 8%;
        background: #fff;
        box-shadow: 0 4px 25px -22px black;
        z-index: 20;
    }

    .header-content {
        max-width: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 20;
    }

    .header-content img {
    width: 7vh;
    position: absolute;
    left: 1.5vh;
    margin-top: 0.5vh;
    }

    .header-content h1 {
        margin-top: 1.8vh;
        position: relative;
        left: 11vh;
        width: 100vh;
    }

    .header-content h1 b {
        color: #1c57a4;
    }

    .header-content a {
        margin-top: 3vh;
        position: relative;
        width: 20vh;
        font-weight: bold;
        color: #333333;
        text-decoration: none;
        font-size: larger;
    }

    .header-content a:hover {
        color: #1c57a4;
    }

    body {
        background-color: #ffffcc; /* Fondo amarillo suave */
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        position: relative; /* Para posicionar el botón */
        min-height: 100vh; /* Para que el cuerpo de la página tenga al menos el tamaño de la ventana */
        overflow: hidden; /* Ocultar la barra de desplazamiento horizontal */
    }
    .de {
        font-size: 16px;
        color: #666666; /* Color del texto gris */
        margin-bottom: 10px;
    }
    .mensaje {
        background-color: #ffffff; /* Fondo blanco para el mensaje */
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
        margin-bottom: 20px;
        margin-top: 10px;
        padding: 20px;
    }
    .asunto {
        font-size: 18px;
        font-weight: bold;
        color: #333333; /* Color del texto oscuro */
        margin-bottom: 10px;
    }
    .hora {
        font-size: 14px;
        color: #666666; /* Color del texto gris */
        margin-bottom: 10px;
    }
    .cuerpo {
        font-size: 16px;
        color: #333333; /* Color del texto oscuro */
    }
    .boton-agregar {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #093B59; /* Color del botón */
        color: #ffffff; /* Color del texto del botón */
        width: 50px;
        height: 50px;
        border-radius: 50%; /* Para hacer el botón circular */
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
    }
    .boton-agregar i {
        font-size: 24px;
        line-height: 50px; /* Centra el ícono verticalmente */
    }

    .eliminar-mensaje {
        position: fixed;
        margin-left: 93%;
        background-color: #da2c2c; /* Color del botón */
        color: #ffffff; /* Color del texto del botón */
        width: 50px;
        height: 50px;
        margin-top: 1%;
        border-radius: 90%; /* Para hacer el botón circular */
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
    }
    .eliminar-mensaje:hover{
        background-color: #d66464; /* Color del botón */
    }
    .eliminar-mensaje i {
        font-size: 26px;
        line-height: 25px; /* Centra el ícono verticalmente */
    }

    #formulario-agregar {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
    }
    #formulario-agregar input[type="text"],
    #formulario-agregar textarea {
        width: 100%;
        margin-bottom: 10px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-sizing: border-box;
    }

    .btn-cancelar {
        background-color: #dd3232;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-weight: bold;
        border-radius: 3px;
    }

    .btn-cancelar:focus {
        opacity: 90%;
    }

    .btn-cancelar:hover {
        opacity: 90%;
    }

    .btn-formacion {
        background-color: #093B59;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-weight: bold;
        border-radius: 3px;
    }

    .btn-formacion:focus {
        opacity: 90%;
    }

    .btn-formacion:hover {
        opacity: 90%;
    }

    .daypicker {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 5px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .timepicker {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 3px;
        height: 100%;
        padding: 5px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .timepicker-dropdown {
        display: none;
        position: absolute;
        background-color: white;
        border: 1px solid #ddd;
        max-height: 200px;
        overflow-y: auto;
        width: 100%;
        text-align: center;  
        z-index: 1000;
    }

    .timepicker-option {
        padding: 5px;
        cursor: pointer;
    }

    .timepicker-option:hover {
        background-color: #f0f0f0;
    }

    .dropdown {
            margin-top: 1.5vh;
            position: relative;
            right: 15vh;
            font-size: larger;
            color: #093B59;
            display: inline-block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #ffffff;
        min-width: 200px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .dropdown-content a {
        color: #093B59;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #ddd;
    }
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
    .dropdown:hover .dropdown-content {
        display: block;
    }
    .dropdown:hover .dropbtn {
        background-color: #e1e1e1;
        cursor: pointer;
    }
    .dropbtn {
        background-color: #ffffff;
        color: #093B59;
        font-size: larger;
        height: 5vh;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <header>
        <div class="header-content">
            <img src="https://www.globales.com/uploads/webmobile/LOGO_GLOBALES_2023-06.png" alt="">
            <h1>Globales | <b>Formaciones</b></h1>
            <div class="dropdown">
                <button class="dropbtn">Ver Grabaciones</button>
                <div class="dropdown-content">
                    <a href="https://hglobales.sharepoint.com/:f:/s/FORMACIONES/EuDKV9ATUzREjQciTeJH1XsBSPiVxmNHdybt19OSrveIQQ?e=U4FMM3">Administración</a>
                    <a href="https://hglobales.sharepoint.com/:f:/s/FORMACIONES/EsO4v5ebK_RGi5DZN-ofLwMB9W9U5yJZ77qN40jakp7WQQ?e=HwYtI5">Recepción</a>
                    <a href="https://hglobales.sharepoint.com/:f:/s/FORMACIONES/EsLCnUEm6EZPgGGpHsZJOmgB6_jz1DyHMzB8XngfdQ-N-A?e=gc4Q6o">Economato</a>
                </div>
            </div>
        </div>
    </header>
    <div id="formulario-agregar">
        <p style="margin:0; margin-bottom: 5px;font-weight: bold;">De:</p>
        <input type="text" id="de" placeholder="De">
        <p style="margin:0; margin-bottom: 5px;font-weight: bold;">Asunto:</p>
        <input type="text" id="asunto" placeholder="Asunto">
        <p style="margin:0; margin-bottom: 5px;font-weight: bold;">Fecha/Hora:</p>
        <div style="display: inline-flex; width: 100%; margin-bottom: 2%;">
            <input class="daypicker" style="width: 50%; margin-right: 5px;" type="date" id="fecha" placeholder="DD/MM/YYYY">
            <div style="width: 50%; position: relative;">
                <input class="timepicker" type="text" id="hora" placeholder="HH:MM" readonly>
                <div class="timepicker-dropdown" id="timepicker-dropdown"></div>
            </div>
        </div>
        <p style="margin:0; margin-bottom: 5px;font-weight: bold;">Descripción:</p>
        <textarea id="cuerpo" placeholder="Cuerpo"></textarea>
        <p style="margin:0; margin-bottom: 5px;font-weight: bold;">Link:</p>
        <input type="text" id="link" placeholder="Link">
        <div style="display: inline-flex; width: 100%; justify-content: space-between;">
            <button class="btn-cancelar" onclick="toggleFormulario()">Cancelar</button>
            <button class="btn-formacion" onclick="crearJSON()">Crear Formación</button>
        </div>
    </div>
    <div style="margin-top: 8vh;" id="mensaje" class="mensaje">
        <br>
        <div style="font-size: 20px;" class="asunto"> - No hay reuniones programadas !</div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Inicializa el Datepicker
            const dateInput = document.getElementById('fecha');
            dateInput.setAttribute('type', 'date');

            // Inicializa el Timepicker
            const timeInput = document.getElementById('hora');
            const timepickerDropdown = document.getElementById('timepicker-dropdown');
            const times = generateTimes('00:00', '23:59', 30);

            timeInput.addEventListener('focus', function() {
                timepickerDropdown.style.display = 'block';
            });

            timeInput.addEventListener('blur', function() {
                setTimeout(() => {
                    timepickerDropdown.style.display = 'none';
                }, 200);
            });

            times.forEach(time => {
                const option = document.createElement('div');
                option.className = 'timepicker-option';
                option.textContent = time;
                option.addEventListener('click', function() {
                    timeInput.value = time;
                    timepickerDropdown.style.display = 'none';
                });
                timepickerDropdown.appendChild(option);
            });
        });

        function generateTimes(start, end, interval) {
            const times = [];
            let current = new Date();
            current.setHours(start.split(':')[0]);
            current.setMinutes(start.split(':')[1]);

            const endTime = new Date();
            endTime.setHours(end.split(':')[0]);
            endTime.setMinutes(end.split(':')[1]);

            while (current <= endTime) {
                times.push(current.toTimeString().slice(0, 5));
                current.setMinutes(current.getMinutes() + interval);
            }
            return times;
        }

        function eliminarMensaje(idReunion) {
            // Realizar una solicitud AJAX para llamar al método deleteReunion
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/deleteReunion", true); // Especifica el método y la URL del método en el servidor
            xhr.setRequestHeader("Content-Type", "application/json"); // Establece el tipo de contenido a JSON
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        console.log("La reunión con ID", idReunion, "se eliminó correctamente.");
                        // Aquí puedes agregar cualquier lógica adicional después de eliminar la reunión
                    } else {
                        console.error("Error al eliminar la reunión con ID", idReunion);
                        // Manejar el error en caso de que la solicitud falle
                    }
                }
            };
            var data = JSON.stringify({ id: idReunion }); // Convertir el ID a formato JSON
            xhr.send(data); // Enviar la solicitud con el ID de la reunión

            // Esto recarga la página actual
            window.location.href = window.location.href;
        }
        
        function toggleFormulario() {
        var formulario = document.getElementById("formulario-agregar");
        var mensajes = document.getElementsByClassName("mensaje");

        if (formulario.style.display === "block") {
            formulario.style.display = "none";
            for (var i = 0; i < mensajes.length; i++) {
                mensajes[i].style.display = "block";
            }
        } else {
            formulario.style.display = "block";
            for (var i = 0; i < mensajes.length; i++) {
                mensajes[i].style.display = "none";
            }
        }
        }

        function generarID() {
            var id = "";
            var caracteres = "123456789";
            for (var i = 0; i < 6; i++) {
                id += caracteres.charAt(Math.floor(Math.random() * caracteres.length));
            }
            return id;
        }

        function crearJSON() {
            var de = document.getElementById("de").value;
            var asunto = document.getElementById("asunto").value;
            var fecha = document.getElementById("fecha").value;
            // Divide la cadena en partes: año, mes y día
            var partesFecha = fecha.split('-');
            // Crea una nueva cadena con el formato DD/MM/YYYY
            var fechaFormateada = partesFecha[2] + '/' + partesFecha[1] + '/' + partesFecha[0];
            var hora = document.getElementById("hora").value;
            var cuerpo = document.getElementById("cuerpo").value;
            var link = document.getElementById("link").value;
            var idAleatorio = generarID();
            
            // Verificar si alguno de los campos está vacío
            if (de === "" || asunto === "" || fecha === "" || hora === "" || cuerpo === "" || link === "") {
                // Si algún campo está vacío, mostrar un mensaje de error
                alert("Por favor, completa todos los campos.");
            } else {
                var mensaje = {
                "Id" : idAleatorio,
                "De": de,
                "Asunto": asunto,
                "Fecha": fechaFormateada,
                "Hora": hora,
                "Cuerpo": cuerpo,
                "Link": link
                };

                var formulario = document.getElementById("formulario-agregar");
                var mensajes = document.getElementsByClassName("mensaje");

                if (formulario.style.display === "block") {
                    formulario.style.display = "none";
                    for (var i = 0; i < mensajes.length; i++) {
                        mensajes[i].style.display = "block";
                    }
                } else {
                    formulario.style.display = "block";
                    for (var i = 0; i < mensajes.length; i++) {
                        mensajes[i].style.display = "none";
                    }
                }

                // Enviar datos al servidor utilizando AJAX
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/guardarReunion", true);
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log("Reunion creada exitosamente!");
                    }
                };
                xhr.send(JSON.stringify(mensaje));

                // Esto recarga la página actual
                window.location.href = window.location.href;
            }
        }
    </script>

</body>
</html>
