@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 Nichos</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..." value="{{ request()->input('searchTerm', '') }}">
<div id="table-container">
    @include('recibo.table', ['recibos' => $recibos])
</div>
@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().trim();

            // Realizar la búsqueda mediante AJAX
            fetch(`{{ route('recibo.search') }}?query=${searchValue}`)
                .then(response => response.text())
                .then(html => {
                    // Reemplazar el contenido de la tabla con los resultados filtrados
                    document.getElementById('table-container').innerHTML = html;
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
@stop