{{-- resources/views/users/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Lista de Usuarios')

@section('content')
    <div class="container">
        <h1 class="mb-4 text-white"><i class="bi bi-person-gear me-2"></i> Lista de Usuarios</h1>

        @if (session('success'))
            <div class="alert alert-success shadow-sm mb-3">{{ session('success') }}</div>
        @endif

        <div class="d-flex justify-content-between align-items-center mb-3">
            <a href="{{ route('users.create') }}" class="btn btn-primary shadow-sm"><i class="bi bi-plus-circle me-2"></i> Crear Nuevo Usuario</a>
            <form class="d-flex">
                <input class="form-control me-2 shadow-sm" type="search" placeholder="Buscar Usuario..." aria-label="Search">
                <button class="btn btn-outline-light shadow-sm" type="submit"><i class="bi bi-search"></i></button>
            </form>
        </div>

        <div class="card bg-dark shadow-sm text-white">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped table-dark m-0 align-middle">
                        <thead>
                            <tr class="text-white">
                                <th scope="col">ID</th>
                                <th scope="col">Alias</th>
                                <th scope="col">Nombre Completo</th>
                                <th scope="col">Email</th>
                                <th scope="col">Rol</th>
                                <th scope="col">Celular</th>
                                <th scope="col" class="text-end">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($users as $user)
                                <tr>
                                    <td>{{ $user->id_user }}</td>
                                    <td>{{ $user->alias }}</td>
                                    <td>{{ $user->nom_ape ?? '-' }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ $user->rol ?? '-' }}</td>
                                    <td>{{ $user->cel_user ?? '-' }}</td>
                                    <td class="text-end">
                                        <div class="d-flex justify-content-end">
                                            <a href="{{ route('users.show', $user) }}" class="btn btn-sm btn-outline-info shadow-sm me-1" title="Ver detalles"><i class="bi bi-eye"></i></a>
                                            <a href="{{ route('users.edit', $user) }}" class="btn btn-sm btn-outline-warning shadow-sm me-1" title="Editar usuario"><i class="bi bi-pencil"></i></a>
                                            <form action="{{ route('users.destroy', $user) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger shadow-sm" onclick="return confirm('¿Estás seguro de eliminar este usuario?')" title="Eliminar usuario"><i class="bi bi-trash"></i></button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">No hay usuarios registrados.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="mt-4 text-white">
            {{ $users->links() }} {{-- Muestra los enlaces de paginación --}}
        </div>
    </div>
@endsection