@extends('layouts.app')

@section('title', 'Roles & Permissions')

@section('content')
@push('styles')
<style>
.role-tab-btn.active { border-bottom-color: var(--accent); color: var(--text-primary); }
.role-tab-btn { color: var(--text-secondary); }
.role-tab-btn:hover { color: var(--text-primary); }
.text-accent { color: var(--accent); }
</style>
@endpush

@can('manage_roles')
<div class="mb-8 fade-in">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="h-14 w-1 rounded-full"></div>
            <div>
                <h1 class="text-2xl font-bold tracking-tight">Roles & Permissions</h1>
                <p class="mt-1">Manage access control and create custom roles</p>
            </div>
        </div>
        <button onclick="document.getElementById('newRoleModal').classList.remove('hidden')" class="px-5 py-2.5 rounded-xl flex items-center gap-2 text-sm font-medium">
            <i class="fas fa-user-plus"></i> New Role
        </button>
    </div>
</div>

@if(session('success'))
    <div class="mb-6 px-4 py-3 rounded-xl flex items-center justify-between">
        <span class="flex items-center gap-2"><i class="fas fa-check-circle"></i>{{ session('success') }}</span>
        <button onclick="this.parentElement.remove()">&times;</button>
    </div>
@endif
@if(session('error'))
    <div class="mb-6 px-4 py-3 rounded-xl flex items-center justify-between">
        <span class="flex items-center gap-2"><i class="fas fa-exclamation-circle"></i>{{ session('error') }}</span>
        <button onclick="this.parentElement.remove()">&times;</button>
    </div>
@endif

{{-- New Role Modal --}}
<div id="newRoleModal" class="{{ $errors->has('name') || $errors->has('label') ? '' : 'hidden' }} fixed inset-0 bg-gray-900/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
    <div class="glass-card rounded-xl shadow-2xl w-full max-w-3xl overflow-hidden max-h-[90vh] flex flex-col">
        <div class="flex items-center justify-between p-5 border-b flex-shrink-0">
            <h3 class="text-lg font-semibold flex items-center gap-2">
                <i class="fas fa-user-plus"></i> Create New Role
            </h3>
            <button onclick="document.getElementById('newRoleModal').classList.add('hidden')" class="transition-colors">
                <i class="fas fa-times text-lg"></i>
            </button>
        </div>

        <form method="POST" action="{{ route('roles.store') }}" class="flex flex-col flex-1 overflow-hidden">
            @csrf
            <div class="p-6 space-y-5 overflow-y-auto flex-1">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-1.5">Role Name <span class="text-red-500">*</span></label>
                        <input type="text" name="name" value="{{ old('name') }}" required pattern="^[a-z_]+$" placeholder="e.g. manager, supervisor"
                            class="input-modern w-full rounded-lg px-3 py-2.5 text-sm @error('name') border-red-500 @enderror">
                        @error('name')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                        <p class="text-xs mt-1">Lowercase letters and underscores only</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium mb-1.5">Display Label <span class="text-red-500">*</span></label>
                        <input type="text" name="label" value="{{ old('label') }}" required placeholder="e.g. Manager, Supervisor"
                            class="input-modern w-full rounded-lg px-3 py-2.5 text-sm @error('label') border-red-500 @enderror">
                        @error('label')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                        <p class="text-xs mt-1">How the role appears in the system</p>
                    </div>
                </div>

                <div>
                    <div class="flex items-center justify-between mb-3">
                        <label class="text-sm font-semibold">Assign Permissions</label>
                        <div class="flex gap-3">
                            <button type="button" onclick="selectAllNewRole()" class="text-xs font-medium">Select All</button>
                            <button type="button" onclick="deselectAllNewRole()" class="text-xs font-medium">Deselect All</button>
                            <button type="button" onclick="copyFromRole()" class="text-xs font-medium">
                                <i class="fas fa-copy mr-0.5"></i> Copy from existing role
                            </button>
                        </div>
                    </div>

                    <div id="copyFromRoleSelect" class="hidden mb-3 p-3 border rounded-lg">
                        <label class="text-xs font-medium mb-1 block">Copy permissions from:</label>
                        <div class="flex gap-2">
                            <select id="copyRoleSelect" class="input-modern text-sm rounded-lg px-3 py-1.5">
                                <option value="">-- Select Role --</option>
                                @foreach($roles as $r)
                                    @if($r->name !== 'admin')
                                        <option value="{{ $r->id }}" data-perms="{{ json_encode($rolePermissions[$r->id] ?? []) }}">{{ $r->label }} ({{ count($rolePermissions[$r->id] ?? []) }} perms)</option>
                                    @endif
                                @endforeach
                            </select>
                            <button type="button" onclick="applyCopiedPerms()" class="btn-primary text-xs px-3 py-1.5 rounded-lg">Apply</button>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3 max-h-64 overflow-y-auto border rounded-lg p-3">
                        @foreach($grouped as $group => $perms)
                            <div>
                                <h5 class="text-xs font-semibold uppercase tracking-wider mb-1.5 flex items-center gap-1.5">
                                    @php
