@extends('layouts.app')
@section('title', __('dashboard.Permissions'))
@section('page_heading', __('dashboard.Permissions'))

@section('content')

<style>
.page-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background .12s; }
.page-table tbody tr:hover { background: var(--surface-50); }
.page-th { padding: .65rem 1.1rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
</style>

{{-- Filter bar --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:.875rem 1.25rem;margin-bottom:1.25rem">
    <div style="display:flex;align-items:center;gap:.625rem;flex-wrap:wrap">
        <i class="fa-solid fa-key" style="color:var(--c-primary);font-size:.9rem"></i>
        <span style="font-size:.875rem;font-weight:800;color:var(--text-primary)">{{ __('dashboard.Permissions') }}</span>
        <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ $permissions->count() }}</span>
        <div style="flex:1;min-width:0"></div>
        <form method="GET" action="{{ route('dashboard.permissions.index') }}" style="display:flex;align-items:center;gap:.5rem;flex-wrap:wrap">
            <input type="text" name="search" class="app-input app-input--sm" style="max-width:220px" value="{{ request('search') }}" placeholder="ابحث باسم الصلاحية...">
            <select name="group" class="app-input app-select app-input--sm" style="max-width:180px">
                <option value="">كل الإدارات</option>
                @foreach($administrations as $key => $admin)
                    <option value="{{ $key }}" @selected(request('group') === $key)>{{ $admin['label'] }}</option>
                @endforeach
            </select>
            <button type="submit" class="app-btn app-btn--secondary app-btn--sm">تصفية</button>
            @if(request('search') || request('group'))
                <a href="{{ route('dashboard.permissions.index') }}" class="app-btn app-btn--secondary app-btn--sm">مسح</a>
            @endif
        </form>
        <a href="{{ route('dashboard.roles.index') }}" class="app-btn app-btn--secondary app-btn--sm">
            <i class="fa-solid fa-shield me-1"></i>{{ __('dashboard.Roles') }}
        </a>
    </div>
</div>

{{-- Groups --}}
<div style="display:grid;gap:.875rem">
    @forelse($groupedPermissions as $groupKey => $items)
    @php $groupMeta = $administrations[$groupKey] ?? ['label' => \App\Support\PermissionRegistry::humanize($groupKey), 'description' => 'مجموعة صلاحيات', 'icon' => 'fa-solid fa-folder']; @endphp
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">
        {{-- Group header --}}
        <div style="display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
            <div style="width:2rem;height:2rem;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8rem;background:var(--c-primary-bg);color:var(--c-primary)">
                <i class="{{ $groupMeta['icon'] }}"></i>
            </div>
            <div style="flex:1;min-width:0">
                <div style="font-size:.875rem;font-weight:800;color:var(--text-primary)">{{ $groupMeta['label'] }}</div>
                <div style="font-size:.72rem;color:var(--text-muted)">{{ $groupMeta['description'] }}</div>
            </div>
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ $items->count() }}</span>
        </div>
        {{-- Permissions app-table --}}
        <div style="overflow-x:auto">
            <table class="page-table" style="width:100%;border-collapse: collapse;font-size:.83rem">
                <thead>
                    <tr style="background:var(--border-subtle)">
                        <th class="page-th">الصلاحية</th>
                        <th class="page-th">الكود</th>
                        <th class="page-th">الوصف</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($items as $permission)
                    <tr>
                        <td style="padding:.75rem 1.25rem">
                            <div style="font-weight:800;color:var(--text-primary)">{{ $permission->registry_label }}</div>
                            <div style="font-size:.68rem;color:var(--text-muted)">#{{ $permission->id }}</div>
                        </td>
                        <td style="padding:.75rem 1.25rem">
                            <code style="font-size:.75rem;color:var(--c-primary-dark);background:var(--c-primary-bg);padding:.15rem .4rem;border-radius:6px">{{ $permission->name }}</code>
                        </td>
                        <td style="padding:.75rem 1.25rem;color:var(--text-muted);font-size:.8rem">{{ $permission->registry_description ?: '—' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @empty
        <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:3rem;text-align:center">
            @include('layouts.partials.index-empty-state', ['icon' => 'fa-solid fa-key', 'title' => __('dashboard.No permissions found.'), 'message' => 'لا توجد صلاحيات مطابقة للفلاتر الحالية.'])
        </div>
    @endforelse
</div>
@endsection