@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1></h1>
@stop

@section('content')
<div class="d-flex align-items-center justify-content-between">
    <h2 class="mb-0">COBRO ALQUILER</h2>
    <a
        href="{{ route('alquiler.create') }}"
        class="btn btn-primary">
        Realizar Cobro
    </a>
</div>
<hr/>
<!-- Campo de búsqueda -->
<div class="input-group mb-3">
    <input type="text" id="searchInput" class="form-control" placeholder="Buscar por arrendatario...">
</div>
<div id="table-container">
    @include('alquiler.table', ['alquiler' => $alquiler])
</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('alquiler.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