$groupIcons = ['Dashboard' => 'fa-home', 'Products' => 'fa-pills', 'Categories' => 'fa-tags', 'Suppliers' => 'fa-truck', 'Customers' => 'fa-users', 'Sales' => 'fa-receipt', 'Purchases' => 'fa-boxes-stacked', 'Reports' => 'fa-chart-line', 'Expenses' => 'fa-file-invoice-dollar', 'Finance' => 'fa-money-bill-wave', 'Users' => 'fa-user-cog', 'Settings' => 'fa-cog', 'Roles & Permissions' => 'fa-user-shield', 'Payment Accounts' => 'fa-wallet', 'Quotations' => 'fa-file-invoice', 'Messages' => 'fa-envelope', 'Activity Logs' => 'fa-history', 'Backup' => 'fa-database', 'HRM' => 'fa-users-gear', 'Projects' => 'fa-tasks'];
                                    @endphp
                                    <i class="fas {{ $groupIcons[$group] ?? 'fa-lock' }} text-[8px]"></i>
                                    {{ $group }}
                                </h5>
                                <div class="space-y-1">
                                    @foreach($perms as $perm)
                                        <label class="flex items-center gap-1.5 cursor-pointer text-xs">
                                            <input type="checkbox" name="permissions[]" value="{{ $perm->name }}" {{ in_array($perm->name, old('permissions', [])) ? 'checked' : '' }} class="rounded new-role-perm">
                                            <span>{{ str_replace('_', ' ', $perm->name) }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="flex justify-end gap-3 p-5 border-t flex-shrink-0">
                <button type="button" onclick="document.getElementById('newRoleModal').classList.add('hidden')" class="px-4 py-2 text-sm border rounded-lg transition-colors font-medium">
                    Cancel
                </button>
                <button type="submit" class="btn-primary px-5 py-2 text-sm rounded-lg font-medium shadow-sm">
                    <i class="fas fa-plus mr-1.5"></i> Create Role
                </button>
            </div>
        </form>
    </div>
</div>

@php
    $emptyRoles = $roles->filter(fn($r) => $r->name !== 'admin' && empty($rolePermissions[$r->id]));
@endphp
@if($emptyRoles->count() > 0)
    <div class="mb-6 bg-red-50 border border-red-200 rounded-xl p-4">
        <div class="flex items-start gap-3">
            <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-red-600 text-sm"></i>
            </div>
            <div>
                <p class="font-medium text-red-900">Roles with No Permissions Detected</p>
                <p class="text-sm text-red-700 mt-1">
                    The following roles have <strong>zero permissions</strong>. Users assigned to these roles will be locked out:
                    <span class="font-semibold">{{ $emptyRoles->pluck('label')->join(', ') }}</span>
                </p>
            </div>
        </div>
    </div>
@endif

{{-- Edit Role Modal --}}
<div id="editRoleModal" class="hidden fixed inset-0 bg-gray-900/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
    <div class="glass-card rounded-xl shadow-2xl w-full max-w-md overflow-hidden">
        <div class="flex items-center justify-between p-5 border-b flex-shrink-0">
            <h3 class="text-lg font-semibold flex items-center gap-2">
                <i class="fas fa-edit"></i> Edit Role
            </h3>
            <button onclick="document.getElementById('editRoleModal').classList.add('hidden')" class="transition-colors">
                <i class="fas fa-times text-lg"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('roles.update') }}">
            @csrf
            <input type="hidden" name="role_id" id="editRoleId">
            <div class="p-6 space-y-5">
                <div>
                    <label class="block text-sm font-medium mb-1.5">Role Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" id="editRoleName" required pattern="^[a-z_]+$" placeholder="e.g. manager, supervisor"
                        class="input-modern w-full rounded-lg px-3 py-2.5 text-sm">
                    <p class="text-xs mt-1">Lowercase letters and underscores only</p>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1.5">Display Label <span class="text-red-500">*</span></label>
                    <input type="text" name="label" id="editRoleLabel" required placeholder="e.g. Manager, Supervisor"
                        class="input-modern w-full rounded-lg px-3 py-2.5 text-sm">
                </div>
            </div>
            <div class="flex justify-end gap-3 p-5 border-t flex-shrink-0">
                <button type="button" onclick="document.getElementById('editRoleModal').classList.add('hidden')" class="px-4 py-2 text-sm border rounded-lg transition-colors font-medium">
                    Cancel
                </button>
                <button type="submit" class="btn-primary px-5 py-2 text-sm rounded-lg font-medium shadow-sm">
                    <i class="fas fa-save mr-1.5"></i> Update Role
                </button>
            </div>
        </form>
    </div>
