<?php
session_start();
include "./conexion.php";

$hoy = date('Y-m-d');
$anio = date('Y');

// Obtener la semana actual
$sqlUnidad = mysqli_query($connection, "SELECT * FROM periodos WHERE fechaInicial >= '$hoy' LIMIT 1");
$semana = null; // Inicializamos la variable para la semana
if ($data = mysqli_fetch_array($sqlUnidad)) {
    $semana = $data['semana'];
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Taller</title> <link rel="icon" href="./icons/taller.png" type="image/png">
    <link rel="stylesheet" href="./sidemenu.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .custom-alert {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            display: none;
            text-align: center;
            border-radius: 5px;
        }

        .custom-alert button {
            margin-top: 10px;
            padding: 5px 10px;
            cursor: pointer;
        }

        body {
            font-family: Arial, sans-serif;
            font-size: 12px;
            margin: 20px;
        }

        .container2 {
            display: flex;
            align-items: left; /* Alinea verticalmente al centro */
            margin-left: 200px;
            margin-right: var(--margen-derecho);
            margin-top: var(--margen-derecho);
        }

        label {
            margin-right: 5px; /* Espacio entre la etiqueta y el select */
            font-weight: bold;
            color: #333;
        }

        select {
            width: 200px; /* Asegúrate de que todos los selects tengan la misma anchura */
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 10px; /* Espacio entre los selects */
        }

        input {
            width: 200px; /* Asegúrate de que todos los selects tengan la misma anchura */
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 10px; /* Espacio entre los selects */
        }

        button {
            margin-left: 10px; /* Espacio entre los selects y el botón */
            padding: 10px 15px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
        }

        button:hover {
            background-color: #218838;
        }


    </style>

</head>
<body  >
    

    <!--<div id="sidemenu" class="menu-collapsed">-->
    <div id="sidemenu" class="menu-expanded">
        <!-- Header -->
        <div id="header">
            <div id="title"><span></span> </div>
            <div id="menu-btn">
                <div class="btn-hamburger"></div>
                <div class="btn-hamburger"></div>
                <div class="btn-hamburger"></div>
            </div>
        </div>
        <!--Profile-->
        <div id="profile">
            <div id="photo"><img src="img/user.png" alt=""></div>
            <!--<div id="name"><span><?php echo $_SESSION['nombre'];?></span></div>
            <div id="name"><span><?php echo $_SESSION['iduser']." [ ".$_SESSION['user']." ] ";?></span></div>
            <div id="name"><span><?php echo "Sucursal: ".$_SESSION['suc'];?></span></div>
            <div id="name"><span> <?php echo "Rol: ".$_SESSION['rol'];?></span></div>-->
        </div>
        <!--Items-->
        <div id="menu-items">
            <?php include './includes/navs3.php'?>
        </div>
    </div>
    <!--<div id="main-container">-->
    
<!-- -->
<!--<div class="container-fluid">-->
<div id="datos" style="width:100%;text-align:left;">
<div id="customAlert" class="custom-alert">
    <p id="alertText"></p>
    <button onclick="closeAlert()">Aceptar</button>
</div>

<div id="carga" class="custom-alert">
    <p><img src="./img/loading2.gif" alt="Cargando..."></p>
</div>

<div class="container2" >
            <div>
                <label>Año:<br>
                <select style="width:80px;" id="anio" onchange="obtenerSemanas()">
                    <?php
                    $sqlAnio = mysqli_query($connection, "SELECT DISTINCT anio FROM periodos ORDER BY anio DESC");
                    while ($data = mysqli_fetch_array($sqlAnio)) {
                        $selected = ($anio == $data['anio']) ? 'selected' : '';
                        echo "<option value=\"{$data['anio']}\" $selected>{$data['anio']}</option>";
                    }
                    ?>
                </select></label>
            </div>
            <div id="periodos">
                <label>Periodo:<br>
                <select id="periodo"><option>--Selecciona--</option></select></label>
            </div>
            <div id="ubicacionx">
                <label>Ubicación:<br>
                <select id="ubicacion"><option>--Selecciona--</option></select></label>
            </div>
        
            <div id="supervisorx">
                <label>Supervisor:<br>
                <select id="supervisor"><option>--Selecciona--</option></select></label>
            </div>
        
            <div id="lugarx">
                <label>Lugar de Trabajo:<br>
                <select id="lugar"><option>--Selecciona--</option></select></label>
            </div>
            <div id="lugarzx">
                
            </div>
        
            <label><br><button onclick="buscar()">Buscar</button></label>
            <label><br><button style='background:red;' onclick="descargarFaltas()">Descargar Faltas</button></label>
                </div>
