@if(Auth::user()->root )
<h2 class="destacado mb-5">Listado de usuarios administradores </h2>

<div class="row">
    <div class="col-12">
        <div class="form-error bg-danger" style="display:none">
            <div class="col-10 ">
                <p>(*) Los campos de fecha ingreso y fecha de respuesta fueron obtenidos según la hora de Chile continental.</p>
            </div>
        </div>

        <form name="buscarEventosSistema" id="buscarEventosSistema" method="GET" action="{{ url('admin/tools/usuarios_administrador') }}" role="form">
            <div class="row">
                <div class="col">
                    <label for="" class="form-label">Fecha Inicio</label>
                    <input type="date" id="fecha_inicio" class="form-control" name="fecha_inicio" value="{{$fecha_inicio !== null? $fecha_inicio :''}}" required/>
                </div>
                <div class="col">
                    <label for="" class="form-label">Fecha Término</label>
                    <input type="date" id="fecha_termino" class="form-control" name="fecha_termino" value="{{$fecha_termino !== null? $fecha_termino :''}}"   required/>
                </div>
            </div>

            <div class="row">
                <div class="col-12 mt-2 text-right">
                    <button type="submit" class="btn btn-primary">Buscar</button>
                    <a href="{{ url('admin/tools/usuarios_administrador') }}" class="btn btn-light">Limpiar</a>
                </div>
            </div>

        @if($data == null && $fecha_inicio != null && $fecha_termino != null)
        <hr>
        <h5>No hay registros en el período consultado.</h5>
        @elseif ($data != null)
        <hr>
        <div class="row">
            <div class="col-12 col-lg-6">
                    <div class="input-group mb-2">
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Buscar por Nombre o Rut/Pasaporte">
                        <button type="submit" class="btn btn-outline-primary">Buscar</button>
                        <button type="button" class="btn btn-outline-secondary" onclick="limpiarBusqueda()">Limpiar</button>
                    </div>
            </div>
            <div class="col-12 col-lg-6 text-right">
                <input class="line btn btn-success" type="submit" name="action" value="Exportar a Excel" />
            </div>
        </div>
        </form>

        <div class="row donativos-table">
            <div class="col-12 table_movil">
                <table class="table table-striped mt-1">
                    <thead class="table-dark">
                        <tr>
                            <th scope="col">Pasaporte</th>
                            <th scope="col">Nombre</th>
                            <th scope="col">Fecha inicio</th>
                            <th scope="col">Fecha término</th>
                            <th scope="col">Institucion</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data as $usuario)
                        <tr>
                            <td>{{ $usuario['pasaporte'] }}</td>
                            <td>{{ $usuario['nombres'].' '.$usuario['apellidos'] }}</td>
                            <td>{{ $usuario['fecha_inicio'] }}</td>
                            <td>{{ $usuario['fecha_termino'] }}</td>
                            <td>{{ $usuario['institucion'] }}</td>
                        </tr>
                        @endforeach
                    <tbody>
                    </tbody>
                </table>
                <div class="mt-3">
                    {{ $pertenencias->appends(request()->except('page'))->links() }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
<script>
    function limpiarBusqueda() {
        var inputBusqueda = document.querySelector('input[name="search"]');
        inputBusqueda.value = '';
        document.querySelector('form').submit();
    }
</script>
@endif