<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Buscar datos en tiempo real con PHP, MySQL y AJAX">
    <meta name="author" content="Marco Robles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Registro de Citas</title>

    <style>
    /* Personalización de los botones */
    .btn {
        transition: all 0.3s ease;
        /* Efecto suave al pasar el ratón */
    }

    .btn:hover {
        transform: translateY(-3px);
        /* Efecto de elevación al pasar el ratón */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        /* Sombra más prominente */
    }

    .btn-success {
        background-color: #28a745;
        border-color: #28a745;
    }

    .btn-success:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }

    .btn-lg {
        padding: 0.75rem 1.25rem;
    }

    .rounded-pill {
        border-radius: 50rem;
    }

    /* Agregar sombra sutil a los botones */
    .btn-shadow {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* Cambio de sombra al pasar el mouse */
    .btn-shadow:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
    </style>
</head>

<body>
    <?php
    include 'menu.php';
    ?>

    <main>
        <div class="container">
            <div class="text-center mb-4">
                <h2>Registro de Citas</h2>
            </div>

            <div class="table-container">
                <!-- Controles de búsqueda y paginación centrados -->
                <div class="row g-4 justify-content-center align-items-center mb-3 text-center">
                    <div class="col-auto">
                        <label for="num_registros" class="form-label">Mostrar:</label>
                    </div>
                    <div class="col-auto">
                        <select name="num_registros" id="num_registros" class="form-select">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>

                    <div class="col-auto">
                        <label class="form-label">registros</label>
                    </div>

                    <!-- Campo de búsqueda centrado -->
                    <div class="col-auto">
                        <label for="campo" class="form-label">Buscar:</label>
                    </div>

                    <div class="col-auto">
                        <input type="text" name="campo" id="campo" class="form-control">
                    </div>

                    <!-- Botón 'Nuevo' -->
                    <div class="col-auto ms-auto">
                        <a href="Formularios/formcita.php" class="btn btn-success btn-lg btn-shadow rounded-pill">
                            Nuevo
                        </a>
                    </div>
                </div>

                <!-- Tabla de datos centrada -->
                <div class="table-responsive">
                    <table class="table table-sm table-bordered table-striped text-center">
                        <thead class="table-dark">
                            <tr>
                                <th class="sort asc">ID Cita</th>
                                <th class="sort asc">Fecha</th>
                                <th class="sort asc">Usuario</th>
                                <th class="sort asc">Cita atendida</th>
                                <th class="sort asc">Carnet</th>
                                <th class="sort asc">Nombres</th>
                                <th class="sort asc">Carrera</th>
                                <th class="sort asc">Grado</th>
                                <th class="sort asc">Sección</th>
                                <th class="sort asc">Plan</th>
                                <th class="sort asc">Comentarios</th>
                                <th class="sort asc">Acciones</th>
                            </tr>
                        </thead>

                        <tbody id="content">
                            <!-- Aquí se insertarán los datos mediante AJAX -->
                        </tbody>
                    </table>
                </div>

                <!-- Paginación centrada -->
                <div class="row justify-content-center text-center">
                    <div class="col-12 col-md-4">
                        <label id="lbl-total"></label>
                    </div>
                    <div class="col-12 col-md-4" id="nav-paginacion"></div>

                    <!-- Inputs ocultos para paginación -->
                    <input type="hidden" id="pagina" value="1">
                    <input type="hidden" id="orderCol" value="0">
                    <input type="hidden" id="orderType" value="asc">
                </div>
            </div>
        </div>
    </main>

    <!-- Script AJAX para obtener datos -->
    <script>
    document.addEventListener("DOMContentLoaded", () => {
        getData(); // Cargar los datos al inicio
        document.getElementById("campo").addEventListener("keyup", debounce(getData,
            500)); // Buscador con retardo
        document.getElementById("num_registros").addEventListener("change", getData);
        document.querySelectorAll(".sort").forEach(column => column.addEventListener("click", ordenar));
    });

    // Función para evitar múltiples solicitudes de búsqueda
    function debounce(func, delay) {
        let timeout;
        return function() {
            clearTimeout(timeout);
            timeout = setTimeout(func, delay);
        };
    }

    function getData() {
        const input = document.getElementById("campo").value;
        const num_registros = document.getElementById("num_registros").value;
        const pagina = document.getElementById("pagina").value || 1;
        const orderCol = document.getElementById("orderCol").value;
        const orderType = document.getElementById("orderType").value;

        const formData = new FormData();
        formData.append('campo', input);
        formData.append('registros', num_registros);
        formData.append('pagina', pagina);
        formData.append('orderCol', orderCol);
        formData.append('orderType', orderType);

        fetch("loadcita.php", {
                method: "POST",
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById("content").innerHTML = data.data;
                document.getElementById("lbl-total").innerText =
                    `Mostrando ${data.totalFiltro} de ${data.totalRegistros} registros`;
                document.getElementById("nav-paginacion").innerHTML = data.paginacion;

                // Si no hay resultados y no es la primera página, volver a la primera
                if (data.data.includes('Sin resultados') && parseInt(pagina) !== 1) {
                    nextPage(1);
                }
            })
            .catch(err => console.error(err));
    }

    function nextPage(pagina) {
        document.getElementById('pagina').value = pagina;
        getData();
    }

    function ordenar(e) {
        const elemento = e.target;
        const orderType = elemento.classList.contains("asc") ? "desc" : "asc";

        document.getElementById('orderCol').value = elemento.cellIndex;
        document.getElementById("orderType").value = orderType;
        elemento.classList.toggle("asc");
        elemento.classList.toggle("desc");

        getData();
    }

    // Función de impresión
    function imprimircita(idcita) {
        var url = 'imprimircita.php?idcita=' + idcita;
        var printWindow = window.open(url, '_blank', 'width=800,height=600');
        printWindow.focus();
    }
    </script>

    <!-- Bootstrap JS actualizado -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-tn8W9Fk82lw9I2Y5DbBY7sO4Zm0v7Z6iQgAo6BdCeKusVbWq1gsD6/g+cQsL5F5" crossorigin="anonymous">
    </script>

</body>

</html>