@extends('admin.layout.app')

@section('content')
    <div class="p-10 max-w-7xl mx-auto space-y-8">
        @if (session('success'))
            <div class="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-green-800 font-body-sm">
                {{ session('success') }}
            </div>
        @endif

        <section class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-2">Administración</p>
                <h2 class="font-headline-lg text-headline-lg text-primary mb-2">Usuarios</h2>
                <p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
                    Registra usuarios administrativos y asigna el rol que define su acceso dentro del sistema.
                </p>
            </div>
            <a class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3 text-on-primary font-label-md text-label-md hover:bg-primary-container"
                href="{{ route('admin.usuarios.create') }}">
                <span class="material-symbols-outlined">person_add</span>
                Nuevo usuario
            </a>
        </section>

        <section class="bg-white rounded-xl border border-outline-variant p-6 shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
            <form class="flex flex-col gap-3 md:flex-row" method="GET" action="{{ route('admin.usuarios.index') }}">
                <div class="relative flex-1">
                    <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
                    <input class="w-full rounded-lg border-outline-variant bg-surface-container-lowest pl-10 py-3 font-body-sm text-body-sm focus:border-primary focus:ring-primary"
                        name="search" placeholder="Buscar por nombre o correo" type="search" value="{{ $search }}" />
                </div>
                <button class="rounded-lg bg-primary px-5 py-3 text-on-primary font-label-md text-label-md" type="submit">Filtrar</button>
            </form>
        </section>

        <section class="bg-white rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)] overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead class="bg-tertiary-fixed/30">
                        <tr>
                            <th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant">Usuario</th>
                            <th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant">Correo</th>
                            <th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant">Rol</th>
                            <th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant text-right">Acciones</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-outline-variant/30">
                        @forelse ($users as $user)
                            <tr class="hover:bg-surface-container-low transition-colors">
                                <td class="px-6 py-4">
                                    <p class="font-label-md text-label-md text-on-surface">{{ $user->name }} {{ $user->apellidos }}</p>
                                    <p class="text-[10px] text-on-surface-variant">ID: {{ $user->id }}</p>
                                </td>
                                <td class="px-6 py-4 font-body-sm text-body-sm text-on-surface-variant">{{ $user->email }}</td>
                                <td class="px-6 py-4">
                                    @forelse ($user->roles as $role)
                                        <span class="inline-flex rounded-full bg-surface-container px-3 py-1 font-label-md text-[10px] uppercase tracking-wider text-primary">
                                            {{ $role->pretty_name ?? $role->name }}
                                        </span>
                                    @empty
                                        <span class="text-on-surface-variant font-body-sm">Sin rol</span>
                                    @endforelse
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <a class="inline-flex items-center gap-2 rounded-lg border border-outline-variant px-3 py-2 font-label-md text-label-md text-primary hover:bg-surface-container"
                                        href="{{ route('admin.usuarios.edit', $user) }}">
                                        <span class="material-symbols-outlined text-[18px]">edit</span>
                                        Editar
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="px-6 py-10 text-center text-on-surface-variant" colspan="4">No hay usuarios registrados.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>

        @if ($users->hasPages())
            <div class="rounded-xl border border-outline-variant bg-white p-4">
                {{ $users->links() }}
            </div>
        @endif
    </div>
@endsection