@extends('admin.layouts.master')

@section('title', 'Usuarios Admin - Lash Vanshy')

@section('page-title', 'Gestión de Usuarios')

@section('content')
<!-- Header Actions -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-0">Usuarios Administradores</h2>
        <p class="text-muted mb-0">Administra los usuarios del panel</p>
    </div>
    <a href="{{ route('admin.users.create') }}" class="btn btn-primary-admin">
        <i class="fas fa-plus me-2"></i>Nuevo Usuario
    </a>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
    <div class="col-sm-4">
        <div class="stat-card py-3">
            <div class="stat-info">
                <h3>{{ $usuarios->total() }}</h3>
                <p>Total Usuarios</p>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="stat-card py-3">
            <div class="stat-info">
                <h3>{{ $usuarios->where('rol', 'super_admin')->count() }}</h3>
                <p>Super Admin</p>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="stat-card py-3">
            <div class="stat-info">
                <h3>{{ $usuarios->where('rol', 'admin')->count() }}</h3>
                <p>Admin</p>
            </div>
        </div>
    </div>
</div>

<!-- Users Table -->
<div class="card-admin">
    <div class="card-body">
        @if($usuarios->isNotEmpty())
        <div class="table-responsive">
            <table class="table table-admin">
                <thead>
                    <tr>
                        <th>Usuario</th>
                        <th>Email</th>
                        <th>Rol</th>
                        <th>Fecha Alta</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($usuarios as $usuario)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="user-avatar-sm">
                                    {{ strtoupper(substr($usuario->name, 0, 1)) }}
                                </div>
                                <strong>{{ $usuario->name }}</strong>
                            </div>
                        </td>
                        <td>{{ $usuario->email }}</td>
                        <td>
                            <span class="badge-admin {{ $usuario->rol === 'super_admin' ? 'bg-danger' : 'bg-primary' }}">
                                {{ $usuario->rol === 'super_admin' ? 'Super Admin' : 'Admin' }}
                            </span>
                        </td>
                        <td>{{ $usuario->created_at->format('d/m/Y') }}</td>
                        <td>
                            <div class="actions">
                                <a href="{{ route('admin.users.edit', $usuario) }}" 
                                   class="btn btn-sm btn-primary-admin"
                                   title="Editar">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @if($usuario->id !== Auth::guard('admin')->user()->id)
                                <form action="{{ route('admin.users.destroy', $usuario) }}" 
                                      method="POST" 
                                      class="d-inline"
                                      onsubmit="return confirm('¿Estás seguro de que deseas eliminar este usuario?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger-admin" title="Eliminar">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="d-flex justify-content-center">
            {{ $usuarios->links() }}
        </div>
        @else
        <div class="empty-state">
            <i class="fas fa-users"></i>
            <h4>No hay usuarios</h4>
            <p>Comienza agregando tu primer usuario administrador</p>
            <a href="{{ route('admin.users.create') }}" class="btn btn-primary-admin mt-3">
                <i class="fas fa-plus me-2"></i>Agregar Usuario
            </a>
        </div>
        @endif
    </div>
</div>

<style>
.user-avatar-sm {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
}
</style>
@endsection