@extends('adminlte::page')

@section('title', 'Boletas de Cinerarios')

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

<!-- Barra de Búsqueda en Tiempo Real -->
<input type="text" id="searchInput" class="form-control mb-2" placeholder="Buscar por nombre, apellido o DNI...">

<!-- Tabla de Recibos de Cinerarios -->
<table class="table table-hover">
    <thead class="table-primary">
        <tr>
            <th>ID</th>
            <th>Nombre Familiar</th>
            <th>Apellido Paterno</th>
            <th>Apellido Materno</th>
            <th>DNI</th>
            <th>Fecha</th>
            <th>Precio</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody id="recibosTableBody">
        @foreach($recibo_cinerarios as $recibos_c)
        <tr class="recibos_cinerario-row" data-id="{{ $recibos_c->id }}">
            <td>{{ $recibos_c->id }}</td>
            <td class="nombre-familiar">{{ optional($recibos_c->familiar_difuntos_cremados)->nombre ?? 'No disponible' }}</td>
            <td class="apellido-paterno">{{ optional($recibos_c->familiar_difuntos_cremados)->apellido_paterno ?? 'No disponible' }}</td>
            <td class="apellido-materno">{{ optional($recibos_c->familiar_difuntos_cremados)->apellido_materno ?? 'No disponible' }}</td>
            <td class="dni">{{ optional($recibos_c->familiar_difuntos_cremados)->dni ?? 'No disponible' }}</td>
            <td class="fecha">{{ $recibos_c->fecha }}</td>
            <td class="precio-cinerario">{{ optional($recibos_c->detalle_recibo_cinerario->first()->cinerarios)->precio_cinerario ?? '' }}</td>
            <td>
                <a href="{{ route('recibo_cinerario.export', $recibos_c->id) }}" class="btn btn-primary" target="_blank">
                    <i class="fas fa-money-check"></i>
                </a>
                <button type="button" class="btn btn-warning ml-2" data-toggle="modal" data-target="#updateModal-{{ $recibos_c->id }}">
                    <i class="fas fa-edit"></i>
                </button>
            </td>
        </tr>

        @include('recibo_cinerario.update', ['recibos_c' => $recibos_c])
        @endforeach
    </tbody>
</table>

<!-- Contenedor de Paginación -->
<div class="d-flex justify-content-center mt-3">
    <ul class="pagination" id="pagination"></ul>
</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("recibos_cinerario-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);

            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);
            }
        }

        searchInput.addEventListener("keyup", function() {
            const query = searchInput.value.toLowerCase().trim();
            let filteredRows = rows.filter(row => {
                return row.innerText.toLowerCase().includes(query);
            });

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

        showPage(currentPage, rows);
        updatePaginationButtons(rows);
    });

    function updateRecibo(id) {
        let formData = {
            _token: "{{ csrf_token() }}",
            _method: "PUT",
            nombre_familiar: document.getElementById("nombre_familiar-" + id).value,
            apellido_paterno: document.getElementById("apellido_paterno-" + id).value,
            apellido_materno: document.getElementById("apellido_materno-" + id).value,
            dni: document.getElementById("dni-" + id).value,
            fecha: document.getElementById("fecha-" + id).value,
            precio_cinerario: document.getElementById("precio_cinerario-" + id).value
        };

        fetch("{{ route('recibo_cinerario.update', '') }}/" + id, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                let row = document.querySelector(`[data-id='${id}']`);
                if (row) {
                    row.querySelector(".nombre-familiar").innerText = formData.nombre_familiar;
                    row.querySelector(".apellido-paterno").innerText = formData.apellido_paterno;
                    row.querySelector(".apellido-materno").innerText = formData.apellido_materno;
                    row.querySelector(".dni").innerText = formData.dni;
                    row.querySelector(".fecha").innerText = formData.fecha;
                    row.querySelector(".precio-cinerario").innerText = formData.precio_cinerario;
                }

                $('#updateModal-' + id).modal('hide'); // Cierra el modal después de actualizar
            }
        })
        .catch(error => {
            console.error("Error AJAX:", error);
        });
    }
</script>
@stop