@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content')
<br>
<div class="d-flex align-items-center justify-content-between">
    <h4 class="mb-0">Boletas de Nichos</h4>
    <a href="{{ route('pabellon') }}" class="btn btn-primary">Ir a Pabellones</a>
</div>
<br>

<!-- Barra de Búsqueda en Tiempo Real -->
<div class="d-flex align-items-center">
    <input type="text" id="searchInput" class="form-control me-3" placeholder="Buscar por nombre...">
</div>

<!-- Contenedor de la Tabla -->
<div id="table-container">
    @include('recibo.table', ['recibos' => $recibos])
</div>
@stop


@section('js')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const searchInput = document.getElementById("searchInput");
        const tableBody = document.getElementById("recibosTableBody");
        const rows = Array.from(tableBody.getElementsByClassName("recibo-row"));
        const paginationContainer = document.getElementById("pagination");
        const rowsPerPage = 10;
        let currentPage = 1;

        function showPage(page, filteredRows) {
            let start = (page - 1) * rowsPerPage;
            let end = start + rowsPerPage;

            rows.forEach(row => row.style.display = "none"); // Ocultar todas las filas

            filteredRows.slice(start, end).forEach(row => row.style.display = ""); // Mostrar solo las filas de la página actual
        }

        function updatePaginationButtons(filteredRows) {
            paginationContainer.innerHTML = "";
            let totalPages = Math.ceil(filteredRows.length / rowsPerPage);

            // Botón "Anterior"
            let prevLi = document.createElement("li");
            prevLi.classList.add("page-item");
            if (currentPage === 1) prevLi.classList.add("disabled");

            let prevA = document.createElement("a");
            prevA.classList.add("page-link");
            prevA.innerText = "«";
            prevA.href = "#";
            prevA.addEventListener("click", function(e) {
                e.preventDefault();
                if (currentPage > 1) {
                    currentPage--;
                    showPage(currentPage, filteredRows);
                    updatePaginationButtons(filteredRows);
                }
            });

            prevLi.appendChild(prevA);
            paginationContainer.appendChild(prevLi);

            // Botones de página
            for (let i = 1; i <= totalPages; i++) {
                let li = document.createElement("li");
                li.classList.add("page-item");
                if (i === currentPage) li.classList.add("active");

                let a = document.createElement("a");
                a.classList.add("page-link");
                a.innerText = i;
                a.href = "#";
                a.addEventListener("click", function(e) {
                    e.preventDefault();
                    currentPage = i;
                    showPage(currentPage, filteredRows);
                    updatePaginationButtons(filteredRows);
                });

                li.appendChild(a);
                paginationContainer.appendChild(li);
            }

            // Botón "Siguiente"
            let nextLi = document.createElement("li");
            nextLi.classList.add("page-item");
            if (currentPage === totalPages) nextLi.classList.add("disabled");

            let nextA = document.createElement("a");
            nextA.classList.add("page-link");
            nextA.innerText = "»";
            nextA.href = "#";
            nextA.addEventListener("click", function(e) {
                e.preventDefault();
                if (currentPage < totalPages) {
                    currentPage++;
                    showPage(currentPage, filteredRows);
                    updatePaginationButtons(filteredRows);
                }
            });

            nextLi.appendChild(nextA);
            paginationContainer.appendChild(nextLi);
        }

        searchInput.addEventListener("keyup", function() {
            const query = searchInput.value.toLowerCase().trim();
            let filteredRows = rows.filter(row => {
                const nombre = row.getAttribute("data-nombre");
                const apellidoPaterno = row.getAttribute("data-apellido-paterno");
                const apellidoMaterno = row.getAttribute("data-apellido-materno");
                const dni = row.getAttribute("data-dni");

                return (
                    nombre.includes(query) ||
                    apellidoPaterno.includes(query) ||
                    apellidoMaterno.includes(query) ||
                    dni.includes(query)
                );
            });

            currentPage = 1;
            showPage(currentPage, filteredRows);
            updatePaginationButtons(filteredRows);
        });

        showPage(currentPage, rows);
        updatePaginationButtons(rows);
    });
</script>
@stop