<?php //Vista calendario anual
require_once("../../app/functions.php");
$pag = basename($_SERVER['PHP_SELF']);
gen_plantilla(true, $pag, true, true, 'Calendario Anual', true, true);
?>

<section class="cristal" <?= (!get_config_usuario($_SESSION['id_usuario'], 'reducir_efectos_movimiento')) ? 'style="view-transition-name: cristal;"' : '' ?>>
    <section name="CalendarioAnual" method="post" class="flex column gap1 supercentrado">
        <h1 class="resaltado flex row supercentrado"><span class="animacion-izq-drch">📅</span> Calendario Anual</h1>
        <section class="flex row gap1" style="align-items: flex-end;">
            <a href="<?= SITIO_CARPETA ?>/views/tables/calendario" class="btn-p">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                    <path
                        d="M352 224L352 320L480 320L480 224L352 224zM288 224L160 224L160 320L288 320L288 224zM96 384L96 160C96 124.7 124.7 96 160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 384zM480 384L352 384L352 480L480 480L480 384zM288 480L288 384L160 384L160 480L288 480z" />
                </svg>
                Vista mensual
            </a>
            <?php if ($_SESSION['tipo_usuario'] == 'empleado'): ?>
                <a href="<?= SITIO_CARPETA ?>/views/forms/vacaciones" class="btn-p">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                        <path d="M346.3 271.8l-60.1-21.9L214 448H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H544c17.7 0 32-14.3 32-32s-14.3-32-32-32H282.1l64.1-176.2zm121.1-.2l-3.3 9.1 67.7 24.6c18.1 6.6 38-4.2 39.6-23.4c6.5-78.5-23.9-155.5-80.8-208.5c2 8 3.2 16.3 3.4 24.8l.2 6c1.8 57-7.3 113.8-26.8 167.4zM462 99.1c-1.1-34.4-22.5-64.8-54.4-77.4c-.9-.4-1.9-.7-2.8-1.1c-33-11.7-69.8-2.4-93.1 23.8l-4 4.5C272.4 88.3 245 134.2 226.8 184l-3.3 9.1L434 269.7l3.3-9.1c18.1-49.8 26.6-102.5 24.9-155.5l-.2-6zM107.2 112.9c-11.1 15.7-2.8 36.8 15.3 43.4l71 25.8 3.3-9.1c19.5-53.6 49.1-103 87.1-145.5l4-4.5c6.2-6.9 13.1-13 20.5-18.2c-79.6 2.5-154.7 42.2-201.2 108z" />
                    </svg>
                    Solicitar vacaciones
                </a>
            <?php endif; ?>
        </section>

        <section class="flex row gap1 row-column">
            <input type="hidden" name="año" id="año" value="<?= date("Y") ?>">
            <section class="flex column" id="cont-cal-anterior" style="justify-content: flex-end;">
                <button type="button" id="anterior" class="btn-p">Anterior</button>
            </section>
            <section class="flex column gap05 justificado" id="cont-cal-nombre">
                <h2 class="rojo" id="mostrar_año"><?= date("Y") ?></h2>
                <?php $mostrar_apellidos = get_config('mostrar_apellidos_tabla'); ?>
                <label class="flex column gap05">
                    <datalist id="nombres">
                        <?php
                        $nombres = consulta("SELECT id, nombre, apellidos FROM empleados ORDER BY nombre;", [], true);
                        if (!empty($nombres)) {
                            for ($i = 0; $i < count($nombres); $i++) {
                                $nombre_completo = $mostrar_apellidos && !empty($nombres[$i]["apellidos"])
                                    ? $nombres[$i]["nombre"] . " " . $nombres[$i]["apellidos"]
                                    : $nombres[$i]["nombre"];
                                echo "<option value='" . $nombre_completo . "'>";
                                echo $nombres[$i]["id"];
                                echo "</option>";
                            }
                        }
                        ?>
                    </datalist>
                    <?php
                    $placeholder = $mostrar_apellidos ? 'Nombre o apellidos' : 'Nombre';
                    if ($_SESSION['tipo_usuario'] != 'empleado') {
                        $bus = consulta("SELECT * FROM filtro_busqueda WHERE fecha=? AND id_usuario=? ORDER BY id DESC limit 1;", [date("Y-m-d"), $_SESSION['id_usuario']], true);
                        if (!empty($nombres)) {
                            if (!empty($bus) && !empty($bus[0]["nombre"])) {
                                echo '<input type="search" list="nombres" name="nombre" id="nombre" placeholder="' . $placeholder . '" value="' . $bus[0]["nombre"] . '" style="width:15rem">';
                            } else {
                                $nom_default = $mostrar_apellidos && !empty($nombres[0]["apellidos"])
                                    ? $nombres[0]["nombre"] . " " . $nombres[0]["apellidos"]
                                    : $nombres[0]["nombre"];
                                echo '<input type="search" list="nombres" name="nombre" id="nombre" placeholder="' . $placeholder . '" style="width:15rem" value="' . $nom_default . '">';
                            }
                        } else
                            echo '<input type="search" list="nombres" name="nombre" id="nombre" placeholder="' . $placeholder . '" style="width:15rem" value="">';
                    } else {
                        $nombre = consulta('SELECT nombre FROM empleados WHERE id=?', [$_SESSION['id_empleado']], true)[0]['nombre'];
                        if (!empty($nombre)) {
                            echo '<input type="hidden" name="nombre" id="nombre" placeholder="Nombre" value="' . $nombre . '">';
                        } else
                            echo '<input type="hidden" name="nombre" id="nombre" placeholder="Nombre" value="">';
                    }
                    ?>

                    <select name="empleado" id="empleado" style="display: none;">
                        <?php
                        $empleados = consulta("SELECT id, nombre, apellidos FROM empleados ORDER BY nombre, id;", [], true);
                        if (!empty($empleados))
                            for ($i = 0; $i < count($empleados); $i++) {
                                $nombre_select = $mostrar_apellidos && !empty($empleados[$i]["apellidos"])
                                    ? $empleados[$i]["nombre"] . " " . $empleados[$i]["apellidos"]
                                    : $empleados[$i]["nombre"];
                                echo "<option value='" . $empleados[$i]["id"] . "' " . ($_SESSION['tipo_usuario'] == 'empleado' && $_SESSION['id_empleado'] == $empleados[$i]["id"] ? 'selected' : '') . ">" . $nombre_select . "</option>";
                            }
                        ?>
                    </select></label>
            </section>
            <section class="flex column" id="cont-cal-siguiente" style="justify-content: flex-end;">
                <button type="button" id="siguiente" class="btn-p">Siguiente</button>
            </section>
        </section>
    </section>
    <section id="calendario_anual" style="margin-top:1rem;width:100%;"></section>