</div>

{{-- User Role Assignment --}}
@can('manage_roles')
<div class="table-container rounded-xl mb-6 overflow-hidden">
    <div class="px-6 py-4 border-b table-header flex items-center gap-2">
        <i class="fas fa-users-gear"></i>
        <h3 class="text-lg font-semibold">User Role Assignment</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full">
            <thead class="table-header">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase">User</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase">Current Role</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase">Change Role</th>
                </tr>
            </thead>
            <tbody class="table-row">
                @foreach($allUsers as $au)
                <tr class="transition-colors">
                    <td class="px-6 py-3">
                        <div class="flex items-center gap-2">
                            <div class="w-7 h-7 rounded-full bg-gradient-to-br from-brand-400 to-purple-500 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                                {{ strtoupper(substr($au->name, 0, 1)) }}
                            </div>
                            <div>
                                <p class="text-sm font-medium">{{ $au->name }}</p>
                                <p class="text-xs">{{ $au->email }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-3">
                        @if($au->role)
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full">
                                @if($au->role->name === 'admin')
                                    <i class="fas fa-shield-alt"></i>
                                @endif
                                {{ $au->role->label }}
                            </span>
                        @else
                            <span class="text-xs italic">No role</span>
                        @endif
                    </td>
                    <td class="px-6 py-3">
                        <form method="POST" action="{{ route('roles.assign-user') }}" class="flex items-center gap-2">
                            @csrf
                            <input type="hidden" name="user_id" value="{{ $au->id }}">
                            <select name="role_id" class="input-modern text-sm rounded-lg px-2 py-1.5">
                                <option value="">-- No Role --</option>
                                @foreach($roles as $r)
                                    <option value="{{ $r->id }}" {{ $au->role_id == $r->id ? 'selected' : '' }}>{{ $r->label }}</option>
                                @endforeach
                            </select>
                            <button type="submit" class="btn-primary text-xs px-3 py-1.5 rounded-lg font-medium">
                                Assign
                            </button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endcan

{{-- Role Tabs --}}
<div class="glass-card rounded-xl mb-6 overflow-hidden">
    <div class="border-b px-6">
        <nav class="flex gap-1 -mb-px">
            @foreach($roles as $i => $role)
                <button type="button" onclick="showRoleTab({{ $role->id }})" id="tab-{{ $role->id }}" class="role-tab-btn py-3 px-5 border-b-2 text-sm font-medium rounded-t-lg transition-colors {{ $i === 0 ? 'active' : 'border-transparent' }}">
                    @if($role->name === 'admin')
                        <i class="fas fa-shield-alt mr-1.5"></i>
                    @elseif($role->name === 'pharmacist')
                        <i class="fas fa-user-md mr-1.5"></i>
                    @elseif($role->name === 'cashier')
                        <i class="fas fa-cash-register mr-1.5"></i>
                    @else
                        <i class="fas fa-user-tag mr-1.5"></i>
                    @endif
                    {{ $role->label }}
                    <span class="ml-1.5 text-xs">({{ $roleUserCounts[$role->id] }})</span>
                    @if(!$role->is_active)
                        <span class="ml-1.5 text-[10px] bg-red-100 text-red-600 px-1.5 py-0.5 rounded-full">Inactive</span>
                    @endif
                </button>
            @endforeach
        </nav>
    </div>

    @foreach($roles as $i => $role)
        <div id="panel-{{ $role->id }}" class="role-panel {{ $i > 0 ? 'hidden' : '' }}">
            <div class="p-6">
                @if($role->name === 'admin')
                    <div class="rounded-xl p-6">
                        <div class="flex items-center gap-4">
                            <div class="w-14 h-14 rounded-xl flex items-center justify-center">
                                <i class="fas fa-shield-alt text-2xl"></i>
                            </div>
                            <div>
                                <p class="font-semibold text-lg">Admin has full access</p>
                                <p class="text-sm mt-1">The admin role cannot be modified and has access to all permissions automatically.</p>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="flex items-center justify-between mb-5">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg flex items-center justify-center">
                                <i class="fas fa-key"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold">{{ $role->label }} Permissions</h3>
                                <p class="text-sm">Toggle access for each permission</p>
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <button type="button" onclick="openEditRole({{ $role->id }}, '{{ $role->name }}', '{{ $role->label }}')" class="px-4 py-2 rounded-lg text-sm font-medium border transition-colors">
                                <i class="fas fa-edit mr-1.5"></i> Edit
                            </button>
                            <form method="POST" action="{{ route('roles.toggle-active', $role) }}">
                                @csrf
                                <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $role->is_active ? 'bg-red-50 text-red-600 hover:bg-red-100 border border-red-200' : 'bg-emerald-50 text-emerald-600 hover:bg-emerald-100 border border-emerald-200' }}">
                                    <i class="fas {{ $role->is_active ? 'fa-pause' : 'fa-play' }} mr-1.5"></i>
                                    {{ $role->is_active ? 'Deactivate' : 'Activate' }}
                                </button>
                            </form>
                            @if(!in_array($role->name, ['pharmacist', 'cashier']))
                            <form method="POST" action="{{ route('roles.destroy', $role) }}" onsubmit="return confirm('Delete {{ $role->label }} role? This cannot be undone.')">
                                @csrf @method('DELETE')
                                <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium bg-red-50 text-red-600 hover:bg-red-100 border border-red-200 transition-colors">
                                    <i class="fas fa-trash mr-1.5"></i> Delete
                                </button>
                            </form>
                            @endif
                        </div>
                    </div>

                    @if(!$role->is_active)
                        <div class="mb-5 bg-amber-50 border border-amber-200 rounded-xl p-4">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-exclamation-triangle text-amber-600 text-sm"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-amber-900">This role is deactivated</p>
                                    <p class="text-sm text-amber-700">Users with this role will have no permissions. Activate it to restore access.</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('roles.update') }}" id="roleForm-{{ $role->id }}">
                        @csrf
                        <input type="hidden" name="role_id" value="{{ $role->id }}">

                        <div class="flex items-center justify-between mb-4 sticky top-0 z-10 pb-3 pt-1 border-b flex-wrap gap-2">
                            <div class="flex items-center gap-3 flex-wrap">
                                <div class="relative">
                                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-xs"></i>
                                    <input type="text" oninput="filterPermissions({{ $role->id }}, this.value)" placeholder="Search permissions..." class="input-modern pl-8 pr-3 py-2 text-sm rounded-lg w-48">
                                </div>
                                <div class="h-6 w-px"></div>
                                <button type="button" onclick="selectAll({{ $role->id }})" class="text-sm font-medium">
                                    <i class="fas fa-check-double mr-1"></i> Select All
                                </button>
                                <button type="button" onclick="deselectAll({{ $role->id }})" class="text-sm font-medium">
                                    <i class="fas fa-times mr-1"></i> Deselect All
                                </button>
                                <div class="h-6 w-px"></div>
                                <button type="button" onclick="toggleAllGroups({{ $role->id }})" class="text-sm font-medium">
                                    <i class="fas fa-expand-alt mr-1"></i> <span id="toggleAllLabel-{{ $role->id }}">Collapse All</span>
                                </button>
                            </div>
                            <button type="submit" class="btn-primary px-6 py-2.5 rounded-lg font-medium text-sm transition-colors shadow-sm flex items-center gap-2 {{ !$role->is_active ? 'opacity-50 cursor-not-allowed' : '' }}" {{ !$role->is_active ? 'disabled' : '' }}>
                                <i class="fas fa-save"></i> Save Permissions
                            </button>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 {{ !$role->is_active ? 'opacity-50 pointer-events-none' : '' }}">
                            @foreach($grouped as $group => $perms)
                                @php
                                    $groupSlug = \Illuminate\Support\Str::slug($group);
                                    $selectedCount = count(array_intersect($perms->pluck('name')->toArray(), $rolePermissions[$role->id] ?? []));
                                    $totalCount = $perms->count();
                                @endphp
                                <div class="border rounded-xl p-4 transition-colors">
                                    <div onclick="toggleGroup({{ $role->id }}, '{{ $groupSlug }}')" class="flex items-center gap-2 mb-0 pb-3 border-b cursor-pointer select-none">
                                        <div class="w-6 h-6 rounded flex items-center justify-center flex-shrink-0">
                                            @php
                                        $groupIcons = ['Dashboard' => 'fa-home', 'Products' => 'fa-pills', 'Categories' => 'fa-tags', 'Suppliers' => 'fa-truck', 'Customers' => 'fa-users', 'Sales' => 'fa-receipt', 'Purchases' => 'fa-boxes-stacked', 'Reports' => 'fa-chart-line', 'Expenses' => 'fa-file-invoice-dollar', 'Finance' => 'fa-money-bill-wave', 'Users' => 'fa-user-cog', 'Settings' => 'fa-cog', 'Roles & Permissions' => 'fa-user-shield', 'Payment Accounts' => 'fa-wallet', 'Quotations' => 'fa-file-invoice', 'Messages' => 'fa-envelope', 'Activity Logs' => 'fa-history', 'Backup' => 'fa-database', 'HRM' => 'fa-users-gear', 'Projects' => 'fa-tasks'];
                                            @endphp
                                            <i class="fas {{ $groupIcons[$group] ?? 'fa-lock' }} text-[10px]"></i>
                                        </div>
                                        <h4 class="text-sm font-semibold flex-1">{{ $group }}</h4>
                                        <span class="text-xs font-medium {{ $selectedCount === $totalCount ? 'text-emerald-500' : ($selectedCount > 0 ? 'text-accent' : '') }}">{{ $selectedCount }}/{{ $totalCount }}</span>
                                        <i class="fas fa-chevron-down text-[10px] transition-transform" id="groupIcon-{{ $role->id }}-{{ $groupSlug }}"></i>
                                    </div>
                                    <div class="flex gap-2 mt-2 mb-2">
                                        <button type="button" onclick="selectGroup({{ $role->id }}, '{{ $groupSlug }}')" class="text-[10px] text-emerald-600 hover:text-emerald-700 font-medium">All</button>
                                        <button type="button" onclick="deselectGroup({{ $role->id }}, '{{ $groupSlug }}')" class="text-[10px] text-red-500 hover:text-red-600 font-medium">None</button>
                                    </div>
                                    <div class="space-y-2 mt-1" id="groupContent-{{ $role->id }}-{{ $groupSlug }}">
                                        @foreach($perms as $perm)
                                            <label class="flex items-center gap-2.5 cursor-pointer group">
                                                <input type="checkbox" name="permissions[]" value="{{ $perm->name }}"
                                                    {{ in_array($perm->name, $rolePermissions[$role->id] ?? []) ? 'checked' : '' }}
                                                    class="rounded perm-checkbox-{{ $role->id }}"
                                                    onchange="updateGroupCount({{ $role->id }}, '{{ $groupSlug }}', {{ $totalCount }})">
                                                <span class="text-sm transition-colors">{{ str_replace('_', ' ', str_replace('view_', 'View ', str_replace('create_', 'Create ', str_replace('edit_', 'Edit ', str_replace('delete_', 'Delete ', str_replace('approve_', 'Approve ', str_replace('manage_', 'Manage ', $perm->name))))))) }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </form>

                    {{-- Users with this role --}}
                    @if($roleUsers[$role->id]->count() > 0)
                    <div class="mt-6 border-t pt-6">
                        <h4 class="text-sm font-semibold mb-3 flex items-center gap-2">
                            <i class="fas fa-users"></i>
                            Users ({{ $roleUsers[$role->id]->count() }})
                        </h4>
                        <div class="flex flex-wrap gap-2">
                            @foreach($roleUsers[$role->id] as $ru)
                            <div class="flex items-center gap-2 px-3 py-2 rounded-lg border">
                                <div class="w-6 h-6 rounded-full bg-gradient-to-br from-brand-400 to-purple-500 flex items-center justify-center text-white text-[10px] font-bold flex-shrink-0">
                                    {{ strtoupper(substr($ru->name, 0, 1)) }}
                                </div>
                                <span class="text-sm">{{ $ru->name }}</span>
                                @can('manage_roles')
                                <button type="button" onclick="openUserPerms({{ $ru->id }}, '{{ $ru->name }}')" class="p-1 rounded transition-colors" title="Override permissions">
                                    <i class="fas fa-shield-alt text-[10px]"></i>
                                </button>
                                @endcan
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                @endif
            </div>
        </div>
    @endforeach
</div>

{{-- User Permission Override Modal --}}
<div id="userPermModal" class="hidden fixed inset-0 bg-gray-900/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
    <div class="glass-card rounded-xl shadow-2xl w-full max-w-2xl overflow-hidden max-h-[90vh] flex flex-col">
        <div class="flex items-center justify-between p-5 border-b flex-shrink-0">
            <h3 class="text-lg font-semibold flex items-center gap-2" id="userPermModalTitle">
                <i class="fas fa-shield-alt"></i> User Permissions
            </h3>
            <button onclick="document.getElementById('userPermModal').classList.add('hidden')" class="transition-colors">
                <i class="fas fa-times text-lg"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('roles.user-permissions') }}" class="flex flex-col flex-1 overflow-hidden">
            @csrf
            <input type="hidden" name="user_id" id="userPermUserId">
            <div class="flex items-center justify-between px-6 py-3 border-b">
                <p class="text-sm">
                    <span class="font-medium" id="userPermUserName"></span>
                    &mdash; additional permissions beyond role
                </p>
                <div class="flex gap-3">
                    <button type="button" onclick="selectAllUserPerms()" class="text-xs font-medium">Select All</button>
                    <button type="button" onclick="deselectAllUserPerms()" class="text-xs font-medium">Deselect All</button>
                </div>
            </div>
            <div class="p-6 overflow-y-auto flex-1">
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                    @foreach($grouped as $group => $perms)
                    <div>
                        <h5 class="text-xs font-semibold uppercase tracking-wider mb-2">{{ $group }}</h5>
                        <div class="space-y-1.5">
                            @foreach($perms as $perm)
                            <label class="flex items-center gap-2 cursor-pointer text-xs">
                                <input type="checkbox" name="permissions[]" value="{{ $perm->name }}"
                                    class="rounded user-perm-checkbox">
                                <span>{{ str_replace('_', ' ', $perm->name) }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="flex justify-end gap-3 p-5 border-t flex-shrink-0">
                <button type="button" onclick="document.getElementById('userPermModal').classList.add('hidden')" class="px-4 py-2 text-sm border rounded-lg transition-colors font-medium">
                    Cancel
                </button>
                <button type="submit" class="btn-primary px-5 py-2 text-sm rounded-lg font-medium shadow-sm">
                    <i class="fas fa-save mr-1.5"></i> Save User Permissions
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Role Overview Matrix --}}
<div class="table-container rounded-xl overflow-hidden">
    <div class="px-6 py-4 border-b table-header flex items-center gap-3">
        <div class="w-8 h-8 rounded-lg flex items-center justify-center">
            <i class="fas fa-table text-sm"></i>
        </div>
        <h3 class="text-lg font-semibold">Permission Matrix</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full">
            <thead class="table-header">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Permission</th>
                    @foreach($roles as $role)
                        <th class="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider">
                            <div class="flex items-center justify-center gap-1.5">
                                @if($role->name === 'admin')
                                    <i class="fas fa-shield-alt text-[10px]"></i>
                                @elseif($role->name === 'pharmacist')
                                    <i class="fas fa-user-md text-[10px]"></i>
                                @elseif($role->name === 'cashier')
                                    <i class="fas fa-cash-register text-[10px]"></i>
                                @else
                                    <i class="fas fa-user-tag text-[10px]"></i>
                                @endif
                                {{ $role->label }}
                            </div>
                            @if(!$role->is_active)
                                <span class="block text-[10px] text-red-500 font-medium">Inactive</span>
                            @endif
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody class="table-row">
                @foreach($grouped as $group => $perms)
                    @foreach($perms as $perm)
                        <tr class="transition-colors">
                            <td class="px-4 py-2 text-sm">
                                <span class="text-xs font-medium px-2 py-0.5 rounded mr-2">{{ $group }}</span>
                                {{ str_replace('_', ' ', $perm->name) }}
                            </td>
                            @foreach($roles as $role)
                                <td class="px-4 py-2 text-center">
                                    @if($role->name === 'admin' || in_array($perm->name, $rolePermissions[$role->id] ?? []))
                                        @if($role->is_active || $role->name === 'admin')
                                            <i class="fas fa-check-circle text-emerald-500"></i>
                                        @else
                                            <i class="fas fa-minus-circle text-amber-400"></i>
                                        @endif
                                    @else
                                        <i class="fas fa-times-circle"></i>
                                    @endif
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<script>
var allGroupsExpanded = {};