<div id="checadas" style="margin-left: 200px;"></div>
</div>
    

<!-- 
    </div>-->

    <!-- Pie de página -->
    <!--<footer>
        <?php include "includes/footer.php"; ?>
    </footer>-->

    <!--<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const btn = document.querySelector('#menu-btn');
        const menu = document.querySelector('#sidemenu');

        /*btn.addEventListener('click', e => {
            menu.classList.toggle("menu-expanded");
            menu.classList.toggle("menu-collapsed");

            document.querySelector('body').classList.toggle('body-expanded')
        });*/
    </script>

<script>
function obtenerPeriodo() {
    const semana = $('#periodo').val();

    $.ajax({
        type: "POST",
        url: "reporte.php",
        data: { semana: semana },
        success: function(msg) {
            const response = JSON.parse(msg);
            $('#checadas').html(response.respuesta);
        },
        error: function(xhr) {
            console.error(xhr.responseText);
            $('#checadas').html('<span style="color:red;">Error en la solicitud AJAX.</span>');
        }
    });
}

function obtenerSemanas() {
    const anio = $('#anio').val();
    const semana = <?php echo $semana; ?>;

    $.ajax({
        type: "POST",
        url: "obtenerPeriodo.php",
        data: { anio: anio, semana: semana },
        success: function(msg) {
            const response = JSON.parse(msg);
            $('#periodos').html(response.respuesta);
        },
        error: function(xhr) {
            console.error(xhr.responseText);
            $('#periodos').html('<span style="color:red;">Error en la solicitud AJAX.</span>');
        }
    });
}

function buscar() {
    const anio = $('#anio').val();
    const periodo = $('#periodo').val();
    const ubicacion = $('#ubicacion').val();
    const supervisor = $('#supervisor').val();
    const lugar = $('#lugar').val();
    var lugarz= null;

    if (lugar=="x"){
        lugarz= $('#lugarz').val();
        if (lugarz) {
            lugarz = lugarz.replace(/ /g, '%'); // Reemplaza espacios con '%'
        }

        if (periodo === '0') {
            showAlert("Selecciona un periodo para continuar");
        } else {
            showCarga();

            $.ajax({
                type: "POST",
                url: "reporte3.php",
                //data: { anio, periodo, ubicacion, supervisor, lugar,lugarz },
                data: { anio, periodo, lugar, lugarz },
                success: function(msg) {
                    //alert(msg);
                    closeCarga();
                    var response = JSON.parse(msg);
                    
                    $('#checadas').html(response.respuesta);
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    $('#checadas').html('<span style="color:red;">Error en la solicitud AJAX.</span>');
                }
            });
        }
    

    } else{
        lugarz= 0;
        if (periodo === '0') {
            showAlert("Selecciona un periodo para continuar");
        } else if (ubicacion === '0') {
            showAlert("Selecciona una ubicación para continuar");
        } else if (supervisor === '0') {
            showAlert("Selecciona un supervisor");
        } else {
            showCarga();

            $.ajax({
                type: "POST",
                url: "reporte3.php",
                data: { anio, periodo, ubicacion, supervisor, lugar,lugarz },
                success: function(msg) {
                    closeCarga();
                    var response = JSON.parse(msg);
                    
                    $('#checadas').html(response.respuesta);
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    $('#checadas').html('<span style="color:red;">Error en la solicitud AJAX.</span>');
                }
            });
        }
    }
    
} 


