@extends('layouts.app')

@section('title', 'Gestión de Usuarios - ERP LOGÍSTICO')
@section('header_title', 'Configuración de Usuarios y Permisos')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0 text-dark fw-bold">
                    <i class="bi bi-people-fill text-danger me-2"></i>Listado de Usuarios
                </h5>
                <a href="{{ route('users.create') }}" class="btn btn-danger btn-sm px-3 fw-semibold">
                    <i class="bi bi-person-plus-fill me-1"></i> Crear Nuevo Usuario
                </a>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" style="min-width: 900px;">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4" style="width: 250px;">Usuario / Email</th>
                                <th style="width: 150px;">Rol</th>
                                <th style="width: 200px;">Sucursal</th>
                                <th>Permisos en Incidencias</th>
                                <th class="pe-4" style="width: 130px; text-align: right;">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users as $user)
                                <tr>
                                    <!-- User info -->
                                    <td class="ps-4">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="user-avatar" style="width: 40px; height: 40px; font-size: 1rem;">
                                                {{ strtoupper(substr($user->name, 0, 2)) }}
                                            </div>
                                            <div>
                                                <div class="fw-bold text-dark">{{ $user->name_with_role }}</div>
                                                <div class="text-muted small">{{ $user->email }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    
                                    <!-- Role -->
                                    <td>
                                        <span class="badge @if($user->role === 'admin') bg-danger bg-opacity-10 text-danger @elseif($user->role === 'aprobador') bg-warning bg-opacity-10 text-warning @elseif($user->role === 'jefe_local') bg-primary bg-opacity-10 text-primary @elseif($user->role === 'gerencia') bg-info bg-opacity-10 text-info @else bg-secondary bg-opacity-10 text-secondary @endif px-3 py-1 text-capitalize fw-semibold">
                                            {{ str_replace('_', ' ', $user->role) }}
                                        </span>
                                    </td>
                                    
                                    <!-- Sucursal -->
                                    <td>
                                        @if($user->sucursal)
                                            <div class="fw-semibold text-dark">
                                                <i class="bi bi-shop text-danger me-1"></i>{{ $user->sucursal->nombre }}
                                            </div>
                                        @else
                                            <span class="text-muted small"><i class="bi bi-globe me-1"></i>Multisucursal</span>
                                        @endif
                                    </td>

                                    <!-- Permissions -->
                                    <td>
                                        <div class="d-flex flex-wrap gap-1">
                                            <!-- Create -->
                                            <span class="badge rounded-pill @if($user->can_create_tickets) bg-success-subtle text-success border border-success-subtle @else bg-light text-muted border border-secondary-subtle opacity-50 @endif px-2 py-1 small fw-medium" title="Reportar incidencias">
                                                <i class="bi bi-plus-circle-fill me-1"></i>Reportar
                                            </span>
                                            
                                            <!-- Assign -->
                                            <span class="badge rounded-pill @if($user->can_assign_tickets) bg-primary-subtle text-primary border border-primary-subtle @else bg-light text-muted border border-secondary-subtle opacity-50 @endif px-2 py-1 small fw-medium" title="Asignar responsables">
                                                <i class="bi bi-person-fill-gear me-1"></i>Asignar
                                            </span>
                                            
                                            <!-- Resolve -->
                                            <span class="badge rounded-pill @if($user->can_resolve_tickets) bg-warning-subtle text-warning border border-warning-subtle @else bg-light text-muted border border-secondary-subtle opacity-50 @endif px-2 py-1 small fw-medium" title="Registrar resolución de ticket">
                                                <i class="bi bi-tools me-1"></i>Resolver
                                            </span>
                                            
                                            <!-- Close -->
                                            <span class="badge rounded-pill @if($user->can_close_tickets) bg-dark-subtle text-dark border border-dark-subtle @else bg-light text-muted border border-secondary-subtle opacity-50 @endif px-2 py-1 small fw-medium" title="Validar y cerrar incidencias">
                                                <i class="bi bi-clipboard-check-fill me-1"></i>Validar/Cerrar
                                            </span>
                                            
                                            <!-- Delete -->
                                            <span class="badge rounded-pill @if($user->can_delete_tickets) bg-danger-subtle text-danger border border-danger-subtle @else bg-light text-muted border border-secondary-subtle opacity-50 @endif px-2 py-1 small fw-medium" title="Eliminar incidencias">
                                                <i class="bi bi-trash-fill me-1"></i>Eliminar
                                            </span>

                                            <!-- Ver Dashboard -->
                                            <span class="badge rounded-pill @if($user->can_view_dashboard) bg-info-subtle text-info border border-info-subtle @else bg-light text-muted border border-secondary-subtle opacity-50 @endif px-2 py-1 small fw-medium" title="Ver dashboard de control">
                                                <i class="bi bi-pie-chart-fill me-1"></i>Dashboard
                                            </span>
                                        </div>
                                    </td>

                                    <!-- Actions -->
                                    <td class="pe-4 text-end">
                                        <div class="d-flex justify-content-end gap-2">
                                            <a href="{{ route('users.edit', $user->id) }}" class="btn btn-light btn-sm border" title="Editar usuario y permisos">
                                                <i class="bi bi-pencil-fill text-primary"></i>
                                            </a>
                                            
                                            @if(Auth::id() !== $user->id)
                                                <form action="{{ route('users.destroy', $user->id) }}" method="POST" onsubmit="return confirm('¿Está seguro de que desea eliminar a este usuario?')" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-light btn-sm text-danger border" title="Eliminar usuario">
                                                        <i class="bi bi-trash-fill"></i>
                                                    </button>
                                                </form>
                                            @else
                                                <button class="btn btn-light btn-sm border" disabled title="No puedes eliminarte a ti mismo">
                                                    <i class="bi bi-trash-fill text-muted"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-5 text-muted">
                                        <i class="bi bi-people display-4 d-block mb-3 text-secondary"></i>
                                        No hay usuarios registrados.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection