@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">Arrendatarios</h2>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create">
        Agregar Arrendatario
    </button>
</div>
<hr />
<!-- Campo de búsqueda -->
<div class="input-group mb-3">
    <input type="text" id="searchInput" class="form-control" placeholder="Buscar por nombre o DNI...">
</div>
<div id="table-container">
    @include('arrendatario.table', ['arrendatario' => $arrendatario])
</div>
@include('arrendatario.create')
@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('arrendatario.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