<?php //25w13b - Calendario Festivos y Vacaciones
require_once("../../app/functions.php");
$pag = basename($_SERVER['PHP_SELF']);
gen_plantilla(true, $pag, true, true, 'Calendario Festivos', true, true);

$meses_nombres = [
    '1' => 'Enero', '2' => 'Febrero', '3' => 'Marzo', '4' => 'Abril',
    '5' => 'Mayo', '6' => 'Junio', '7' => 'Julio', '8' => 'Agosto',
    '9' => 'Septiembre', '10' => 'Octubre', '11' => 'Noviembre', '12' => 'Diciembre'
];
?>

<section class="cristal" <?= (!get_config_usuario($_SESSION['id_usuario'], 'reducir_efectos_movimiento')) ? 'style="view-transition-name: cristal;"' : '' ?>>
    <section name="CalendarioFestivos" method="post" class="flex column gap1 supercentrado">
        <h1 class="resaltado flex row supercentrado"><span class="animacion-izq-drch">📅</span> Calendario Festivos y Vacaciones</h1>
        <section class="flex row gap1" style="align-items: flex-end;">
            <a href="<?= SITIO_CARPETA ?>/views/tables/festivos" 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 lista
            </a>
            <?php if ($_SESSION['tipo_usuario'] == 'admin'): ?>
                <a href="<?= SITIO_CARPETA ?>/views/forms/festivo" class="btn-p">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                        <path d="M224 64C241.7 64 256 78.3 256 96L256 128L384 128L384 96C384 78.3 398.3 64 416 64C433.7 64 448 78.3 448 96L448 128L480 128C515.3 128 544 156.7 544 192L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 192C96 156.7 124.7 128 160 128L192 128L192 96C192 78.3 206.3 64 224 64zM224 320C206.3 320 192 334.3 192 352L192 416C192 433.7 206.3 448 224 448L288 448C305.7 448 320 433.7 320 416L320 352C320 334.3 305.7 320 288 320L224 320z" />
                    </svg>
                    Añadir festivo
                </a>
            <?php endif; ?>
        </section>

        <section class="flex row gap1 row-column">
            <input type="hidden" name="mes" id="mes" value="<?= date("n") ?>">
            <input type="hidden" name="año" id="año" value="<?= date("Y") ?>">
            <section class="flex column" style="justify-content: flex-end;">
                <button type="button" id="anterior" class="btn-p">Anterior</button>
            </section>
            <section class="flex column gap05 justificado">
                <h2 class="rojo" id="mostrarmes"><?= $meses_nombres[date("n")] . " " . date("Y") ?></h2>
            </section>
            <section class="flex column" style="justify-content: flex-end;">
                <button type="button" id="siguiente" class="btn-p">Siguiente</button>
            </section>
        </section>
    </section>
    <section id="calendario" style="margin-top:1rem;"></section>
</section>
<aside id="showdialog"></aside>
<script>
    const meses = ['', 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];

    window.onload = () => {
        cargar_calendario_festivos();

        document.getElementById("anterior").addEventListener("click", () => {
            if (window.mes.value == 1) {
                window.mes.value = 12;
                window.año.value = window.año.value - 1;
            } else {
                window.mes.value = window.mes.value - 1;
            }
            actualizar_titulo();
            cargar_calendario_festivos();
        });

        document.getElementById("siguiente").addEventListener("click", () => {
            if (window.mes.value == 12) {
                window.mes.value = 1;
                window.año.value = parseInt(window.año.value) + 1;
            } else {
                window.mes.value = parseInt(window.mes.value) + 1;
            }
            actualizar_titulo();
            cargar_calendario_festivos();
        });
    };

    function actualizar_titulo() {
        document.getElementById("mostrarmes").innerHTML = meses[parseInt(window.mes.value)] + " " + window.año.value;
    }

    function cargar_calendario_festivos() {
        let cal = document.getElementById("calendario");
        cal.style.pointerEvents = "none";
        cal.style.opacity = ".7";
        ajax('tables/table_calendario_festivos', 'calendario',
            "mes=" + window.mes.value + "&año=" + window.año.value,
            ['quitar_cargando_cal()']);
    }

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

    function mostrar_info_dia_festivos(elem) {
        const fecha = elem.dataset.fecha;
        const entries = JSON.parse(elem.dataset.entries);

        let html = '<dialog id="dialog" class="cristal" open>';
        html += '<h2>📅 <b class="rojo">' + fecha + '</b></h2>';
        html += '<section class="flex column gap05" style="width:100%;margin:0.5rem 0;">';

        entries.forEach(e => {
            if (e.tipo === 'festivo') {
                html += '<span style="color:light-dark(#c00,#ff6b6b);font-weight:bold;padding:0.3rem 0;">🔴 ' + e.nombre + ' — ' + e.motivo + ' <small>(' + e.rango + ')</small></span>';
            } else {
                html += '<span style="color:light-dark(#0055cc,#6baaff);font-weight:bold;padding:0.3rem 0;">🔵 ' + e.nombre + ' — ' + e.motivo + ' <small>(' + e.rango + ')</small></span>';
            }
        });

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