function selectGroup(roleId, groupSlug) {
    document.querySelectorAll('#panel-' + roleId + ' #groupContent-' + roleId + '-' + groupSlug + ' .perm-checkbox-' + roleId).forEach(cb => cb.checked = true);
    updateGroupCount(roleId, groupSlug, document.querySelectorAll('#panel-' + roleId + ' #groupContent-' + roleId + '-' + groupSlug + ' .perm-checkbox-' + roleId).length);
}

function deselectGroup(roleId, groupSlug) {
    document.querySelectorAll('#panel-' + roleId + ' #groupContent-' + roleId + '-' + groupSlug + ' .perm-checkbox-' + roleId).forEach(cb => cb.checked = false);
    updateGroupCount(roleId, groupSlug, 0);
}

function updateGroupCount(roleId, groupSlug, totalCount) {
    var count = document.querySelectorAll('#panel-' + roleId + ' #groupContent-' + roleId + '-' + groupSlug + ' .perm-checkbox-' + roleId + ':checked').length;
    var span = document.querySelector('#panel-' + roleId + ' [id^="groupContent-' + roleId + '-' + groupSlug + '"]').closest('.border').querySelector('h4 + span');
    if (span) {
        span.textContent = count + '/' + totalCount;
        span.className = 'text-xs font-medium ' + (count === totalCount ? 'text-emerald-500' : (count > 0 ? 'text-accent' : ''));
    }
}

