@extends('adminlte::page')

@section('content_header')
<h1><b>Listado de usuarios</b></h1>
<hr>
@stop

@section('content')
  <div class="row">
    <div class="col-md-8">
        <div class="card card-outline card-primary">
          <div class="card-header">
            <h3 class="card-title">Usuarios registrados</h3>

            <div class="card-tools">
             <a href="{{ url('/admin/usuarios/create') }}" class="btn btn-primary">Crear nuevo</a>
            </div>
            <!-- /.card-tools -->
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <table id="example1" class="table table-bordered table-hover table-striped table-sm">
                <thead>
                    <tr>
                        <th style="text-align: center">Nro</th>
                        <th style="text-align: center">Rol del Usuario</th>
                        <th style="text-align: center">Nombre</th>
                        <th style="text-align: center">Email</th>
                        <th style="text-align: center">Accion</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    $contador = 1;
                    @endphp
                    @foreach ($usuarios as $usuario)
                        <tr>
                            <td style="text-align: center">{{ $contador++}}</td>
                            <td style="text-align: center">{{ $usuario->roles->pluck('name')->implode(', ') }}</td>
                            <td style="text-align: center">{{ $usuario->name }}</td>
                            <td style="text-align: center">{{ $usuario->email }}</td>
                            <td style="text-align: center">
                                <div class="btn-group" role="group" aria-label="Acciones">
                                    <a href="{{ url('/admin/usuarios', $usuario->id) }}" style="border-radius: 4px 0px 0px 4px" class="btn btn-info btn-sm"><i class="fas fa-eye"></i></a>
                                    <a href="{{ url('/admin/usuarios/' . $usuario->id . '/edit') }}" class="btn btn-success btn-sm">
                                        <i class="fas fa-pencil-alt"></i>
                                    </a>
                                    <form action="{{ url('/admin/usuarios', $usuario->id) }}" method="post" onclick="preguntar{{ $usuario->id }}(event)" id="miFormulario{{ $usuario->id }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm" style="border-radius: 0px 4px 4px 0px"><i class="fas fa-trash"></i></button>
                                    </form>
                                    <script>
                                        function preguntar{{ $usuario->id }}(event) {
                                            event.preventDefault(); // Evitar el envío inmediato del formulario
                                            Swal.fire({
                                                title: 'Desea eliminar el registro',
                                                text: '',
                                                icon: 'question',
                                                showDenyButton: true,
                                                confirmButtonText: 'Eliminar',
                                                confirmButtonColor: '#a5161d',
                                                denyButtonColor: '#270a0a',
                                                denyButtonText: 'Cancelar',
                                            }).then((result) => {
                                                if (result.isConfirmed) {
                                                    var form = $('#miFormulario{{ $usuario->id }}');
                                                    form.submit();
                                                }
                                            });
                                        }
                                    </script>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
  </div>
@stop

@section('css')
<style>
    #example1_wrapper .dt-buttons {
        background-color: transparent;
        box-shadow: none;
        border: none;
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 15px;
    }
    #example1_wrapper .btn {
        color: #fff;
        border-radius: 4px;
        padding: 5px 15px;
        font-size: 14px;
    }
    .btn-danger {background-color: #dc3545; border: none}
    .btn-success {background-color: #28a745; border:none}
    .btn-info {background-color: #17a2b8; border:none}
    .btn-warning {background-color: #ffc107; color: #212529; border:none}
    .btn-secondary {background-color: #6e7176; color: #212529; border:none}
</style>
@stop

@section('js')
<script>
$(function () {
    $("#example1").DataTable({
        "pageLength": 5,
        "language": {
            "emptyTable": "No hay información",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ usuario",
            "infoEmpty": "Mostrando 0 a 0 de 0 usuario",
            "infoFiltered": "(Filtrado de _MAX_ total usuario)",
            "lengthMenu": "Mostrar _MENU_ usuario",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscador",
            "zeroRecords": "Sin resultados encontrados",
            "paginate": {
                "first": "Primero",
                "last": "Último",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        },
        "responsive": true,
        "lengthChange": true,
        "autoWidth": false,
        buttons: [
            {text: '<i class="fas fa-copy"></i> COPIAR', extend: 'copy', className: 'btn btn-default'},
            {text: '<i class="fas fa-file-pdf"></i> PDF', extend: 'pdf', className: 'btn btn-danger'},
            {text: '<i class="fas fa-file-excel"></i> EXCEL', extend: 'excel', className: 'btn btn-success'},
            {text: '<i class="fas fa-file-csv"></i> CSV', extend: 'csv', className: 'btn btn-info'},
            {text: '<i class="fas fa-print"></i> IMPRIMIR', extend: 'print', className: 'btn btn-warning'},
        ]
    }).buttons().container().appendTo('#example1_wrapper .row:eq(0)');
});
</script>
@stop