@extends('header_new')

@section('main')

<main class='container mt-0 mt-lg-5'>
    <div id="buscadorClientes" class='row justify-content-center align-items-center pt-3 pt-xxl-5'>
        <div class='col-12 col-lg-10 my-2 my-xxl-5'>
            <div class='text-center my-5 pt-0 pt-xxl-5'>
                <h2 id="tituloMod">Buscar Usuario</h2>
            </div>
                <div class='row justify-content-center my-2'>
                    <small class="text-secondary text-center">Ingrese usuario <b>(login)</b> o mail del usuario</small>
                </div>
                <div class='input-group shadow mt-3'>
                    <input type="hidden" id='token' name="_token" value="{{ csrf_token() }}" />
                    <input type="hidden" id='clienteOk' name="clienteOk" value="">
                    <input type="text" id='usuario' name='usuario' value='' class='form-control form-control-lg text-center' list='lista_usuarios' placeholder='Buscar Usuario...' autocomplete='off'>
                    <span class='input-group-text'>
                        <i id="lupa" class="bi bi-search fs-5"></i>
                        <div id="loading" class="spinner-border text-fidelitas ms-auto d-none" role="status" aria-hidden="true"></div>
                    </span>
                </div>
                <div id='notificacion' class='mt-2'></div>
                <div id='lista_usuarios' class='overflow-auto col-12 py-2 list-group'></div>
                <div id="datos_usuario" class="mt-4"></div>
            <div id="buscando"></div>
        </div>
    </div>

    @if($errors->any())
    <div class="row justify-content-center">
        <div class="col-3">
            <h6 class="text-center text-danger my-5">{{$errors->first()}}</h6>
        </div>
    </div>
    @endif

    <footer class='continer fixed-bottom bg-white'>
        <div class='row justify-content-end'>
            <div class='col-12 col-md-2 text-primary text-center fst-italic'>
                <p>Cantidad Usuarios: <strong>{{ ($usuarios['activos'] + $usuarios['inactivos'])}}</strong></p>
            </div>
            <div class='col-12 col-md-2 text-success text-center fst-italic'>
                <p>Activos: <strong>{{ $usuarios['activos'] }}</strong></p>
            </div>
            <div class='col-12 col-md-2 text-danger text-center fst-italic'>
                <p>No activos: <strong>{{ $usuarios['inactivos'] }}</strong></p>
            </div>
        </div>
    </footer>
@endsection

@section('funcionesJs')
<script>
    $(document).ready(function(){
      //  busqueda_cliente(0,1);
       //  altaNuevoCliente();

        $('#usuario').removeClass('d-none');
            busquedaPorUsuario('#usuario');
    });
</script>
@endsection