<!DOCTYPE html>
<html lang="sp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Consulta Llaves</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.blue.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .container {
            width: 95%;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

        .button-container {
            margin-bottom: 20px;
        }

        .button-container button {
            margin-right: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #a3afbd ;  /* #007bff;  Color azul para los encabezados */
            color: black; /* Texto blanco para los encabezados */
            font-size: 14px !important;
        }

        td {
            font-size: 12px;
        }

        /* Estilo personalizado para DataTables */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            background-color: #007bff; /* Color azul para los botones de paginación */
            color: white !important; /* Texto blanco para los botones de paginación */
            border: 1px solid #007bff; /* Borde azul para los botones de paginación */
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #0056b3; /* Azul más oscuro al pasar el mouse */
            border: 1px solid #0056b3; /* Borde azul más oscuro al pasar el mouse */
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            background-color: #0056b3; /* Azul más oscuro para la página actual */
            border: 1px solid #0056b3; /* Borde azul más oscuro para la página actual */
        }

        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #ddd; /* Borde gris claro para el campo de búsqueda */
            padding: 5px;
        }

        .dataTables_wrapper .dataTables_info {
            color: #333; /* Texto gris oscuro para la información de la tabla */
        }
    </style>
</head>
<body>

<div class="container">
    <font face="Arial, Helvetica, sans-serif">
    <h2>Llaves de Licenciamiento</h2>
    <h5>Oficios QR</h5>

    <div class="button-container">
        <button id="agregarButton" class="btn btn-success" onclick="location.href='agregar.php'">Agregar</button>
        <button id="eliminarButton" class="btn btn-danger" onclick="location.href='eliminar.php?id_equipo=' + selectedRow" disabled>Eliminar</button>
        <a id="editButton" href="editar.php"><button id="editarButton" class="btn btn-primary" disabled>Editar</button></a>
        <button id="exportExcelButton" class="btn btn-success">Exportar a Excel</button> <!-- New button -->
        <a href="logout.php"><button class="btn btn-secondary">Salir</button></a>
    </div>

    
    <?php
    session_start();

    
    // Mensaje de depuración
    error_log("Session user_id: " . (isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 'Not set'));

    if (!isset($_SESSION['user_id'])) {
        header('Location: login.php');
        exit();
    }

    date_default_timezone_set('America/Mexico_City');
    require 'conexion.php';

    $sql = "SELECT id_equipo, vigencia, licencia_activa, en_uso, equipo FROM llaves";
    $stmt = $conn->prepare($sql);
    $stmt->execute();
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

    if (count($result) > 0) {
        echo "<table id='myTable' border='1'>
        <thead>
            <tr>
                <th class='checkbox-column'>Sel</th>
                <th>ID Equipo</th>
                <th>Vigencia</th>
                <th>Licencia Activa</th>
                <th>En Uso</th>
                <th>Propietario del Equipo</th>
            </tr>
        </thead>
        <tbody>";

        foreach ($result as $row) {
            $formattedVigencia = date('d-m-Y', strtotime($row["vigencia"]));
            echo "<tr>
                    <td class='checkbox-column'><input type='checkbox' class='rowCheckbox' data-id='" . $row["id_equipo"] . "'></td>
                    <td>" . $row["id_equipo"] . "</td>
                    <td>" . $formattedVigencia . "</td>
                    <td class='checkbox-column'><input type='hidden' class='licenciaCheckbox' value='" . ($row["licencia_activa"] ? 1 : 0) . "'><input type='checkbox' disabled " . ($row["licencia_activa"] ? 'checked' : '') . "></td>
                    <td class='checkbox-column'><input type='hidden' class='usoCheckbox' value='" . ($row["en_uso"] ? 1 : 0) . "'><input type='checkbox' disabled " . ($row["en_uso"] ? 'checked' : '') . "></td>
                    <td>" . $row["equipo"] . "</td>
                </tr>";
        }
        echo "</tbody></table>";
    } else {
        echo "0 results";
    }

    $conn = null;
    ?>
    
    <!-- SheetJS (xlsx) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
    <script>
        let selectedRow = null;

        document.querySelectorAll('.rowCheckbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if (this.checked) {
                    // Desmarca todos los otros checkboxes
                    document.querySelectorAll('.rowCheckbox').forEach(otherCheckbox => {
                        if (otherCheckbox !== this) {
                            otherCheckbox.checked = false;
                        }
                    });

                    selectedRow = this.getAttribute('data-id');
                    document.getElementById('editButton').href = 'editar.php?id_equipo=' + selectedRow;
                    console.log('Edit button href updated to:', document.getElementById('editButton').href); // Debugging statement

                    // Habilita los botones de Eliminar y Editar
                    document.getElementById('eliminarButton').disabled = false;
                    document.getElementById('editarButton').disabled = false;
                    document.getElementById('agregarButton').disabled = true;
                } else {
                    selectedRow = null;
                    document.getElementById('editButton').href = 'editar.php';
                    console.log('Edit button href reset to:', document.getElementById('editButton').href); // Debugging statement

                    // Deshabilita los botones de Eliminar y Editar
                    document.getElementById('eliminarButton').disabled = true;
                    document.getElementById('editarButton').disabled = true;
                    document.getElementById('agregarButton').disabled = false;
                }
            });
        });

        $(document).ready(function() {
            // Inicializa DataTables en la tabla con id 'myTable'
            $('#myTable').DataTable({
                "paging": true, // Habilita la paginación
                "lengthChange": false, // Deshabilita el cambio de número de filas por página
                "searching": true, // Habilita la búsqueda
                "ordering": true, // Habilita la ordenación
                "info": true, // Muestra información de la tabla
                "autoWidth": false, // Deshabilita el ancho automático
                "pagingType": "simple_numbers", // Tipo de paginación
                "language": {
                    "paginate": {
                        "previous": "Ant.",
                        "next": "Sig."
                    },
                    "search": "Buscar:",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
                    "emptyTable": "No hay datos disponibles",
                    "lengthMenu": "Mostrar _MENU_ entradas"
                },
                "dom": '<"top"i>rt<"bottom"lp><"clear">' // Personaliza la ubicación de los controles
            });
        });

        document.getElementById('exportExcelButton').addEventListener('click', function () {
            const table = document.getElementById('myTable');
            const rows = table.querySelectorAll('tr');

            let data = [];
            rows.forEach(row => {
                let rowData = [];
                row.querySelectorAll('th, td').forEach(cell => {
                    const checkbox = cell.querySelector('.rowCheckbox');
                    const licenciaCheckbox = cell.querySelector('.licenciaCheckbox');
                    const usoCheckbox = cell.querySelector('.usoCheckbox');
                    if (checkbox) {
                        // Check if the checkbox is selected
                        rowData.push(checkbox.checked ? 1 : 0);
                    } else if (licenciaCheckbox) {
                        // Use the value from the hidden input field
                        rowData.push(licenciaCheckbox.value);
                    } else if (usoCheckbox) {
                        // Use the value from the hidden input field
                        rowData.push(usoCheckbox.value);
                    } else {
                        rowData.push(cell.innerText);
                    }
                });
                data.push(rowData);
            });

            // Create a new workbook and add a worksheet
            const ws = XLSX.utils.aoa_to_sheet(data);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Llaves");

            // Generate the Excel file and trigger download
            XLSX.writeFile(wb, 'table.xlsx');
        });
    </script>
</div>

</body>
</html>