function descargarFaltas(){
    const anio = $('#anio').val();
    const periodo = $('#periodo').val();
    const ubicacion = $('#ubicacion').val();
    const supervisor = $('#supervisor').val();
    const lugar = $('#lugar').val();
    var lugarz= null;

    if (lugar=="x"){
        lugarz= $('#lugarz').val();
        if (lugarz) {
            lugarz = lugarz.replace(/ /g, '%'); // Reemplaza espacios con '%'
        }
        if (periodo === '0') {
            showAlert("Selecciona un periodo para continuar");
        } else {
            showCarga();
            $.ajax({
                type: "POST",
                url: "faltas.php",
                data: { anio, periodo, lugar,lugarz },
                success: function(msg) {
                    closeCarga();
                    //try {
                        const response = JSON.parse(msg);
                        var archivo = response.respuesta;
                        var pagina = 'descargarE.php?file=' + archivo;
                        descargarArchivo(pagina, archivo);
                    /*} catch (e) {
                        alert("No hay datos para descargar");
                        console.error("Error al analizar el JSON:", e);
                    }*/
                    
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    $('#checadas').html('<span style="color:red;">Error en la solicitud AJAX.</span>');
                }
            });
        }
    } else{
        lugarz= 0;
        if (periodo === '0') {
            showAlert("Selecciona un periodo para continuar");
        } else if (ubicacion === '0') {
            showAlert("Selecciona una ubicación para continuar");
        } else if (supervisor === '0') {
            showAlert("Selecciona un supervisor");
        } else {
            showCarga();
            $.ajax({
                type: "POST",
                url: "Faltas.php",
                data: { anio, periodo, ubicacion, supervisor, lugar,lugarz },
                success: function(msg) {
                    closeCarga();
                    //try {
                        const response = JSON.parse(msg);
                        var archivo = response.respuesta;
                        var pagina = 'descargarE.php?file=' + archivo;
                        descargarArchivo(pagina, archivo);
                    /*} catch (e) {
                        alert("No hay datos para descargar");
                        console.error("Error al analizar el JSON:", e);
                    }*/
                    
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    $('#checadas').html('<span style="color:red;">Error en la solicitud AJAX.</span>');
                }
            });
        }
    }

    
}



function descargarArchivo(url,archivox) {
        // Crear un objeto XMLHttpRequest
        var xhr = new XMLHttpRequest();

        // Configurar la solicitud
        xhr.open('GET', url, true);
        xhr.responseType = 'blob'; // El tipo de respuesta será un blob (archivo binario)

        // Cuando la solicitud esté lista
        xhr.onload = function() {
            // Verificar si la solicitud fue exitosa (código de estado HTTP 200)
            if (xhr.status === 200) {
                // Crear un objeto URL para el blob obtenido
                var blobURL = window.URL.createObjectURL(xhr.response);

                // Crear un enlace <a> para iniciar la descarga
                var a = document.createElement('a');
                a.href = blobURL;
                a.download = archivox; // Puedes establecer el nombre del archivo aquí
                document.body.appendChild(a);
                a.click();

                // Limpiar después de la descarga
                window.URL.revokeObjectURL(blobURL);
                document.body.removeChild(a);
                
                eliminarArchivoServidor(archivox);

            }
        };

        // Enviar la solicitud
        xhr.send();
    }

    function eliminarArchivoServidor(archivo) {
    $.ajax({
        type: "POST",
        url: "eliminarArchivo.php", // Una nueva ruta en el servidor que eliminará el archivo
        data: { archivo },
        success: function(response) {
            console.log("Archivo eliminado del servidor: " + archivo);
        },
        error: function(xhr) {
            console.error("Error al intentar eliminar el archivo: " + xhr.responseText);
        }
    });
}

    window.onload = function() {
    obtenerSemanas();
    $('#periodo').focus();

    }


function showAlert(message) {
    const alertBox = document.getElementById('customAlert');
    const alertText = document.getElementById('alertText');
    alertText.textContent = message;
    alertBox.style.display = 'block';
}

function showCarga() {
    document.getElementById('carga').style.display = 'block';
}

function closeAlert() {
    document.getElementById('customAlert').style.display = 'none';
}

function closeCarga() {
    document.getElementById('carga').style.display = 'none';
}
</script>

</body>
</html>
