<?php
require_once("../../app/functions.php");
if (comprobar_override(str_replace($_SERVER['DOCUMENT_ROOT'], '', __FILE__)))
    exit;
$pag = basename($_SERVER['PHP_SELF']);
gen_plantilla(true, $pag, true, true, "Exportar registros", true, true);

// Obtener lista de grupos
$grupos = consulta("SELECT id, nombre FROM grupos ORDER BY nombre;", [], true);
?>
<section class="cristal" <?= (!get_config_usuario($_SESSION['id_usuario'], 'reducir_efectos_movimiento')) ? 'style="view-transition-name: cristal;"' : '' ?>>
    <h1 class="resaltado flex row supercentrado"><span class="animacion-izq-drch">📄</span> <span
            class="flex row-column gap05">Exportar registros por <span id="texto" class="rojo">empleado</span></span>
    </h1>

    <?php
    $empleados_check = consulta("SELECT id FROM empleados LIMIT 1;", [], true);
    if (!empty($empleados_check)):
    ?>
        <form name="Exportar a pdf" method="POST" id="form_pdf" action="<?= SITIO_CARPETA ?>/app/forms/exportar_pdf"
            class="flex column gap1 supercentrado">
            <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?? '' ?>">
            <section class="seccion-fechas"></section>
            <!-- Selecciona método de exportación -->
            <section class="flex row gap1">
                <input type="radio" id="iempleado" name="entidad" value="empleado" checked>
                <label for="iempleado" id="label-empleado">Empleado</label>
                <input type="radio" id="igrupo" name="entidad" value="grupo">
                <label for="igrupo" id="label-grupo">Grupo</label>
                <input type="radio" id="ifechas" name="entidad" value="fechas">
                <label for="ifechas" id="label-fechas">Fechas</label>
            </section>
            <article class="flex row gap1 alineado row-column">
                <!-- Empleado -->
                <?php $mostrar_apellidos = get_config('mostrar_apellidos_tabla'); ?>
                <label class="flex column gap02" id="label-input-empleado"><b>Empleado</b>
                    <input type="search" name="empleado" id="empleado" list="empleados"
                        placeholder="<?= $mostrar_apellidos ? 'Nombre o apellidos' : 'Todos' ?>">
                    <datalist id="empleados">
                        <?php
                        $empleados = consulta("SELECT id, nombre, apellidos FROM empleados ORDER BY nombre;", [], true);
                        if (!empty($empleados)) {
                            for ($i = 0; $i < count($empleados); $i++) {
                                $nombre_completo = $mostrar_apellidos && !empty($empleados[$i]["apellidos"])
                                    ? $empleados[$i]["nombre"] . " " . $empleados[$i]["apellidos"]
                                    : $empleados[$i]["nombre"];
                                echo "<option value='" . $nombre_completo . "'>" . $nombre_completo . "</option>";
                            }
                        }
                        ?>
                    </datalist>
                </label>
                <!-- Grupo -->
                <label class="flex column gap02" id="label-input-grupo" style="display:none;"><b>Grupo</b>
                    <select name="grupo" id="grupo">
                        <option value="">Todos los grupos</option>
                        <?php
                        if (!empty($grupos)) {
                            for ($i = 0; $i < count($grupos); $i++) {
                                echo "<option value='" . $grupos[$i]["id"] . "'>" . $grupos[$i]["nombre"] . "</option>";
                            }
                        }
                        ?>
                    </select>
                </label>
                <!-- Motivo -->
                <label class="flex column gap02"><b>Motivo</b>
                    <select name="motivo" id="motivo">
                        <option value="">Todos</option>
                        <option value="-1">No mostrar</option>
                        <?php
                        $motivos = consulta("SELECT id, nombre FROM motivos ORDER BY nombre;", [], true);
                        if (!empty($motivos)) {
                            for ($i = 0; $i < count($motivos); $i++) {
                                echo "<option value='" . $motivos[$i]["id"] . "'>" . $motivos[$i]["nombre"] . "</option>";
                            }
                        }
                        ?>
                    </select>
                </label>
                <!-- Fecha inicio -->
                <label class="flex column gap02"><b>Fecha inicio</b>
                    <input type="date" name="fecha_ini" id="fecha_ini" value="<?= date('Y-m'); ?>-01"
                        max="<?= date('Y-m-d'); ?>">
                </label>
                <!-- Fecha fin -->
                <label class="flex column gap02"><b>Fecha fin</b>
                    <input type="date" name="fecha_fin" id="fecha_fin" value="<?= date('Y-m-d'); ?>"
                        max="<?= date('Y-m-d'); ?>">
                </label>
            </article>
        </form>

        <!-- Exportar a CSV -->
        <form name="form_csv" id="form_csv" method="POST" action="<?= SITIO_CARPETA ?>/app/forms/exportar_csv">
            <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?? '' ?>">
            <section class="seccion-fechas"></section>
            <input type="hidden" name="empleado" id="empleado2" value="0">
            <input type="hidden" name="grupo" id="grupo2" value="">
            <input type="hidden" name="motivo" id="motivo2" value="">
            <input type="hidden" name="fecha_ini" id="fecha_ini2" value="<?= date('Y-m'); ?>-01">
            <input type="hidden" name="fecha_fin" id="fecha_fin2" value="<?= date('Y-m-d'); ?>">
        </form>

        <section class="flex row supercentrado gap1">
            <button type="submit" id="convertirpdf" form="form_pdf" formtarget="_blank">
                <svg xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                    <path
                        d="M128 64C92.7 64 64 92.7 64 128L64 512C64 547.3 92.7 576 128 576L208 576L208 464C208 428.7 236.7 400 272 400L448 400L448 234.5C448 217.5 441.3 201.2 429.3 189.2L322.7 82.7C310.7 70.7 294.5 64 277.5 64L128 64zM389.5 240L296 240C282.7 240 272 229.3 272 216L272 122.5L389.5 240zM272 444C261 444 252 453 252 464L252 592C252 603 261 612 272 612C283 612 292 603 292 592L292 564L304 564C337.1 564 364 537.1 364 504C364 470.9 337.1 444 304 444L272 444zM304 524L292 524L292 484L304 484C315 484 324 493 324 504C324 515 315 524 304 524zM400 444C389 444 380 453 380 464L380 592C380 603 389 612 400 612L432 612C460.7 612 484 588.7 484 560L484 496C484 467.3 460.7 444 432 444L400 444zM420 572L420 484L432 484C438.6 484 444 489.4 444 496L444 560C444 566.6 438.6 572 432 572L420 572zM508 464L508 592C508 603 517 612 528 612C539 612 548 603 548 592L548 548L576 548C587 548 596 539 596 528C596 517 587 508 576 508L548 508L548 484L576 484C587 484 596 475 596 464C596 453 587 444 576 444L528 444C517 444 508 453 508 464z" />
                </svg>
                PDF
            </button>
            <button type="submit" id="convertircsv" form="form_csv">
                <svg xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                    <path
                        d="M128 64C92.7 64 64 92.7 64 128L64 512C64 547.3 92.7 576 128 576L208 576L208 464C208 428.7 236.7 400 272 400L448 400L448 234.5C448 217.5 441.3 201.2 429.3 189.2L322.7 82.7C310.7 70.7 294.5 64 277.5 64L128 64zM389.5 240L296 240C282.7 240 272 229.3 272 216L272 122.5L389.5 240zM296 444C271.7 444 252 463.7 252 488L252 568C252 592.3 271.7 612 296 612L312 612C336.3 612 356 592.3 356 568L356 560C356 549 347 540 336 540C325 540 316 549 316 560L316 568C316 570.2 314.2 572 312 572L296 572C293.8 572 292 570.2 292 568L292 488C292 485.8 293.8 484 296 484L312 484C314.2 484 316 485.8 316 488L316 496C316 507 325 516 336 516C347 516 356 507 356 496L356 488C356 463.7 336.3 444 312 444L296 444zM432 444C403.3 444 380 467.3 380 496C380 524.7 403.3 548 432 548C438.6 548 444 553.4 444 560C444 566.6 438.6 572 432 572L400 572C389 572 380 581 380 592C380 603 389 612 400 612L432 612C460.7 612 484 588.7 484 560C484 531.3 460.7 508 432 508C425.4 508 420 502.6 420 496C420 489.4 425.4 484 432 484L456 484C467 484 476 475 476 464C476 453 467 444 456 444L432 444zM528 444C517 444 508 453 508 464L508 495.6C508 531.1 518.5 565.9 538.2 595.4L543.3 603.1C547 608.7 553.3 612 559.9 612C566.5 612 572.8 608.7 576.5 603.1L581.6 595.4C601.3 565.8 611.8 531.1 611.8 495.6L611.8 464C611.8 453 602.8 444 591.8 444C580.8 444 571.8 453 571.8 464L571.8 495.6C571.8 515.2 567.7 534.5 559.8 552.3C551.9 534.5 547.8 515.2 547.8 495.6L547.8 464C547.8 453 538.8 444 527.8 444z" />
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                    <path
                        d="M160 512C142.3 512 128 526.3 128 544C128 561.7 142.3 576 160 576L256 576C309 576 352 533 352 480L352 173.3L425.4 246.7C437.9 259.2 458.2 259.2 470.7 246.7C483.2 234.2 483.2 213.9 470.7 201.4L342.7 73.4C330.2 60.9 309.9 60.9 297.4 73.4L169.4 201.4C156.9 213.9 156.9 234.2 169.4 246.7C181.9 259.2 202.2 259.2 214.7 246.7L288 173.3L288 480C288 497.7 273.7 512 256 512L160 512z" />
                </svg>
                CSV
            </button>
        </section>
    <?php else: ?>
        <article id="no-hay-datos" class="flex wrap" style="width:fit-content; text-wrap: balance;">
            <h3>¡Vaya, parece que no tienes empleados! <a class="enlace blanco" href="<?= SITIO_CARPETA ?>/views/forms/empleado">Añadir empleado</a></h3>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
        </article>
    <?php endif; ?>
