@extends('adminlte::page')

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

@section('content')
<div class="row">
    <!-- Sección principal de usuarios -->
    <div class="col-md-8">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Usuarios registrados</h3>
                <br>
            </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();
                                                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>
    
@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}
    
    /* Estilos para la sección de manuales */
    .manual-card {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        transition: all 0.3s ease;
        height: 100%;
    }
    .manual-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .manual-card i {
        transition: all 0.3s ease;
    }
    .manual-card:hover i {
        transform: scale(1.1);
    }
</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)');
});

// Opcional: Tracking de descargas
document.querySelectorAll('.manual-card a').forEach(link => {
    link.addEventListener('click', function() {
        const manualType = this.textContent.includes('Usuario') ? 'user_manual' : 'tech_manual';
        // Aquí puedes agregar código para registrar la descarga si lo deseas
        console.log(`Descargando: ${manualType}`);
    });
});
</script>
@stop