</section>
<section id="showdialog"></section>
<script>
    window.onload = () => {
        const inputNombre = document.getElementById('nombre');
        const selectEmpleado = document.getElementById('empleado');
        const opciones = Array.from(selectEmpleado.options);

        let timeout;

        inputNombre.addEventListener('input', () => {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                const texto = inputNombre.value.toLowerCase().trim();
                if (!texto) return;

                const normalizar = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
                const textoNorm = normalizar(texto);

                let mejorCoincidencia = null;
                let mejorPuntuacion = 0;

                for (const opt of opciones) {
                    const contenido = normalizar(opt.textContent);
                    let puntuacion = 0;
                    if (contenido.startsWith(textoNorm)) puntuacion = 100;
                    else if (contenido.includes(textoNorm)) puntuacion = 50;
                    else {
                        const palabrasBuscadas = textoNorm.split(' ');
                        const palabrasOpcion = contenido.split(' ');
                        for (const palabra of palabrasBuscadas) {
                            if (palabra.length > 1) {
                                for (const palabraOpt of palabrasOpcion) {
                                    if (palabraOpt.startsWith(palabra)) puntuacion += 20;
                                    else if (palabraOpt.includes(palabra)) puntuacion += 10;
                                }
                            }
                        }
                    }
                    if (puntuacion > mejorPuntuacion) {
                        mejorPuntuacion = puntuacion;
                        mejorCoincidencia = opt;
                    }
                }

                if (mejorCoincidencia) {
                    selectEmpleado.value = mejorCoincidencia.value;
                    selectEmpleado.dispatchEvent(new Event('change'));
                }
            }, 300);
        });

        // Sincronizar select al cargar
        function sincronizarSelectConInput() {
            const texto = inputNombre.value.trim();
            if (!texto) return;
            const normalizar = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
            const textoNorm = normalizar(texto);

            for (const opt of opciones) {
                if (normalizar(opt.textContent) === textoNorm) {
                    selectEmpleado.value = opt.value;
                    return;
                }
            }

            let mejorCoincidencia = null;
            let mejorPuntuacion = 0;
            for (const opt of opciones) {
                const contenido = normalizar(opt.textContent);
                let puntuacion = 0;
                if (contenido.startsWith(textoNorm)) puntuacion = 100;
                else if (contenido.includes(textoNorm)) puntuacion = 50;
                if (puntuacion > mejorPuntuacion) {
                    mejorPuntuacion = puntuacion;
                    mejorCoincidencia = opt;
                }
            }
            if (mejorCoincidencia) selectEmpleado.value = mejorCoincidencia.value;
        }

        sincronizarSelectConInput();

        function actualizar_calendario_anual() {
            window.mostrar_año.innerHTML = window.año.value;
            cargar_calendario_anual();
        }

        actualizar_calendario_anual();

        window.empleado.addEventListener("change", () => {
            actualizar_calendario_anual();
        });

        window.anterior.addEventListener("click", () => {
            window.año.value = parseInt(window.año.value) - 1;
            actualizar_calendario_anual();
        });

        window.siguiente.addEventListener("click", () => {
            window.año.value = parseInt(window.año.value) + 1;
            actualizar_calendario_anual();
        });
    };

    function cargar_calendario_anual() {
        let cal = document.getElementById("calendario_anual");
        cal.style.pointerEvents = "none";
        cal.style.opacity = ".7";
        ajax('tables/table_calendario_anual', 'calendario_anual', "empleado=" + window.empleado.value + "&año=" + window.año.value, ['quitar_cargando_anual()']);
    }

    function cargar_ajax_table() {
        cargar_calendario_anual();
    }

    function quitar_cargando_anual() {
        let cal = document.getElementById("calendario_anual");
        cal.style.pointerEvents = "auto";
        cal.style.opacity = "1";
    }

    function mostrar_info_dia(elem) {
        const tipo = elem.dataset.tipo;
        const fecha = elem.dataset.fecha;
        let html = '<dialog id="dialog" class="cristal" open>';

        if (tipo === 'festivo') {
            const motivo = elem.dataset.motivo;
            html += '<h2>📆 Festivo el <b class="rojo">' + fecha + '</b></h2>';
            html += '<section class="flex column gap05" style="width:100%;">';
            html += '<span style="color:light-dark(#c00,#ff6b6b);font-weight:bold;font-size:1.1rem;">🔴 ' + motivo + '</span>';
            html += '</section>';
        } else if (tipo === 'vacacion') {
            const motivo = elem.dataset.motivo;
            html += '<h2>🏖️ Mis vacaciones el <b class="rojo">' + fecha + '</b></h2>';
            html += '<section class="flex column gap05" style="width:100%;">';
            if (motivo) {
                html += '<span style="color:light-dark(#0055cc,#6baaff);font-weight:bold;font-size:1.1rem;">📝 ' + motivo + '</span>';
            }
            html += '</section>';
        } else if (tipo === 'otros') {
            const nombres = JSON.parse(elem.dataset.nombres);
            html += '<h2>🏖️ Vacaciones el <b class="rojo">' + fecha + '</b></h2>';
            html += '<section class="flex column gap05" style="width:100%;">';
            nombres.forEach(n => {
                html += '<span style="color:light-dark(#7c3aed, #c4a5ff);font-weight:bold;padding:0.3rem 0;">• ' + n + '</span>';
            });
            html += '</section>';
        } else if (tipo === 'doble') {
            const nombres = JSON.parse(elem.dataset.nombres);
            const motivo = elem.dataset.motivo;
            html += '<h2>🏖️ Vacaciones el <b class="rojo">' + fecha + '</b></h2>';
            html += '<section class="flex column gap05" style="width:100%;">';
            html += '<span style="color:light-dark(#0055cc,#6baaff);font-weight:bold;padding:0.3rem 0;">🔵 Mis vacaciones' + (motivo ? ': ' + motivo : '') + '</span>';
            html += '<hr style="margin:0.3rem 0;border-color:light-dark(#ddd,#444);">';
            nombres.forEach(n => {
                html += '<span style="color:light-dark(#7c3aed, #c4a5ff);font-weight:bold;padding:0.3rem 0;">🟣 ' + n + '</span>';
            });
            html += '</section>';
        }

        html += '<section class="flex row gap5 pa1">';
        html += '<button id="cancelar" class="btn-t" title="Cerrar">Cerrar</button>';
        html += '</section>';
        html += '</dialog>';
        document.getElementById('showdialog').innerHTML = html;
        cargar_dialog();
    }
</script>
<?php footer(true); ?>