</section>
<script>
    window.onload = function () {
        const grupo2 = document.getElementById("grupo2");
        const motivo = document.getElementById("motivo");
        const motivo2 = document.getElementById("motivo2");
        const fecha_ini = document.getElementById("fecha_ini");
        const fecha_fin = document.getElementById("fecha_fin");
        const fecha_ini2 = document.getElementById("fecha_ini2");
        const fecha_fin2 = document.getElementById("fecha_fin2");
        const iempleado = document.getElementById("iempleado");
        const ifechas = document.getElementById("ifechas");
        const igrupo = document.getElementById("igrupo");
        const labelInputEmpleado = document.getElementById("label-input-empleado");
        const labelInputGrupo = document.getElementById("label-input-grupo");

        // Sincroniza visibles -> ocultos (CSV)
        const syncAll = () => {
            empleado2.value = empleado.value;
            grupo2.value = grupo.value;
            motivo2.value = motivo.value;
            fecha_ini2.value = fecha_ini.value;
            fecha_fin2.value = fecha_fin.value;
        };
        syncAll();
        empleado.addEventListener("input", syncAll);
        empleado.addEventListener("change", syncAll);
        grupo.addEventListener("change", syncAll);
        motivo.addEventListener("change", syncAll);
        fecha_ini.addEventListener("change", syncAll);
        fecha_fin.addEventListener("change", syncAll);

        // Sincronizar justo antes de enviar el formulario CSV
        document.getElementById("form_csv").addEventListener("submit", syncAll);

        // Alterna "empleado/fechas/grupo" en ambos formularios
        const setTipo = (tipo) => {
            document.getElementById("texto").innerText = tipo;
            document.querySelectorAll(".seccion-fechas").forEach(sec => {
                if (tipo === 'fechas') {
                    sec.innerHTML = "<input type='hidden' name='fechas' value='1'>";
                } else if (tipo === 'grupo') {
                    sec.innerHTML = "<input type='hidden' name='por_grupo' value='1'>";
                } else {
                    sec.innerHTML = "";
                }
            });

            // Mostrar/ocultar campos según tipo
            if (tipo === 'grupo') {
                labelInputEmpleado.style.display = 'none';
                labelInputGrupo.style.display = 'flex';
            } else {
                labelInputEmpleado.style.display = 'flex';
                labelInputGrupo.style.display = 'none';
            }
        };

        iempleado.addEventListener("click", () => setTipo('empleado'));
        ifechas.addEventListener("click", () => setTipo('fechas'));
        igrupo.addEventListener("click", () => setTipo('grupo'));
    };
</script>


<?php
footer(true);
