@extends('layouts.app')

@section('breadcrumb', 'Roles y permisos')

@section('content')
    <x-page-header
        title="Roles y permisos"
        description="Cada rol agrupa permisos concretos. Marca solo lo que cada perfil necesita para su trabajo diario."
    />

    @if(session('status'))
        <div class="alert alert-success mb-4" role="alert">{{ session('status') }}</div>
    @endif

    <section class="surface mb-4">
        <div class="surface__body">
            <h2 class="h6 fw-semibold mb-2">Cómo funciona</h2>
            <p class="text-secondary small mb-3">
                Un <strong>rol</strong> (admin, contabilidad, etc.) se asigna a cada usuario.
                Los <strong>permisos</strong> definen acciones concretas: subir facturas, importar el banco, ver el dashboard…
                Si un usuario no tiene un permiso, no verá el menú ni podrá acceder a esa sección.
            </p>
            <div class="permission-legend">
                <div class="permission-legend__item">
                    <span class="permission-legend__dot permission-legend__dot--active"></span>
                    <span class="small text-secondary">Permiso activo para el rol</span>
                </div>
                <div class="permission-legend__item">
                    <span class="permission-legend__dot"></span>
                    <span class="small text-secondary">Sin acceso</span>
                </div>
            </div>
        </div>
    </section>

    <section class="surface mb-4 surface--flush">
        <div class="surface__header">
            <h2 class="surface__title">Referencia de permisos</h2>
        </div>
        <div class="surface__body p-0">
            <div class="permission-ref-list">
                @foreach($permissions as $permission)
                    @php
                        $meta = config('permissions.permissions.'.$permission->name, []);
                    @endphp
                    <div class="permission-ref-item">
                        <div class="permission-ref-item__name">
                            {{ $meta['label'] ?? $permission->name }}
                            <code class="permission-ref-item__code">{{ $permission->name }}</code>
                        </div>
                        <p class="permission-ref-item__desc">{{ $meta['description'] ?? 'Sin descripción disponible.' }}</p>
                        @if(!empty($meta['unlocks']))
                            <p class="permission-ref-item__unlocks">
                                <span class="permission-ref-item__unlocks-label">Habilita:</span> {{ $meta['unlocks'] }}
                            </p>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="surface">
        <div class="surface__header">
            <h2 class="surface__title">Asignar permisos por rol</h2>
        </div>
        <div class="surface__body">
            <div class="row g-4">
                @foreach($roles as $role)
                    @php
                        $roleMeta = config('permissions.roles.'.$role->name, []);
                    @endphp
                    <div class="col-12 col-xl-6">
                        <div class="role-card">
                            <div class="role-card__header">
                                <h2 class="role-card__title">{{ $roleMeta['label'] ?? $role->name }}</h2>
                                <code class="role-card__slug">{{ $role->name }}</code>
                            </div>
                            @if(!empty($roleMeta['description']))
                                <p class="role-card__desc">{{ $roleMeta['description'] }}</p>
                            @endif
                            @if(!empty($roleMeta['for']))
                                <p class="role-card__for">
                                    <span class="role-card__for-label">Perfil recomendado:</span> {{ $roleMeta['for'] }}
                                </p>
                            @endif

                            <form method="POST" action="{{ route('admin.roles.update', $role) }}">
                                @csrf
                                @method('PUT')
                                <div class="permissions-list">
                                    @foreach($permissions as $permission)
                                        @php
                                            $meta = config('permissions.permissions.'.$permission->name, []);
                                            $checked = $role->permissions->contains('name', $permission->name);
                                        @endphp
                                        <label class="permission-check @if($checked) permission-check--active @endif">
                                            <input class="form-check-input" type="checkbox" name="permissions[]" value="{{ $permission->name }}" @checked($checked)>
                                            <span class="permission-check__content">
                                                <span class="permission-check__label">{{ $meta['label'] ?? $permission->name }}</span>
                                                <span class="permission-check__desc">{{ $meta['description'] ?? '' }}</span>
                                                @if(!empty($meta['unlocks']))
                                                    <span class="permission-check__unlocks">→ {{ $meta['unlocks'] }}</span>
                                                @endif
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                                <button class="btn btn-sm btn-primary">Guardar permisos de «{{ $roleMeta['label'] ?? $role->name }}»</button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection