<?php //Optimizaciones 25w12c
require_once("../../app/functions.php");
$pag = basename($_SERVER['PHP_SELF']);
gen_plantilla(true, $pag, true, true, 'Crear festivo', true, true);
$mostrar_apellidos = get_config('mostrar_apellidos_tabla');

?>
<section class="cristal" <?= (!get_config_usuario($_SESSION['id_usuario'], 'reducir_efectos_movimiento')) ? 'style="view-transition-name: cristal;"' : '' ?>>
    <h1 class="resaltado">Añadir festivo</h1>
    <form name="Crear días inhábiles" method="POST" action="/app/forms/festivo" class="flex column gap1">
        <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?? '' ?>">
        <?php
        //empleados
        $empleados = consulta("SELECT id,nombre,apellidos FROM empleados ORDER BY nombre;", [], true);
        //Grupos
        $grupos = consulta("SELECT id,nombre FROM grupos ORDER BY nombre;", [], true);
        ?>
        <section class="dias-in-entidad supercentrado">
            <section>
                <input type="radio" id="radio_grupo" name="entidad" value="grupo" class="radio" checked>
                <label for="radio_grupo" id="label-grupo" class="label-radio">Grupo</label>
            </section>
            <section>
                <input type="radio" id="radio_empleado" name="entidad" value="empleado" class="radio">
                <label for="radio_empleado" id="label-empleado" class="label-radio">Empleado</label>
            </section>
        </section>
        <section class="flex row gap1 supercentrado" id="seccion_grupo">
            <select name="select_grupo" id="select_grupo">
                <?php
                for ($i = 0; $i < count($grupos); $i++)
                    echo "<option value='" . $grupos[$i]["id"] . "'>" . $grupos[$i]["nombre"] . "</option>";
                ?>
            </select>
        </section>
        <section class="flex row gap1 supercentrado" id="seccion_empleado" style="display:none;">
            <input type="search" id="buscar_empleado" list="lista_empleados" placeholder="<?= $mostrar_apellidos ? 'Nombre o apellidos' : 'Buscar empleado' ?>">
            <input type="hidden" name="select_empleado" id="select_empleado">
            <datalist id="lista_empleados">
                <?php
                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='" . htmlspecialchars($nombre_completo) . "' data-id='" . $empleados[$i]["id"] . "'></option>";
                }
                ?>
            </datalist>
        </section>
        <section class="flex row gap1">
            <label class="flex column gap05">
                Fecha inicio
                <input type="date" name="fecha-inicio" id="fecha-inicio" required>
            </label>
            <label class="flex column gap05">
                Fecha fin
                <input type="date" name="fecha-fin" id="fecha-fin" required>
            </label>
        </section>
        <!-- Tipo de festivo -->
        <label class="flex column gap05 supercentrado">
            Tipo festivo
            <select name="tipo_dia">
                <?php
                $tipos_dias = consulta('SELECT * FROM motivos WHERE id=3 OR id=4 ORDER BY nombre;', [], true);
                for ($i = 0; $i < count($tipos_dias); $i++)
                    echo '<option value="' . $tipos_dias[$i]['id'] . '">' . $tipos_dias[$i]['nombre'] . '</option>';

                ?>
            </select>
        </label>
        <button type="submit" class="btn-p">Añadir festivo</button>
    </form>
</section>
<script>
    window.addEventListener('load', function() {
        const radioGrupo = document.getElementById("radio_grupo");
        const radioEmpleado = document.getElementById("radio_empleado");
        const seccionGrupo = document.getElementById("seccion_grupo");
        const seccionEmpleado = document.getElementById("seccion_empleado");
        const buscarEmpleado = document.getElementById("buscar_empleado");
        const selectEmpleado = document.getElementById("select_empleado");
        const listaEmpleados = document.getElementById("lista_empleados");

        // Cambiar entre grupo y empleado
        radioGrupo.addEventListener('change', function() {
            seccionGrupo.style.display = 'flex';
            seccionEmpleado.style.display = 'none';
        });
        radioEmpleado.addEventListener('change', function() {
            seccionGrupo.style.display = 'none';
            seccionEmpleado.style.display = 'flex';
            buscarEmpleado.focus();
        });

        // Sincronizar datalist con hidden input
        buscarEmpleado.addEventListener('input', function() {
            const options = listaEmpleados.options;
            for (let i = 0; i < options.length; i++) {
                if (options[i].value === buscarEmpleado.value) {
                    selectEmpleado.value = options[i].dataset.id;
                    return;
                }
            }
            selectEmpleado.value = '';
        });
    });
</script>
<?php footer(true); ?>