@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
@stop

@section('content')
<div class="d-flex align-items-center justify-content-between">
    <h2 class="mb-0">Reporte de Pagos</h2>
</div>
<hr />
<div class="input-group mb-3">
    <input type="text" id="searchInput" class="form-control" placeholder="Buscar...">
  </div>
<table id="alumnosTable" class="table table-hover">
    <thead class="table-primary">
        <tr>
            <th>Codigo</th>
            <th>Nombre</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        @foreach($arrendatario as $ARRENDATARIOS)
            <tr>
                <td>{{ $ARRENDATARIOS->id }}</td>
                <td>{{ $ARRENDATARIOS->nombre }} </td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPagos{{$ARRENDATARIOS->id}}">
                        Ver Pagos
                    </button>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
@foreach($arrendatario as $ARRENDATARIOS)
    <!-- Modal -->
    <div class="modal fade" id="modalPagos{{ $ARRENDATARIOS->id }}" tabindex="-1" role="dialog" aria-labelledby="modalPagosLabel{{ $ARRENDATARIOS->id }}" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalPagosLabel{{ $ARRENDATARIOS->id }}">Pagos de {{ $ARRENDATARIOS->nombre }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <thead>
                            <tr>
                               
                                <th>Inmueble</th>
                                <th>Mes/Cuota</th>
                                <th>Monto</th>
                          
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($ARRENDATARIOS->pagos() as $pago)
                 <tr>
                   
                 <td>{{ $pago->inmueble->direccion }}</td>
                  <td>{{ $pago->meses }}</td>
                  <td>{{ $pago->monto }}</td>

                     </tr>
                    @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <!-- Resto del pie del modal -->
                </div>
            </div>
        </div>
    </div>
@endforeach
@stop

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

@section('js')
    <script>
        console.log("Hi, I'm using the Laravel-AdminLTE package!");

        document.getElementById('searchInput').addEventListener('keyup', function() {
            var input, filter, table, tr, td, i, j, txtValue;
            input = document.getElementById('searchInput');
            filter = input.value.toUpperCase();
            table = document.getElementById('alumnosTable');
            tr = table.getElementsByTagName('tr');

            for (i = 1; i < tr.length; i++) {
                tr[i].style.display = 'none';
                td = tr[i].getElementsByTagName('td');
                for (j = 0; j < td.length; j++) {
                    if (td[j]) {
                        txtValue = td[j].textContent || td[j].innerText;
                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = '';
                            break;
                        }
                    }
                }
            }
        });
    </script>
@stop