function showRoleTab(roleId) {
    document.querySelectorAll('.role-panel').forEach(el => el.classList.add('hidden'));
    document.querySelectorAll('.role-tab-btn').forEach(el => {
        el.classList.remove('active');
    });

    document.getElementById('panel-' + roleId).classList.remove('hidden');
    document.getElementById('tab-' + roleId).classList.add('active');
}

function selectAll(roleId) {
    document.querySelectorAll('.perm-checkbox-' + roleId).forEach(cb => cb.checked = true);
}

function deselectAll(roleId) {
    document.querySelectorAll('.perm-checkbox-' + roleId).forEach(cb => cb.checked = false);
}

function selectAllNewRole() {
    document.querySelectorAll('.new-role-perm').forEach(cb => cb.checked = true);
}

function deselectAllNewRole() {
    document.querySelectorAll('.new-role-perm').forEach(cb => cb.checked = false);
}

function copyFromRole() {
    const el = document.getElementById('copyFromRoleSelect');
    el.classList.toggle('hidden');
}

function applyCopiedPerms() {
    const select = document.getElementById('copyRoleSelect');
    const option = select.options[select.selectedIndex];
    if (!option.value) return;

    const perms = JSON.parse(option.getAttribute('data-perms'));
    document.querySelectorAll('.new-role-perm').forEach(cb => {
        cb.checked = perms.includes(cb.value);
    });

    document.getElementById('copyFromRoleSelect').classList.add('hidden');
}

