@extends('layouts.admin')

@section('contenido')

<div class="row justify-content-center align-items-center">
    <div class="col-12 col-md-11">
        <h3>Listado de Usuarios</h3>
    </div>
</div>

<div class="row justify-content-center align-items-center">
    <div class="col-md-2">
        <a href="{{ route('usuarios.create') }}"
           class="btn btn-success btn-block btn-lg">
            Nuevo
        </a>
    </div>
</div>

<br>

<div class="row justify-content-center align-items-center">
    <div class="col-12 col-md-11">

        @include('compartido.mensajes')
        @include('compartido.errores')

        <div class="table-responsive">

            <table class="table table-striped table-bordered table-hover"
                   id="example">

                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Nombre</th>
                        <th>Email</th>
                        <th>Acciones</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($usuarios as $usuario)
                    <tr>
                        <td>{{ $usuario->id }}</td>
                        <td>{{ $usuario->name }}</td>
                        <td>{{ $usuario->email }}</td>

                        <td align="center">

                            <a class="btn btn-info"
                               href="{{ route('usuarios.show', $usuario->id) }}"
                               title="Ver">
                                <i class="fa fa-eye"></i>
                            </a>

                            <a class="btn btn-warning"
                               href="{{ route('usuarios.edit', $usuario->id) }}"
                               title="Editar">
                                <i class="fa fa-pencil"></i>
                            </a>

                            <form method="POST"
                                  action="{{ route('usuarios.destroy', $usuario->id) }}"
                                  style="display:inline;">

                                @csrf
                                @method('DELETE')

                                <button type="submit"
                                        class="btn btn-danger"
                                        onclick="return confirm('¿Está seguro de eliminar el usuario?');"
                                        title="Eliminar">
                                    <i class="fa fa-remove"></i>
                                </button>

                            </form>

                        </td>
                    </tr>
                    @endforeach
                </tbody>

            </table>

        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    $('#example').DataTable({
        dom: 'Bfrtip',
        buttons: ['excel'],
        pageLength: 5
    });
</script>
@endpush