<?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" >
<body>
        <form id="uploadForm" enctype="multipart/form-data">
            <table>
                <tr>
                    <td style="width:200px"><input type="file" name="file" id="file" accept=".xls,.xlsx" required></td>
                    <td><button type="submit" class="btn btn-primary" name="submit">Subir archivo</button></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center;"><p class="statusMsg1"></p></td>
                </tr>
            </table>
        </form>
        <div id="datos"></div>
    </body>
</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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
            $('#uploadForm').on('submit', function(e){
                e.preventDefault(); // Evitar el comportamiento normal del formulario
                var formData = new FormData(this);
                $('#datos').html(''); // Limpiar contenido previo

                // Mensaje de carga
                //$('.statusMsg1').html('<p>Cargando información, por favor espera...</p>');

                $.ajax({
                    type: 'POST',
                    url: 'procesarPrenomina.php',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(response){
                        $('.statusMsg1').html(''); // Limpiar el mensaje de estado
                        $('#datos').html(response); // Mostrar la respuesta del servidor
                    },
                    error: function(xhr, status, error){
                        console.log(xhr.responseText); // Para obtener más detalles en la consola
                        alert('Error: ' + error + '\nEstado: ' + status);
                    }
                });
            });
        });
    </script>

</body>
</html>