function openEditRole(id, name, label) {
    document.getElementById('editRoleId').value = id;
    document.getElementById('editRoleName').value = name;
    document.getElementById('editRoleLabel').value = label;
    document.getElementById('editRoleModal').classList.remove('hidden');
}

function filterPermissions(roleId, query) {
    const q = query.toLowerCase();
    document.querySelectorAll('#panel-' + roleId + ' .perm-checkbox-' + roleId).forEach(cb => {
        const label = cb.closest('label');
        const text = label ? label.textContent.toLowerCase() : '';
        label.style.display = text.includes(q) ? '' : 'none';
    });
    document.querySelectorAll('#panel-' + roleId + ' .border.rounded-xl').forEach(group => {
        const visiblePerms = group.querySelectorAll('label:not([style*="display: none"])').length;
        group.style.display = visiblePerms > 0 ? '' : 'none';
    });
}

function toggleGroup(roleId, groupSlug) {
    const content = document.getElementById('groupContent-' + roleId + '-' + groupSlug);
    const icon = document.getElementById('groupIcon-' + roleId + '-' + groupSlug);
    if (content.classList.contains('hidden')) {
        content.classList.remove('hidden');
        icon.classList.remove('fa-chevron-right');
        icon.classList.add('fa-chevron-down');
    } else {
        content.classList.add('hidden');
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-right');
    }
}

