@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">Seguridad</p>
                <h2 class="font-headline-lg text-headline-lg text-primary mb-2">Roles y permisos</h2>
                <p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
                    Administra perfiles de acceso y asigna permisos por módulo.
                </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.permisos.create') }}">
                <span class="material-symbols-outlined">add_moderator</span>
                Nuevo rol
            </a>
        </section>

        <section class="grid grid-cols-1 lg:grid-cols-2 gap-gutter">
            @forelse ($roles as $role)
                <article class="bg-white rounded-xl border border-outline-variant p-6 shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <p class="font-label-md text-label-md text-secondary uppercase tracking-wider">{{ $role->module }}</p>
                            <h3 class="font-title-md text-title-md text-primary mt-1">{{ $role->pretty_name ?? $role->name }}</h3>
                            <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">{{ $role->name }}</p>
                        </div>
                        <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.permisos.edit', $role) }}">
                            <span class="material-symbols-outlined text-[18px]">edit</span>
                            Editar
                        </a>
                    </div>

                    <div class="grid grid-cols-2 gap-3 mt-5">
                        <div class="rounded-lg bg-surface-container-lowest border border-outline-variant p-3">
                            <p class="font-label-md text-label-md text-on-surface-variant uppercase">Usuarios</p>
                            <p class="font-title-md text-title-md text-primary mt-1">{{ $role->users_count }}</p>
                        </div>
                        <div class="rounded-lg bg-surface-container-lowest border border-outline-variant p-3">
                            <p class="font-label-md text-label-md text-on-surface-variant uppercase">Permisos</p>
                            <p class="font-title-md text-title-md text-primary mt-1">{{ $role->permissions->count() }}</p>
                        </div>
                    </div>

                    <div class="mt-5 flex flex-wrap gap-2">
                        @foreach ($role->permissions->take(8) as $permission)
                            <span class="rounded-full bg-surface-container px-3 py-1 font-label-md text-[10px] uppercase tracking-wider text-on-surface-variant">
                                {{ $permission->pretty_name ?? $permission->name }}
                            </span>
                        @endforeach
                        @if ($role->permissions->count() > 8)
                            <span class="rounded-full bg-primary text-on-primary px-3 py-1 font-label-md text-[10px] uppercase tracking-wider">
                                +{{ $role->permissions->count() - 8 }}
                            </span>
                        @endif
                    </div>
                </article>
            @empty
                <div class="lg:col-span-2 bg-white rounded-xl border border-outline-variant p-10 text-center">
                    <span class="material-symbols-outlined text-primary text-[48px]">shield</span>
                    <h3 class="font-title-md text-title-md text-primary mt-3">No hay roles registrados</h3>
                </div>
            @endforelse
        </section>
    </div>
@endsection