@extends('layouts.app')
@section('title', __('Gestión de Usuarios'))

@section('content')
<div class="page-header d-flex justify-content-between align-items-start flex-wrap gap-3">
    <div>
        <h1><i class="bi bi-people me-2" style="color:#2563a8"></i>{{ __('Gestión de Usuarios') }}</h1>
        <p>{{ __('Administra los usuarios y sus perfiles de acceso al sistema') }}</p>
    </div>
    @if(auth()->user()->perfil === 'SuperAdmin')
    <a href="{{ route('admin.usuarios.create') }}" class="btn btn-primary d-flex align-items-center gap-2" style="background:var(--primary);border:none;border-radius:8px">
        <i class="bi bi-person-plus-fill"></i> {{ __('Nuevo Usuario') }}
    </a>
    @endif
</div>

<!-- Stats row -->
<div class="row row-cols-2 row-cols-md-5 g-3 mb-4">
    @php
        $total      = $usuarios->total() ?? $usuarios->count();
        $superadm   = $usuarios->where('perfil','SuperAdmin')->count();
        $adm        = $usuarios->where('perfil','Admin')->count();
        $compras    = $usuarios->where('perfil','Compras')->count();
        $proveedor  = $usuarios->where('perfil','Proveedor')->count();
    @endphp

    @foreach([
        [__('SuperAdmin'), $superadm, 'person-badge', '#7c3aed'],
        [__('Admin'),      $adm,      'shield-check', '#0284c7'],
        [__('Compras'),    $compras,  'cart3', '#059669'],
        [__('Proveedor'),  $proveedor,'person-lines-fill', '#BF2288'],
        [__('Total'),      $total,    'people', '#e8a000'],
    ] as [$label, $count, $icon, $color])
    <div class="col">
        <div class="card h-100">
            <div class="card-body d-flex align-items-center gap-3 p-3">
                <div style="width:42px;height:42px;border-radius:10px;background:{{ $color }}1a;display:flex;align-items:center;justify-content:center">
                    <i class="bi bi-{{ $icon }}" style="font-size:1.25rem;color:{{ $color }}"></i>
                </div>
                <div>
                    <div style="font-size:1.4rem;font-weight:700;color:var(--primary);line-height:1">{{ $count }}</div>
                    <div style="font-size:0.78rem;color:var(--text-muted)">{{ $label }}</div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<!-- Table card -->
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="bi bi-table me-2"></i>{{ __('Listado de Usuarios') }}</span>

        <!-- Search -->
        <form method="GET" class="d-flex gap-2">
            <div class="input-group" style="width:260px">
                <span class="input-group-text bg-white border-end-0" style="border:1.5px solid #e2e8f0">
                    <i class="bi bi-search text-muted" style="font-size:.8rem"></i>
                </span>
                <input type="text" name="buscar" class="form-control border-start-0" placeholder="{{ __('Buscar usuario…') }}"
                       value="{{ request('buscar') }}" style="border:1.5px solid #e2e8f0;border-left:none;font-size:.85rem">
            </div>
            <select name="perfil" class="form-select" style="width:130px;font-size:.85rem;border:1.5px solid #e2e8f0">
                <option value="">{{ __('Todos') }}</option>
                <option value="SuperAdmin" {{ request('perfil')=='SuperAdmin'?'selected':'' }}>{{ __('SuperAdmin') }}</option>
                <option value="Admin"      {{ request('perfil')=='Admin'     ?'selected':'' }}>{{ __('Admin') }}</option>
                <option value="Compras"    {{ request('perfil')=='Compras'   ?'selected':'' }}>{{ __('Compras') }}</option>
				<option value="Proveedor"    {{ request('perfil')=='Proveedor'   ?'selected':'' }}>{{ __('Proveedor') }}</option>
            </select>
            <button class="btn btn-sm btn-outline-secondary" type="submit">{{ __('Filtrar') }}</button>
        </form>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead style="background:#f8fafc;font-size:.82rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)">
                <tr>
                    <th class="ps-4">{{ __('Usuario') }}</th>
                    <th>{{ __('Correo') }}</th>
                    <th>{{ __('Perfil') }}</th>
                    <th>{{ __('Proveedor') }}</th>
                    <th>{{ __('Estado') }}</th>
                    <th>{{ __('Creado') }}</th>
                    <th class="text-end pe-4">{{ __('Acciones') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($usuarios as $usuario)
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center gap-2">
                            <div style="width:34px;height:34px;border-radius:50%;background:#1a3a5c1a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;color:var(--primary)">
                                {{ strtoupper(substr($usuario->name, 0, 2)) }}
                            </div>
                            <span style="font-weight:500;font-size:.88rem">{{ $usuario->name }}</span>
                        </div>
                    </td>
                    <td style="font-size:.88rem;color:var(--text-muted)">{{ $usuario->email }}</td>
                    <td>
                        @php
                            $cls = ['SuperAdmin'=>'badge-superadmin','Admin'=>'badge-admin','Compras'=>'badge-compras','Proveedor'=>'badge-proveedor'][$usuario->perfil] ?? 'bg-secondary';
                        @endphp
                        <span class="badge {{ $cls }}" style="border-radius:6px;padding:4px 10px;font-size:.75rem">
                            {{ $usuario->perfil }}
                        </span>
                    </td>
                    <td style="font-size:.88rem;color:var(--text-muted)">
                        {{ $usuario->proveedor->Proveedor ?? '—' }}
                    </td>
                    <td>
                        @if($usuario->activo)
                            <span class="badge bg-success bg-opacity-10 text-success" style="border-radius:6px;padding:4px 10px;font-size:.75rem">{{ __('Activo') }}</span>
                        @else
                            <span class="badge bg-danger bg-opacity-10 text-danger" style="border-radius:6px;padding:4px 10px;font-size:.75rem">{{ __('Inactivo') }}</span>
                        @endif
                    </td>
                    <td style="font-size:.82rem;color:var(--text-muted)">
                        {{ $usuario->created_at ? \Carbon\Carbon::parse($usuario->created_at)->format('d/m/Y') : '—' }}
                    </td>
                    <td class="text-end pe-4">
                        <div class="d-flex justify-content-end gap-1">
                            <a href="{{ route('admin.usuarios.edit', $usuario) }}" class="btn btn-sm btn-outline-primary" style="border-radius:6px;font-size:.78rem" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ __('Editar') }}">
                                <i class="bi bi-pencil"></i>
                            </a>
                            @if(auth()->user()->perfil === 'SuperAdmin' && $usuario->id !== auth()->id())
                            <form method="POST" action="{{ route('admin.usuarios.destroy', $usuario) }}"
                                  onsubmit="return confirm('{{ __('¿Eliminar usuario :name?', ['name' => addslashes($usuario->name)]) }}')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger" style="border-radius:6px;font-size:.78rem" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ __('Eliminar') }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-5 text-muted">
                        <i class="bi bi-people display-6 d-block mb-2 opacity-25"></i>
                        {{ __('No se encontraron usuarios') }}
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($usuarios->hasPages())
    <div class="card-footer bg-white d-flex justify-content-end" style="border-top:1px solid var(--border)">
        {{ $usuarios->withQueryString()->links() }}
    </div>
    @endif
</div>
@endsection