var userDirectPerms = {!! json_encode($userDirectPerms) !!};

function openUserPerms(userId, userName) {
    document.getElementById('userPermUserId').value = userId;
    document.getElementById('userPermUserName').textContent = userName;
    var perms = userDirectPerms[userId] || [];
    document.querySelectorAll('.user-perm-checkbox').forEach(function(cb) {
        cb.checked = perms.includes(cb.value);
    });
    document.getElementById('userPermModal').classList.remove('hidden');
}

function selectAllUserPerms() {
    document.querySelectorAll('.user-perm-checkbox').forEach(function(cb) { cb.checked = true; });
}

function deselectAllUserPerms() {
    document.querySelectorAll('.user-perm-checkbox').forEach(function(cb) { cb.checked = false; });
}

function toggleAllGroups(roleId) {
    const allCollapsed = document.querySelectorAll('#panel-' + roleId + ' [id^="groupContent-' + roleId + '-"]').length > 0 &&
        document.querySelectorAll('#panel-' + roleId + ' [id^="groupContent-' + roleId + '-"]:not(.hidden)').length === 0;
    const expand = allCollapsed || !allGroupsExpanded[roleId];
    allGroupsExpanded[roleId] = expand;

    document.querySelectorAll('#panel-' + roleId + ' [id^="groupContent-' + roleId + '-"]').forEach(el => {
        if (expand) el.classList.remove('hidden'); else el.classList.add('hidden');
    });
    document.querySelectorAll('#panel-' + roleId + ' [id^="groupIcon-' + roleId + '-"]').forEach(el => {
        if (expand) {
            el.classList.remove('fa-chevron-right');
            el.classList.add('fa-chevron-down');
        } else {
            el.classList.remove('fa-chevron-down');
            el.classList.add('fa-chevron-right');
        }
    });

    const label = document.getElementById('toggleAllLabel-' + roleId);
    if (label) label.textContent = expand ? 'Collapse All' : 'Expand All';
}
</script>
@endcan
@endsection