@extends('adminlte::page')

@section('title', 'CONSULTAR USUARIO')

@section('content_header')
    <h1 class="m-0 text-dark">CONSULTAR USUARIOS</h1>
@stop

@section('content')
    <div class="card uper">
        <div class="card-header">
            <div class="row">
                <div class="col-md-6">
                    <a href="{{ route('usuarios.create') }}" class="btn btn-warning">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                        </svg>
                        AGREGAR NUEVO
                    </a>
                </div>
                {{--                <div class="col-md-6" style="text-align: right">--}}
                {{--                    <button type="button" href="" class="btn btn-success" onclick="generarExcel()">--}}
                {{--                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-excel-fill" viewBox="0 0 16 16">--}}
                {{--                            <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.884 6.68 8 9.219l2.116-2.54a.5.5 0 1 1 .768.641L8.651 10l2.233 2.68a.5.5 0 0 1-.768.64L8 10.781l-2.116 2.54a.5.5 0 0 1-.768-.641L7.349 10 5.116 7.32a.5.5 0 1 1 .768-.64z"/>--}}
                {{--                        </svg>--}}
                {{--                        Excel--}}
                {{--                    </button>--}}
                {{--                </div>--}}
            </div>
        </div>
        <div class="card-body">
            @include('alerts.errors')
            @include('alerts.success')
            <br />
            <form action="{{ route('usuarios.index')}}" method="get">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        <label class="col-form-label" for="input_filtro_usuario">Nombre de usuario:</label>
                        <input class="form-control"
                            type="text"
                            name="nombre_usuario"
                            id="input_filtro_usuario"
                            value="{{ $filtroNombreUsuario ?? ''}}"
                            placeholder="Filtrar por usuario"
                            />
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-2">
                        <br />
                        <button type="submit" class="btn btn-success">Consultar</button>
                    </div>
                </div>
            </form>
            <hr />
            <table class="table table-hover" style="width: 100%;">
                <thead>
                    <tr>
                        <th>PRIVILEGIO</th>
                        <th>NOMBRE</th>
                        <th>USUARIO</th>
                        <th>EMAIL</th>
                    </tr>
                </thead>
                <tbody>
                @if ( count($data) < 1 )
                    <tr>
                        <td colspan="4">No se han encontrado registros...</td>
                    </tr>
                @endif
                @foreach ($data as $item)
                    <tr>
                        <td>{{ $item->privilegio->descripcion }}</td>
                        <td>{{ $item->nombre_completo }}</td>
                        <td>{{ $item->name }}</td>
                        <td>{{ $item->email }}</td>
                        <td>
                            <div class="row">
                                <a href="{{ route('usuarios.edit', $item->id) }}" class="btn btn-success" style="margin-left: 2px">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
                                    </svg>
                                </a>
                                <form id="form_eliminar_{{ $item->id }}" action="{{ route('usuarios.destroy', $item->id) }}" method="post">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-danger" style="margin-left: 2px" onclick="preEliminarRegistro({{ $item->id }});">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                                        </svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            <div class="py-4">
                <nav class="d-flex justify-content-end" aria-label="...">
                    {{$data->appends(request()->query())->links('pagination::bootstrap-4')}}
                </nav>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script type="text/javascript" defer>
        let locked = false; // para evitar, que el usuario pueda operar algo, mientras se envia una peticion al servidor

        $(document).ready(function(){
            //
        });

        function preEliminarRegistro(id){
            event.preventDefault();
            swal({
                title: "¿Estás seguro de eliminar el registro?",
                text: "Una vez eliminado el registro, no se podrá recuperar sus datos.",
                icon: "warning",
                buttons: true,
                dangerMode: true
            })
                .then((permitirEliminar) => {
                    if (permitirEliminar) {
                        swal("El registro será eliminado.", {
                            icon: "success",
                        });
                        document.getElementById('form_eliminar_' + id).submit();
                    } else {
                        event.preventDefault();
                        swal("Operación cancelada.");
                    }
                });
        }

    </script>
@endpush