@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')

@stop

@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>
<input type="text" id="searchInput" class="form-control mb-2" placeholder="Buscar por nombre...">
<table class="table table-hover">
    <thead class="table-primary">
    <tr>
        <th>ID</th>
        <th>Nombre Familiar</th>
        <th>Apellidos Paterno</th>
        <th>Apellidos Materno</th>
        <th>Fecha</th>
        <th>Acciones</th>
    </tr>
    </thead>
    <tbody id="recibosTableBody">
        @foreach($recibo_cinerarios  as $recibos_c)
        <tr class="recibos_cinerario-row">
            <td>{{ $recibos_c->id }}</td>
            <td>{{ $recibos_c->familiar_difuntos_cremados->nombre ?? 'No disponible' }}</td>
            <td>{{ $recibos_c->familiar_difuntos_cremados->apellido_paterno ?? 'No disponible' }}</td>
            <td>{{ $recibos_c->familiar_difuntos_cremados->apellido_materno ?? 'No disponible' }}</td>
            <td>{{ $recibos_c->fecha }}</td>
            <td>
                <a href="{{ route('recibo_cinerario.export', $recibos_c->id) }}" class="btn btn-primary" target="_blank">
                <i class="fas fa-money-check"></i> <!-- Ícono de Recibo -->
            </td>
        </tr>
    @endforeach
    
    </tbody>
</table>
@stop

@section('css')
    {{-- Add here extra stylesheets --}}
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop

@section('js')
    <script>
        document.getElementById('searchInput').addEventListener('input', function() {
            var searchValue = this.value.toLowerCase();
            var rows = document.getElementsByClassName('recibos-row');
            for (var i = 0; i < rows.length; i++) {
                var rowData = rows[i].textContent.toLowerCase();
                if (rowData.includes(searchValue)) {
                    rows[i].style.display = '';
                } else {
                    rows[i].style.display = 'none';
                }
            }
        });
    </script>
@stop