@extends('admin.layouts.app')

@section('title', 'FILE APP PORTAL - User Role Management')

@section('breadcrumbs')
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">Portal Users</span>
@endsection

@push('styles')
<style>
    .modal-enter { animation: zoomIn 0.3s ease-out forwards; }
    @keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

    /* Right-side fixed panel */
    #userPanel {
        position: fixed; top: 80px; right: 0;
        height: calc(100vh - 80px); width: 0; overflow: hidden;
        z-index: 200; transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
        padding: 0; pointer-events: none;
    }
    #userPanel.panel-open { width: 380px; padding: 12px; pointer-events: all; }
    #userPanel .panel-inner {
        width: 356px; display: flex; flex-direction: column; height: 100%;
        background: #fff; border-radius: 1.75rem;
        border: 1px solid #e2e8f0; box-shadow: -4px 0 40px rgba(0,0,0,0.10); overflow: hidden;
    }
    #contentArea { transition: margin-right 0.35s cubic-bezier(0.4,0,0.2,1); }
    .panel-open-state #contentArea { margin-right: 380px; }

    .panel-field {
        width: 100%; background: #f8fafc; border: 1.5px solid #e2e8f0;
        border-radius: 12px; padding: 11px 14px; font-size: 12px; color: #1e293b;
        outline: none; transition: all 0.2s; font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .panel-field:focus { border-color: #00ada8; background: #fff; box-shadow: 0 0 0 3px rgba(0,173,168,0.08); }
    .panel-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-bottom: 5px; }

    .badge { display: inline-block; padding: 2px 10px; border-radius: 8px; font-size: 10px; font-weight: 800; }
    .badge-teal   { background:#e6f7f6; color:#007d79; }
    .badge-blue   { background:#eff6ff; color:#2563eb; }
    .badge-purple { background:#f5f3ff; color:#7c3aed; }
    .badge-orange { background:#fff7ed; color:#c2410c; }
    .badge-green  { background:#f0fdf4; color:#16a34a; }
    .badge-slate  { background:#f1f5f9; color:#475569; }
    .status-active   { background:#dcfce7; color:#15803d; }
    .status-inactive { background:#fee2e2; color:#b91c1c; }
    tbody tr:hover { background-color: #f8fffe; }
    .col-hide-panel.panel-open-state .col-hide { display: none; }
</style>
@endpush

@section('top_content')
{{-- ── ROLE TYPE CARDS (dynamic from DB) ── --}}
@php
$palette = [
    ['border'=>'#10b981','text'=>'text-emerald-600','bg'=>'bg-emerald-50','ic'=>'text-emerald-500','icon'=>'fa-chess-king'],
    ['border'=>'#0ea5e9','text'=>'text-sky-600',    'bg'=>'bg-sky-50',    'ic'=>'text-sky-500',    'icon'=>'fa-scale-balanced'],
    ['border'=>'#8b5cf6','text'=>'text-violet-600', 'bg'=>'bg-violet-50', 'ic'=>'text-violet-500', 'icon'=>'fa-briefcase'],
    ['border'=>'#f59e0b','text'=>'text-amber-600',  'bg'=>'bg-amber-50',  'ic'=>'text-amber-500',  'icon'=>'fa-user-gear'],
    ['border'=>'#ec4899','text'=>'text-pink-600',   'bg'=>'bg-pink-50',   'ic'=>'text-pink-500',   'icon'=>'fa-users'],
];
@endphp
<div class="grid gap-4 px-8 pb-4 flex-shrink-0" style="grid-template-columns: repeat({{ min($roleCounts->count(), 4) }}, minmax(0,1fr));">
    @foreach($roleCounts as $i => $roleItem)
    @php $p = $palette[$i % count($palette)]; @endphp
    <div class="bg-white rounded-2xl p-5 flex items-center justify-between border border-slate-100 shadow-sm hover:shadow-md transition-all" style="border-right: 4px solid {{ $p['border'] }};">
        <div class="flex-1">
            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Role Type</p>
            <h3 class="text-sm font-extrabold text-slate-800 mt-1">{{ $roleItem->name }}</h3>
            <p class="text-lg font-black {{ $p['text'] }} mt-2" id="count-role-{{ $roleItem->id }}">{{ $roleItem->users_count }}</p>
        </div>
        <div class="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 {{ $p['bg'] }} {{ $p['ic'] }}">
            <i class="fa-solid {{ $p['icon'] }}"></i>
        </div>
    </div>
    @endforeach
</div>
@endsection

@section('content')
<div class="workspace-console min-h-full p-8 shadow-sm flex flex-col mt-2">

    <!-- Top Bar -->
    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 mb-8">
        <div class="flex items-center gap-3 flex-1">
            <div class="relative w-full max-w-xs">
                <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
                <input id="searchInput" type="text" placeholder="Search users..." oninput="render()"
                    class="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-full text-xs outline-none focus:ring-1 focus:ring-[#00ada8]">
            </div>
        </div>
        <div class="flex items-center gap-3">
            <div class="flex bg-slate-100 p-1.5 rounded-xl">
                <button onclick="setView('grid')" id="gridBtn" class="w-9 h-9 flex items-center justify-center rounded-lg bg-white shadow-sm text-[#00ada8]"><i class="fa-solid fa-table-cells-large"></i></button>
                <button onclick="setView('list')" id="listBtn" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-400 hover:text-[#00ada8]"><i class="fa-solid fa-list"></i></button>
            </div>
            <button onclick="handleAddUser()" class="bg-[#00ada8] text-white px-6 py-2.5 text-xs font-extrabold shadow-lg shadow-[#00ada8]/20 hover:scale-105 transition-all whitespace-nowrap" style="border-radius:10px;">
                <i class="fa-solid fa-user-plus mr-2"></i> ADD USER
            </button>
        </div>
    </div>

    @if(!$portalPerms['view'])
    <!-- No View Permission -->
    <div class="flex-1 flex items-center justify-center py-20">
        <div class="text-center">
            <div class="w-20 h-20 bg-red-50 text-red-400 rounded-3xl flex items-center justify-center mx-auto mb-6">
                <i class="fa-solid fa-lock text-3xl"></i>
            </div>
            <h3 class="text-lg font-extrabold text-slate-800 mb-2">Access Restricted</h3>
            <p class="text-sm text-slate-400 max-w-xs mx-auto">You don't have permission to view Portal Users. Contact your administrator to request access.</p>
        </div>
    </div>
    @else
    <!-- Content -->
    <div id="contentWrapper" class="flex-1">
        <!-- GRID VIEW -->
        <div id="gridContainer" class="grid grid-cols-3 gap-5"></div>
        <!-- LIST VIEW -->
        <div id="listContainer" class="hidden overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-slate-100">
                        <th class="text-left py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">
                            <input type="checkbox" id="selectAll" onchange="toggleAll(this)" class="rounded border-slate-300">
                        </th>
                        <th class="text-left py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">User</th>
                        <th class="text-left py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Role</th>
                        <th class="text-left py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Lawyer</th>
                        <th class="text-left py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Status</th>
                        <th class="text-left py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Last Active</th>
                        <th class="text-center py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Actions</th>
                    </tr>
                </thead>
                <tbody id="listBody" class="divide-y divide-slate-50"></tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="mt-6 pt-6 border-t border-slate-100 flex items-center justify-between">
        <p id="showingText" class="text-[11px] font-bold text-slate-400 uppercase"></p>
        <div class="flex gap-2" id="pagination"></div>
    </div>
    @endif
</div>
@endsection

@push('modals')
<!-- ── ALERT MODAL ── -->
<div id="alertModal" class="fixed inset-0 z-[500] hidden items-center justify-center p-4">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onclick="closeAlert()"></div>
    <div class="relative bg-white p-8 rounded-[2rem] shadow-2xl max-w-sm w-full text-center modal-enter">
        <div id="alertIcon" class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <i id="alertIconInner" class="text-2xl"></i>
        </div>
        <h3 id="alertTitle" class="font-extrabold text-slate-800 text-base"></h3>
        <p id="alertMsg" class="text-xs text-slate-500 mt-2 leading-relaxed"></p>
        <div class="mt-8">
            <button onclick="closeAlert()" class="w-full py-3 bg-[#00ada8] text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:opacity-90 transition-all">OK</button>
        </div>
    </div>
</div>

<!-- ── PERMISSION DENIED MODAL ── -->
<div id="permDeniedModal" class="fixed inset-0 z-[400] hidden items-center justify-center p-4">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onclick="closePermDeniedModal()"></div>
    <div class="relative bg-white p-8 rounded-[2rem] shadow-2xl max-w-sm w-full text-center modal-enter">
        <div class="w-16 h-16 bg-amber-50 text-amber-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <i class="fa-solid fa-lock text-2xl"></i>
        </div>
        <h3 class="font-extrabold text-slate-800 text-base">Access Denied</h3>
        <p id="permDeniedMsg" class="text-sm font-semibold text-slate-600 mt-1"></p>
        <p class="text-xs text-slate-400 mt-2">You don't have the required permission to perform this action. Please contact your administrator.</p>
        <div class="mt-8">
            <button onclick="closePermDeniedModal()" class="w-full py-3 bg-slate-100 rounded-xl text-[10px] font-black uppercase text-slate-500 hover:bg-slate-200 transition-all">Close</button>
        </div>
    </div>
</div>

<!-- ── DELETE CONFIRM MODAL ── -->
<div id="deleteModal" class="fixed inset-0 z-[300] hidden items-center justify-center p-4">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onclick="closeDeleteModal()"></div>
    <div class="relative bg-white p-8 rounded-[2rem] shadow-2xl max-w-sm w-full text-center modal-enter">
        <div class="w-16 h-16 bg-red-50 text-red-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <i class="fa-solid fa-user-xmark text-2xl"></i>
        </div>
        <h3 class="font-extrabold text-slate-800 text-base">Remove User?</h3>
        <p id="deleteUserName" class="text-sm font-semibold text-slate-600 mt-1"></p>
        <p class="text-xs text-slate-400 mt-2">This action cannot be undone. The user will be permanently removed from the system.</p>
        <div class="flex gap-3 mt-8">
            <button onclick="closeDeleteModal()" class="flex-1 py-3 bg-slate-100 rounded-xl text-[10px] font-black uppercase text-slate-500 hover:bg-slate-200 transition-all">Cancel</button>
            <button onclick="confirmDelete()" id="deleteConfirmBtn" class="flex-1 py-3 bg-red-500 text-white rounded-xl text-[10px] font-black uppercase shadow-lg shadow-red-500/30 hover:bg-red-600 transition-all">Remove</button>
        </div>
    </div>
</div>

<!-- ── PERMISSIONS MODAL ── -->
<div id="permissionsModal" class="fixed inset-0 z-[290] hidden items-center justify-center p-6">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onclick="closePermissionsModal()"></div>
    <div class="relative bg-white w-full max-w-5xl rounded-[2.5rem] shadow-2xl overflow-hidden border border-slate-200 modal-enter">

        <!-- Modal Header -->
        <div class="bg-[#00ada8] flex items-start justify-between px-8 py-5">
            <div class="flex items-center gap-3">
                <span id="permRoleChip" class="px-4 py-1.5 rounded-full bg-white/20 text-white text-[11px] font-black uppercase tracking-widest"></span>
                <h3 id="permRoleTitle" class="text-lg font-extrabold text-white">Module Permissions Management</h3>
            </div>
            <button onclick="closePermissionsModal()" class="w-10 h-10 flex items-center justify-center rounded-full bg-white/20 text-white hover:bg-white/30 transition-colors">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
        </div>

        <div class="flex">
            <!-- Left sidebar -->
            <div class="w-64 border-r border-slate-100 p-6 bg-slate-50/60 flex-shrink-0">
                <div class="bg-white rounded-2xl border border-slate-100 px-5 py-6 mb-4">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Active Focus</p>
                    <p id="permRoleTitleLeft" class="text-sm font-extrabold text-slate-900">Selected User</p>
                </div>
                <p class="text-[11px] text-slate-400 leading-relaxed pr-2">
                    Configure granular module access for this user. Changes apply to this user's permissions only.
                </p>
            </div>

            <!-- Permissions table -->
            <div class="flex-1 p-6 overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-slate-100 text-[10px] font-black text-slate-400 uppercase tracking-[0.18em]">
                            <th class="text-left py-3 px-4">Module Name</th>
                            <th class="text-center py-3 px-4">View</th>
                            <th class="text-center py-3 px-4">Add</th>
                            <th class="text-center py-3 px-4">Edit</th>
                            <th class="text-center py-3 px-4">Delete</th>
                            <th class="text-center py-3 px-4">Download</th>
                        </tr>
                    </thead>
                    <tbody class="text-[13px] text-slate-700">
                        @foreach($modules as $mod)
                        <tr class="border-b border-slate-100 perm-row" data-module-id="{{ $mod->id }}">
                            <td class="py-3.5 px-4 font-semibold">{{ $mod->name }}</td>
                            <td class="py-3.5 px-4 text-center"><input type="checkbox" class="perm-check w-4 h-4 rounded border-slate-300 accent-[#00ada8]" data-module="{{ $mod->id }}" data-action="view"></td>
                            <td class="py-3.5 px-4 text-center"><input type="checkbox" class="perm-check w-4 h-4 rounded border-slate-300 accent-[#00ada8]" data-module="{{ $mod->id }}" data-action="add"></td>
                            <td class="py-3.5 px-4 text-center"><input type="checkbox" class="perm-check w-4 h-4 rounded border-slate-300 accent-[#00ada8]" data-module="{{ $mod->id }}" data-action="edit"></td>
                            <td class="py-3.5 px-4 text-center"><input type="checkbox" class="perm-check w-4 h-4 rounded border-slate-300 accent-[#00ada8]" data-module="{{ $mod->id }}" data-action="delete"></td>
                            <td class="py-3.5 px-4 text-center"><input type="checkbox" class="perm-check w-4 h-4 rounded border-slate-300 accent-[#00ada8]" data-module="{{ $mod->id }}" data-action="download"></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

                <div class="flex items-center justify-between mt-6 pt-4 border-t border-slate-100">
                    <button onclick="closePermissionsModal()" class="px-4 py-2.5 text-xs font-bold text-slate-400 rounded-xl hover:bg-slate-50">Cancel</button>
                    <button id="savePermBtn" onclick="savePermissions()" class="bg-[#00ada8] px-6 py-3 rounded-2xl text-xs font-black uppercase tracking-[0.16em] text-white shadow-lg hover:opacity-90 disabled:opacity-60">
                        Save Permissions
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ── ADD / EDIT PANEL ── -->
<div id="userPanel">
    <div class="panel-inner">
        <div class="flex items-center justify-between px-7 py-5 border-b border-slate-100 flex-shrink-0">
            <div>
                <h3 id="modalTitle" class="text-base font-extrabold text-slate-900 tracking-tight">Create New User</h3>
                <p class="text-[10px] text-slate-400 font-medium mt-0.5">Fill in the account details below.</p>
            </div>
            <button onclick="closeUserModal()" class="w-8 h-8 flex items-center justify-center text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-xl transition-all">
                <i class="fa-solid fa-xmark text-base"></i>
            </button>
        </div>

        <div class="flex-1 overflow-y-auto px-7 py-6 space-y-4">

            <!-- Role -->
            <div>
                <label class="panel-label">Role *</label>
                <div class="relative">
                    <select id="inp-role" onchange="onRoleChange(this)" class="panel-field appearance-none pr-9 font-semibold">
                        <option value="" data-slug="">Select...</option>
                        @foreach($roles as $r)
                        <option value="{{ $r->id }}" data-slug="{{ $r->slug }}">{{ $r->name }}</option>
                        @endforeach
                    </select>
                    <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-[10px] pointer-events-none"></i>
                </div>
            </div>

            <!-- Lawyer Search (conditional on Law Firm Executive role) -->
            <div id="row-lawyer" style="display:none;">
                <label class="panel-label">Lawyer Search *</label>
                <input type="hidden" id="inp-lawyer-id" value="">
                <input type="hidden" id="inp-lawyer-name-val" value="">
                <div style="position:relative;">
                    <i class="fa-solid fa-magnifying-glass" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:10px;pointer-events:none;z-index:1;"></i>
                    <input id="inp-lawyer" type="text" placeholder="Search by code or name…"
                           class="panel-field" style="padding-left:32px;"
                           autocomplete="off"
                           oninput="onLawyerSearch()" onfocus="showLawyerSuggestions()">
                </div>
                <div id="lawyer-suggestions"
                     style="border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;box-shadow:0 12px 36px rgba(15,23,42,0.12);overflow:hidden;display:none;margin-top:4px;max-height:220px;overflow-y:auto;"
                     class="scroll-custom"></div>
            </div>

            <!-- Name -->
            <div>
                <label class="panel-label">Name *</label>
                <input id="inp-name" type="text" placeholder="Enter" class="panel-field">
            </div>

            <!-- Email -->
            <div>
                <label class="panel-label">Email Address *</label>
                <input id="inp-email" type="email" placeholder="Enter" class="panel-field">
            </div>

            <!-- Mobile No -->
            <div>
                <label class="panel-label">Mobile No *</label>
                <div id="mobile-wrap" style="display:flex;align-items:stretch;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;overflow:hidden;transition:all 0.2s;">
                    <select id="inp-mobile-prefix"
                        onfocus="document.getElementById('mobile-wrap').style.borderColor='#00ada8';document.getElementById('mobile-wrap').style.background='#fff';document.getElementById('mobile-wrap').style.boxShadow='0 0 0 3px rgba(0,173,168,0.08)'"
                        onblur="document.getElementById('mobile-wrap').style.borderColor='#e2e8f0';document.getElementById('mobile-wrap').style.background='#f8fafc';document.getElementById('mobile-wrap').style.boxShadow='none'"
                        style="width:100px;font-size:11px;font-weight:700;color:#475569;background:transparent;border:none;border-right:1.5px solid #e2e8f0;outline:none;padding:11px 6px 11px 8px;flex-shrink:0;font-family:'Plus Jakarta Sans',sans-serif;appearance:none;cursor:pointer;">
                        @foreach($phoneCodes as $pc)
                        <option value="{{ $pc->dial_code }}" {{ $pc->dial_code === '+968' ? 'selected' : '' }}>
                            {{ $pc->flag_emoji }} {{ $pc->dial_code }} {{ $pc->country_code }}
                        </option>
                        @endforeach
                    </select>
                    <input id="inp-mobile" type="text" inputmode="numeric" placeholder="Enter"
                        style="flex:1;background:transparent;border:none;outline:none;padding:11px 12px;font-size:12px;color:#1e293b;font-family:'Plus Jakarta Sans',sans-serif;"
                        oninput="this.value=this.value.replace(/[^0-9]/g,'')"
                        onfocus="document.getElementById('mobile-wrap').style.borderColor='#00ada8';document.getElementById('mobile-wrap').style.background='#fff';document.getElementById('mobile-wrap').style.boxShadow='0 0 0 3px rgba(0,173,168,0.08)'"
                        onblur="document.getElementById('mobile-wrap').style.borderColor='#e2e8f0';document.getElementById('mobile-wrap').style.background='#f8fafc';document.getElementById('mobile-wrap').style.boxShadow='none'">
                </div>
            </div>

            <!-- OTP Type -->
            <div>
                <label class="panel-label">OTP Type *</label>
                <input type="hidden" id="inp-otp-type" value="static">
                <div class="flex gap-2">
                    <button type="button" id="otp-btn-static" onclick="setOtpType('static')"
                        class="flex-1 py-2 rounded-xl text-[11px] font-black uppercase tracking-wide border-2 border-[#00ada8] bg-[#00ada8] text-white transition-all">Static</button>
                    <button type="button" id="otp-btn-dynamic" onclick="setOtpType('dynamic')"
                        class="flex-1 py-2 rounded-xl text-[11px] font-black uppercase tracking-wide border-2 border-slate-200 text-slate-400 hover:border-slate-300 transition-all">Dynamic</button>
                </div>
            </div>

            <!-- Static OTP Code -->
            <div id="row-otp-code">
                <label class="panel-label">Static OTP Code *</label>
                <input id="inp-otp-code" type="text"   maxlength="6"  pattern="\d{6}" inputmode="numeric" placeholder="Enter" class="panel-field">
            </div>

            <!-- Landing Page -->
            <div>
                <label class="panel-label">Landing Page</label>
                <div class="relative">
                    <select id="inp-landing" class="panel-field appearance-none pr-9 font-semibold">
                        <option value="">Select...</option>
                        @foreach($modules as $m)
                        <option value="{{ $m->slug }}">{{ $m->name }}</option>
                        @endforeach
                    </select>
                    <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-[10px] pointer-events-none"></i>
                </div>
            </div>

            <!-- Status -->
            <div>
                <label class="panel-label">Status</label>
                <input type="hidden" id="inp-status" value="Active">
                <div class="flex items-center gap-3">
                    <div id="statusToggle" onclick="setStatus(document.getElementById('inp-status').value === 'Active' ? 'Inactive' : 'Active')"
                        class="relative w-10 h-5 rounded-full cursor-pointer flex-shrink-0 transition-all duration-300"
                        style="background:linear-gradient(135deg,#62ddd4 0%,#5db8f0 100%); box-shadow:0 2px 8px rgba(93,184,240,0.35);">
                        <div id="statusKnob" class="absolute top-[3px] left-[3px] w-[14px] h-[14px] bg-white rounded-full transition-all duration-300" style="box-shadow:0 1px 4px rgba(0,0,0,0.2);"></div>
                    </div>
                    <span id="statusLabel" class="text-[11px] font-bold text-emerald-500 tracking-wide">Active</span>
                </div>
            </div>

            <!-- Buttons -->
            <div class="space-y-2 pt-2">
                <button onclick="saveUser()" id="panelSaveBtn"
                    class="w-full text-white py-3 rounded-2xl font-black text-[11px] uppercase tracking-[0.12em] shadow-lg transition-all hover:opacity-90"
                    style="background:radial-gradient(circle at top left,#00ada8 0%,#007d79 100%)">
                    <i class="fa-solid fa-user-plus mr-2"></i> Create Account
                </button>
                <button onclick="closeUserModal()" class="w-full text-slate-500 font-bold text-xs py-2.5 rounded-xl border border-slate-200 hover:bg-slate-50 transition-all">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>
@endpush

@push('scripts')
<script>
    const CSRF_TOKEN         = '{{ csrf_token() }}';
    const STORE_URL          = '{{ route("admin.users.store") }}';
    const UPDATE_URL         = '{{ url("admin/users") }}/:id';
    const ORACLE_LAW_FIRM_URL = '{{ route("admin.oracle.law-firms") }}';
    const DELETE_URL    = '{{ url("admin/users") }}/:id';
    const GET_PERM_URL  = '{{ url("admin/users") }}/:id/permissions';
    const SAVE_PERM_URL = '{{ url("admin/users") }}/:id/permissions';
    const ROLE_MODULES  = @json($roleModules);
    const MOD_PERM_MAP  = @json($modulePermMap);
    const PERM          = @json($portalPerms);
    const PER_PAGE      = 9;

    let page = 1, deleteIdx = null, editIdx = null, currentView = 'grid';
    let permUserId = null;

    // ── Seed from DB ──
    let users = @json($users->values());

    const avatarColors = ['bg-teal-500','bg-blue-500','bg-purple-500','bg-orange-500','bg-rose-500','bg-green-500','bg-indigo-500','bg-amber-500'];

    // Badge/icon by role slug
    function getRoleStyle(slug) {
        const map = {
            'superadmin':         { cls:'badge-teal',   icon:'fa-crown' },
            'aofs_management':    { cls:'badge-teal',   icon:'fa-chess-king' },
            'aofs_legal':         { cls:'badge-blue',   icon:'fa-scale-balanced' },
            'law_firm_executive': { cls:'badge-orange', icon:'fa-briefcase' },
        };
        return map[slug] || { cls:'badge-slate', icon:'fa-user' };
    }

    const statusClass = { Active:'status-active', Inactive:'status-inactive' };

    // ── Role count cards ──
    function updateRoleCounts() {
        document.querySelectorAll('[id^="count-role-"]').forEach(el => {
            const roleId = el.id.replace('count-role-', '');
            el.textContent = users.filter(u => String(u.roleId) === roleId).length;
        });
    }

    // ── Filter ──
    function getFiltered() {
        const q = document.getElementById('searchInput').value.toLowerCase();
        return users.filter(u => {
            const full = (u.fname + ' ' + u.lname).toLowerCase();
            return full.includes(q) || u.email.toLowerCase().includes(q) || (u.lawyerName || '').toLowerCase().includes(q) || (u.layerCode || '').toLowerCase().includes(q);
        });
    }

    // ── Render grid + list ──
    function render() {
        const filtered   = getFiltered();
        const total      = filtered.length;
        const totalPages = Math.max(1, Math.ceil(total / PER_PAGE));
        if (page > totalPages) page = 1;
        const start = (page - 1) * PER_PAGE;
        const slice = filtered.slice(start, start + PER_PAGE);

        // GRID
        document.getElementById('gridContainer').innerHTML = slice.map(u => {
            const ri       = users.indexOf(u);
            const initials = (u.fname[0] || '?') + (u.lname[0] || '');
            const color    = avatarColors[ri % avatarColors.length];
            const rs       = getRoleStyle(u.roleSlug);
            const sc       = statusClass[u.status] || 'badge-slate';
            return `<div class="group bg-white rounded-3xl border border-slate-100 p-6 flex flex-col gap-4 hover:shadow-lg transition-all">
                <div class="flex items-start justify-between">
                    <div class="w-12 h-12 ${color} text-white text-sm font-black flex items-center justify-center rounded-full shrink-0">${initials}</div>
                    <span class="badge ${sc}">${u.status}</span>
                </div>
                <div class="mt-2">
                    <p class="text-[15px] font-bold text-slate-800">${u.fname} ${u.lname}</p>
                    <p class="text-[11px] text-slate-400 mt-1 truncate">${u.email}</p>
                </div>
                <div class="flex items-center justify-between mt-auto pt-2">
                    <span class="badge ${rs.cls}"><i class="fa-solid ${rs.icon} mr-1 text-[9px]"></i>${u.role}</span>
                    ${u.lawyerName ? `<span class="text-[11px] font-semibold text-slate-400 truncate max-w-[140px]" title="${u.layerCode} — ${u.lawyerName}"><i class="fa-solid fa-scale-balanced mr-1 text-[9px]"></i>${u.layerCode}</span>` : ''}
                </div>
                <div class="border-t border-slate-50 pt-3 mt-1 flex items-center justify-between">
                    <span class="text-[10px] font-semibold text-slate-400"><i class="fa-regular fa-clock mr-1"></i>${u.last}</span>
                    <div class="flex gap-2">
                        <button onclick="openPermissionsModal(${ri})" title="Permissions" class="w-7 h-7 flex items-center justify-center rounded bg-slate-50 text-slate-500 hover:bg-purple-50 hover:text-purple-500 transition-colors"><i class="fa-solid fa-shield-halved text-[9px]"></i></button>
                        <button onclick="openEditModal(${ri})" title="Edit" class="w-7 h-7 flex items-center justify-center rounded bg-slate-50 text-slate-500 hover:bg-[#e6f7f6] hover:text-[#00ada8] transition-colors"><i class="fa-solid fa-pen text-[9px]"></i></button>
                        <button onclick="openDeleteModal(${ri})" title="Delete" class="w-7 h-7 flex items-center justify-center rounded bg-slate-50 text-slate-500 hover:bg-red-50 hover:text-red-500 transition-colors"><i class="fa-solid fa-trash-can text-[9px]"></i></button>
                    </div>
                </div>
            </div>`;
        }).join('');

        // LIST
        document.getElementById('listBody').innerHTML = slice.map(u => {
            const ri       = users.indexOf(u);
            const initials = (u.fname[0] || '?') + (u.lname[0] || '');
            const color    = avatarColors[ri % avatarColors.length];
            const rs       = getRoleStyle(u.roleSlug);
            const sc       = statusClass[u.status] || 'badge-slate';
            return `<tr class="transition-colors">
                <td class="py-3 px-4"><input type="checkbox" class="row-check rounded border-slate-300"></td>
                <td class="py-3 px-4">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 ${color} text-white text-[11px] font-black flex items-center justify-center rounded-xl shrink-0">${initials}</div>
                        <div>
                            <p class="text-xs font-bold text-slate-800">${u.fname} ${u.lname}</p>
                            <p class="text-[10px] text-slate-400">${u.email}</p>
                        </div>
                    </div>
                </td>
                <td class="py-3 px-4"><span class="badge ${rs.cls}"><i class="fa-solid ${rs.icon} mr-1 text-[9px]"></i>${u.role}</span></td>
                <td class="py-3 px-4 text-xs font-semibold text-slate-600">${u.lawyerName ? u.layerCode + ' — ' + u.lawyerName : '—'}</td>
                <td class="py-3 px-4"><span class="badge ${sc}">${u.status}</span></td>
                <td class="py-3 px-4 text-[11px] font-semibold text-slate-400">${u.last}</td>
                <td class="py-3 px-4">
                    <div class="flex items-center justify-center gap-2">
                        <button onclick="openPermissionsModal(${ri})" title="Permissions" class="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-100 text-slate-500 hover:bg-purple-50 hover:text-purple-500 transition-colors"><i class="fa-solid fa-shield-halved text-[10px]"></i></button>
                        <button onclick="openEditModal(${ri})" title="Edit" class="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-100 text-slate-500 hover:bg-[#e6f7f6] hover:text-[#00ada8] transition-colors"><i class="fa-solid fa-pen text-[10px]"></i></button>
                        <button onclick="openDeleteModal(${ri})" title="Delete" class="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-100 text-slate-500 hover:bg-red-50 hover:text-red-500 transition-colors"><i class="fa-solid fa-trash-can text-[10px]"></i></button>
                    </div>
                </td>
            </tr>`;
        }).join('');

        // Pagination
        document.getElementById('showingText').textContent =
            `Showing ${total ? start+1 : 0}–${Math.min(start+PER_PAGE, total)} of ${total} users`;
        const pag = document.getElementById('pagination');
        pag.innerHTML = `<button onclick="changePage(${page-1})" ${page===1?'disabled':''} class="w-8 h-8 rounded-lg border border-slate-200 text-slate-400 disabled:opacity-40"><i class="fa-solid fa-chevron-left text-[10px]"></i></button>`;
        for (let p = 1; p <= totalPages; p++)
            pag.innerHTML += `<button onclick="changePage(${p})" class="w-8 h-8 rounded-lg text-xs font-bold ${p===page?'bg-[#00ada8] text-white':'border border-slate-200 text-slate-400'}">${p}</button>`;
        pag.innerHTML += `<button onclick="changePage(${page+1})" ${page===totalPages?'disabled':''} class="w-8 h-8 rounded-lg border border-slate-200 text-slate-400 disabled:opacity-40"><i class="fa-solid fa-chevron-right text-[10px]"></i></button>`;

        updateRoleCounts();
    }

    function changePage(p) {
        const tp = Math.max(1, Math.ceil(getFiltered().length / PER_PAGE));
        if (p < 1 || p > tp) return;
        page = p; render();
    }

    function setView(v) {
        currentView = v;
        const isGrid = v === 'grid';
        document.getElementById('gridContainer').classList.toggle('hidden', !isGrid);
        document.getElementById('listContainer').classList.toggle('hidden', isGrid);
        document.getElementById('gridBtn').className = `w-9 h-9 flex items-center justify-center rounded-lg ${isGrid ? 'bg-white shadow-sm text-[#00ada8]' : 'text-slate-400 hover:text-[#00ada8]'}`;
        document.getElementById('listBtn').className = `w-9 h-9 flex items-center justify-center rounded-lg ${!isGrid ? 'bg-white shadow-sm text-[#00ada8]' : 'text-slate-400 hover:text-[#00ada8]'}`;
    }

    function toggleAll(cb) {
        document.querySelectorAll('.row-check').forEach(c => c.checked = cb.checked);
    }

    // ── Status toggle ──
    function setStatus(val) {
        const v = val === 'Active' ? 'Active' : 'Inactive';
        document.getElementById('inp-status').value = v;
        const knob = document.getElementById('statusKnob');
        const toggle = document.getElementById('statusToggle');
        const label = document.getElementById('statusLabel');
        if (v === 'Active') {
            knob.style.left = '3px';
            toggle.style.background = 'linear-gradient(135deg,#62ddd4 0%,#5db8f0 100%)';
            toggle.style.boxShadow  = '0 2px 8px rgba(93,184,240,0.35)';
            label.textContent = 'Active'; label.className = 'text-[11px] font-bold text-emerald-500 tracking-wide';
        } else {
            knob.style.left = '23px';
            toggle.style.background = 'linear-gradient(135deg,#cbd5e1 0%,#94a3b8 100%)';
            toggle.style.boxShadow  = '0 2px 6px rgba(148,163,184,0.25)';
            label.textContent = 'Inactive'; label.className = 'text-[11px] font-bold text-slate-400 tracking-wide';
        }
    }

    // ── OTP toggle ──
    function setOtpType(type) {
        document.getElementById('inp-otp-type').value = type;
        document.getElementById('row-otp-code').style.display = type === 'static' ? 'block' : 'none';
        document.getElementById('otp-btn-static').className  = `flex-1 py-2 rounded-xl text-[11px] font-black uppercase tracking-wide border-2 transition-all ${type==='static'  ? 'border-[#00ada8] bg-[#00ada8] text-white' : 'border-slate-200 text-slate-400'}`;
        document.getElementById('otp-btn-dynamic').className = `flex-1 py-2 rounded-xl text-[11px] font-black uppercase tracking-wide border-2 transition-all ${type==='dynamic' ? 'border-[#00ada8] bg-[#00ada8] text-white' : 'border-slate-200 text-slate-400'}`;
    }

    // ── Role change → lawyer search ──
    function onRoleChange(sel) {
        const slug = sel.options[sel.selectedIndex].dataset.slug;
        document.getElementById('row-lawyer').style.display = slug === 'law_firm_executive' ? 'block' : 'none';
        if (slug !== 'law_firm_executive') {
            document.getElementById('inp-lawyer').value    = '';
            document.getElementById('inp-lawyer-id').value = '';
            document.getElementById('lawyer-suggestions').style.display = 'none';
        }
    }

    // ── Oracle Lawyer (Law Firm) Search ──
    let lawyerTimer = null;

    function showLawyerSuggestions() {
        const q = document.getElementById('inp-lawyer').value.trim();
        if (q.length >= 1) doLawyerSearch(q);
    }

    function onLawyerSearch() {
        clearTimeout(lawyerTimer);
        lawyerTimer = setTimeout(() => doLawyerSearch(document.getElementById('inp-lawyer').value.trim()), 300);
    }

    async function doLawyerSearch(q) {
        const sug = document.getElementById('lawyer-suggestions');
        if (!q) { sug.style.display = 'none'; return; }

        sug.innerHTML = '<div style="padding:12px 14px;font-size:11px;color:#94a3b8;text-align:center;"><i class="fa-solid fa-spinner fa-spin mr-1"></i> Searching…</div>';
        sug.style.display = 'block';

        try {
            const res  = await fetch(ORACLE_LAW_FIRM_URL + '?q=' + encodeURIComponent(q), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            });
            const json = await res.json();

            if (!json.success) {
                sug.innerHTML = `<div style="padding:12px 14px;font-size:11px;color:#ef4444;text-align:center;"><i class="fa-solid fa-circle-exclamation mr-1"></i> ${json.message || 'Connection error'}</div>`;
                return;
            }
            if (!json.data || !json.data.length) {
                sug.innerHTML = '<div style="padding:12px 14px;font-size:11px;color:#94a3b8;text-align:center;">No results found</div>';
                return;
            }

            sug.innerHTML = json.data.map(f => `
                <div onclick='selectLawFirm(${JSON.stringify(f)})'
                     style="padding:10px 14px;cursor:pointer;border-bottom:1px solid #f8fafc;transition:background 0.1s;"
                     onmouseover="this.style.background='#f0fdfb'" onmouseout="this.style.background=''">
                    <div style="display:flex;align-items:center;gap:10px;">
                        <div style="width:34px;height:34px;border-radius:10px;background:#e6f7f6;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <i class="fa-solid fa-scale-balanced" style="color:#00ada8;font-size:12px;"></i>
                        </div>
                        <div>
                            <div style="font-size:11px;font-weight:800;color:#0f766e;">${f.id}</div>
                            <div style="font-size:11px;color:#374151;font-weight:600;">${f.name}</div>
                            ${f.branch ? `<div style="font-size:10px;color:#94a3b8;">Branch: ${f.branch}</div>` : ''}
                        </div>
                    </div>
                </div>
            `).join('');
        } catch (e) {
            sug.innerHTML = '<div style="padding:12px 14px;font-size:11px;color:#ef4444;text-align:center;"><i class="fa-solid fa-wifi mr-1"></i> Connection error</div>';
        }
    }

    function selectLawFirm(firm) {
        document.getElementById('inp-lawyer').value         = firm.id + ' — ' + firm.name;
        document.getElementById('inp-lawyer-id').value      = firm.id;
        document.getElementById('inp-lawyer-name-val').value = firm.name || '';
        document.getElementById('lawyer-suggestions').style.display = 'none';
        // Auto-populate fields
        if (firm.name)   document.getElementById('inp-name').value  = firm.name;
        if (firm.email)  document.getElementById('inp-email').value = firm.email;
        if (firm.mobile) document.getElementById('inp-mobile').value = firm.mobile.replace(/\D/g, '');
    }

    // Close lawyer suggestions on outside click
    document.addEventListener('click', function (e) {
        if (!e.target.closest('#row-lawyer')) {
            document.getElementById('lawyer-suggestions').style.display = 'none';
        }
    });

    // ── Alert modal ──
    function showAlert(message, type = 'error') {
        const configs = {
            error:   { bg: 'bg-red-50',   text: 'text-red-500',   icon: 'fa-circle-xmark',       title: 'Something went wrong' },
            warning: { bg: 'bg-amber-50', text: 'text-amber-500', icon: 'fa-triangle-exclamation', title: 'Please check your input' },
            info:    { bg: 'bg-sky-50',   text: 'text-sky-500',   icon: 'fa-circle-info',          title: 'Information' },
        };
        const cfg = configs[type] || configs.error;
        document.getElementById('alertIcon').className      = `w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 ${cfg.bg}`;
        document.getElementById('alertIconInner').className = `fa-solid ${cfg.icon} text-2xl ${cfg.text}`;
        document.getElementById('alertTitle').textContent   = cfg.title;
        document.getElementById('alertMsg').textContent     = message;
        const modal = document.getElementById('alertModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }
    function closeAlert() {
        const modal = document.getElementById('alertModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    // ── Searchable Select ──
    const _sdClosers = [];

    function initSearchableSelect(id, opts) {
        opts = opts || {};
        const sel = document.getElementById(id);
        if (!sel || sel._sdInit) return;
        sel._sdInit = true;
        sel.style.display = 'none';

        const parent = sel.parentElement;

        // Hide sibling static chevron (role/landing/dept wrappers)
        const staticChevron = parent.querySelector('i.fa-chevron-down');
        if (staticChevron) staticChevron.style.display = 'none';

        // ── Trigger button ──
        const trigger = document.createElement('div');
        if (opts.compact) {
            // Mobile-prefix: compact, fits inside flex mobile-wrap
            trigger.style.cssText = [
                'display:flex;align-items:center;justify-content:space-between;',
                'flex-shrink:0;cursor:pointer;user-select:none;',
                'padding:11px 8px 11px 10px;min-width:108px;',
                'border-right:1.5px solid #e2e8f0;',
            ].join('');
        } else {
            trigger.className = 'panel-field';
            trigger.style.cssText = 'cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;';
        }

        const label = document.createElement('span');
        label.style.cssText = 'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-family:"Plus Jakarta Sans",sans-serif;';

        const arrow = document.createElement('i');
        arrow.className = 'fa-solid fa-chevron-down';
        arrow.style.cssText = 'font-size:9px;color:#94a3b8;flex-shrink:0;margin-left:5px;transition:transform 0.2s;';

        trigger.appendChild(label);
        trigger.appendChild(arrow);

        // ── Dropdown panel ──
        const panel = document.createElement('div');
        panel.style.cssText = [
            opts.compact ? 'position:fixed;' : 'position:absolute;top:calc(100% + 4px);left:0;right:0;',
            'z-index:9999;background:#fff;border-radius:14px;border:1.5px solid #e2e8f0;',
            'box-shadow:0 8px 32px rgba(0,0,0,0.13);overflow:hidden;display:none;',
        ].join('');

        // Search input
        const searchWrap = document.createElement('div');
        searchWrap.style.cssText = 'padding:8px 8px 6px;border-bottom:1px solid #f1f5f9;';

        const searchInp = document.createElement('input');
        searchInp.type = 'text';
        searchInp.placeholder = 'Search...';
        searchInp.style.cssText = [
            'width:100%;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;',
            'padding:7px 10px;font-size:11px;color:#1e293b;outline:none;box-sizing:border-box;',
            'font-family:"Plus Jakarta Sans",sans-serif;transition:all 0.15s;',
        ].join('');
        searchInp.addEventListener('focus', () => {
            searchInp.style.borderColor = '#00ada8';
            searchInp.style.background  = '#fff';
            searchInp.style.boxShadow   = '0 0 0 3px rgba(0,173,168,0.08)';
        });
        searchInp.addEventListener('blur', () => {
            searchInp.style.borderColor = '#e2e8f0';
            searchInp.style.background  = '#f8fafc';
            searchInp.style.boxShadow   = 'none';
        });
        searchWrap.appendChild(searchInp);

        const optsList = document.createElement('div');
        optsList.style.cssText = 'max-height:168px;overflow-y:auto;padding:4px 0;';

        panel.appendChild(searchWrap);
        panel.appendChild(optsList);

        // Attach to DOM
        parent.insertBefore(trigger, sel);
        if (opts.compact) {
            document.body.appendChild(panel); // escape overflow:hidden
        } else {
            parent.appendChild(panel);
        }

        function buildList(q) {
            q = (q || '').toLowerCase();
            optsList.innerHTML = '';
            let count = 0;
            Array.from(sel.options).forEach(o => {
                if (q && !o.text.toLowerCase().includes(q)) return;
                const item = document.createElement('div');
                item.style.cssText = 'padding:8px 14px;font-size:11px;cursor:pointer;transition:background 0.12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
                item.textContent = o.text;
                const active = String(o.value) === String(sel.value);
                item.style.color      = active ? '#00ada8' : (o.value ? '#1e293b' : '#94a3b8');
                item.style.fontWeight = active ? '700'     : (o.value ? '600'     : '400');
                if (active) item.style.background = '#f0fdfb';
                item.addEventListener('mouseenter', () => { if (!active) item.style.background = '#f8fafc'; });
                item.addEventListener('mouseleave', () => { if (!active) item.style.background = ''; });
                item.addEventListener('mousedown', e => {
                    e.preventDefault();
                    sel.value = o.value;
                    syncDisplay(id);
                    close();
                    sel.dispatchEvent(new Event('change'));
                });
                optsList.appendChild(item);
                count++;
            });
            if (!count) {
                optsList.innerHTML = '<div style="padding:12px;font-size:11px;color:#94a3b8;text-align:center;">No results found</div>';
            }
        }

        function open() {
            _sdClosers.forEach(fn => fn !== close && fn()); // close others
            if (opts.compact) {
                const rect = trigger.getBoundingClientRect();
                panel.style.top   = (rect.bottom + 4) + 'px';
                panel.style.left  = rect.left + 'px';
                panel.style.width = Math.max(200, rect.width) + 'px';
            }
            panel.style.display = 'block';
            arrow.style.transform = 'rotate(180deg)';
            if (opts.compact) {
                const mw = document.getElementById('mobile-wrap');
                if (mw) { mw.style.borderColor='#00ada8'; mw.style.background='#fff'; mw.style.boxShadow='0 0 0 3px rgba(0,173,168,0.08)'; }
            } else {
                trigger.style.borderColor = '#00ada8';
                trigger.style.background  = '#fff';
                trigger.style.boxShadow   = '0 0 0 3px rgba(0,173,168,0.08)';
            }
            searchInp.value = '';
            buildList();
            setTimeout(() => searchInp.focus(), 30);
        }

        function close() {
            panel.style.display   = 'none';
            arrow.style.transform = '';
            if (opts.compact) {
                const mw = document.getElementById('mobile-wrap');
                if (mw) { mw.style.borderColor='#e2e8f0'; mw.style.background='#f8fafc'; mw.style.boxShadow='none'; }
            } else {
                trigger.style.borderColor = '';
                trigger.style.background  = '';
                trigger.style.boxShadow   = '';
            }
        }

        _sdClosers.push(close);
        trigger.addEventListener('click', e => { e.stopPropagation(); panel.style.display === 'none' ? open() : close(); });
        searchInp.addEventListener('input', () => buildList(searchInp.value));
        searchInp.addEventListener('click', e => e.stopPropagation());
        panel.addEventListener('click', e => e.stopPropagation());
        document.addEventListener('click', close);

        // Sync the visible label from select's current value
        sel._sdSync = () => {
            const o = sel.options[sel.selectedIndex];
            label.textContent      = o ? o.text : 'Select...';
            label.style.color      = o?.value ? '#1e293b' : '#94a3b8';
            label.style.fontWeight = o?.value ? '700'     : '400';
        };
        sel._sdSync();
    }

    function syncDisplay(id) {
        const el = document.getElementById(id);
        if (el && el._sdSync) el._sdSync();
    }

    // ── Permission denied ──
    function showPermDenied(action) {
        const msgs = {
            add:    'You do not have permission to add new users.',
            edit:   'You do not have permission to edit users.',
            delete: 'You do not have permission to delete users.',
        };
        document.getElementById('permDeniedMsg').textContent = msgs[action] || 'Permission denied.';
        const modal = document.getElementById('permDeniedModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }
    function closePermDeniedModal() {
        const modal = document.getElementById('permDeniedModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }
    function handleAddUser() {
        if (!PERM.add) { showPermDenied('add'); return; }
        openAddModal();
    }

    // ── Panel helpers ──
    function openPanel() {
        document.getElementById('userPanel').classList.add('panel-open');
        document.body.classList.add('panel-open-state');
    }
    function closeUserModal() {
        document.getElementById('userPanel').classList.remove('panel-open');
        document.body.classList.remove('panel-open-state');
    }

    function resetPanel() {
        ['inp-role','inp-lawyer','inp-name','inp-email','inp-mobile','inp-otp-code','inp-landing'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.value = '';
        });
        document.getElementById('inp-lawyer-id').value = '';
        document.getElementById('inp-lawyer-name-val').value = '';
        document.getElementById('lawyer-suggestions').style.display = 'none';
        document.getElementById('inp-mobile-prefix').value = '+968';
        ['inp-role','inp-landing','inp-mobile-prefix'].forEach(syncDisplay);
        document.getElementById('row-lawyer').style.display = 'none';
        setOtpType('static');
        setStatus('Active');
    }

    function openAddModal() {
        editIdx = null;
        document.getElementById('modalTitle').textContent = 'Create New User';
        document.getElementById('panelSaveBtn').innerHTML = '<i class="fa-solid fa-user-plus mr-2"></i> Create Account';
        resetPanel();
        openPanel();
    }

    function openEditModal(idx) {
        if (!PERM.edit) { showPermDenied('edit'); return; }
        editIdx = idx;
        const u = users[idx];
        document.getElementById('modalTitle').textContent = 'Edit User';
        document.getElementById('panelSaveBtn').innerHTML = '<i class="fa-solid fa-floppy-disk mr-2"></i> Save Changes';
        resetPanel();
        document.getElementById('inp-name').value    = u.fname + (u.lname ? ' ' + u.lname : '');
        document.getElementById('inp-email').value   = u.email;
        document.getElementById('inp-role').value          = u.roleId || '';
        document.getElementById('inp-mobile-prefix').value = u.mobilePrefix || '+968';
        document.getElementById('inp-mobile').value        = u.mobile || '';
        document.getElementById('inp-otp-code').value      = u.otpCode || '';
        document.getElementById('inp-landing').value       = u.landing || '';
        if (u.layerCode) {
            document.getElementById('inp-lawyer-id').value       = u.layerCode;
            document.getElementById('inp-lawyer-name-val').value = u.lawyerName || '';
            document.getElementById('inp-lawyer').value          = u.layerCode + (u.lawyerName ? ' — ' + u.lawyerName : '');
        }
        ['inp-role','inp-landing','inp-mobile-prefix'].forEach(syncDisplay);
        onRoleChange(document.getElementById('inp-role'));
        setOtpType(u.otpType || 'static');
        setStatus(u.status);
        openPanel();
    }

    // ── Save (create / update) ──
    async function saveUser() {
        const name     = document.getElementById('inp-name').value.trim();
        const email    = document.getElementById('inp-email').value.trim();
        const roleEl   = document.getElementById('inp-role');
        const roleId   = roleEl.value;
        const roleName = roleEl.options[roleEl.selectedIndex]?.text || '';
        const roleSlug = roleEl.options[roleEl.selectedIndex]?.dataset.slug || '';
        const mobilePrefix = document.getElementById('inp-mobile-prefix').value.trim();
        const mobile       = document.getElementById('inp-mobile').value.trim();
        const otpType  = document.getElementById('inp-otp-type').value;
        const otpCode  = document.getElementById('inp-otp-code').value.trim();
        const landing  = document.getElementById('inp-landing').value;
        const status   = document.getElementById('inp-status').value;

        if (!name || !email || !roleId) { showAlert('Please fill all required fields.', 'warning'); return; }

        const payload = new FormData();
        payload.append('_token',        CSRF_TOKEN);
        payload.append('name',          name);
        payload.append('email',         email);
        payload.append('role_id',       roleId);
        payload.append('mobile_prefix',  mobilePrefix);
        payload.append('mobile',         mobile);
        payload.append('otp_type',      otpType);
        payload.append('otp_value',     otpCode);
        payload.append('landingpage',   landing);
        payload.append('is_active',     status === 'Active' ? '1' : '0');
        payload.append('layer_code',    document.getElementById('inp-lawyer-id').value || '');
        payload.append('lawyer_name',   document.getElementById('inp-lawyer-name-val')?.value || '');

        const isEdit = editIdx !== null;
        const url    = isEdit ? UPDATE_URL.replace(':id', users[editIdx].id) : STORE_URL;
        if (isEdit) payload.append('_method', 'PUT');

        const btn = document.getElementById('panelSaveBtn');
        btn.disabled = true;
        btn.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i> ${isEdit ? 'Saving...' : 'Creating...'}`;

        try {
            const res  = await fetch(url, { method: 'POST', body: payload, headers: { 'Accept': 'application/json' } });
            const data = await res.json();

            if (data.success) {
                if (isEdit) {
                    users[editIdx] = data.user;
                } else {
                    users.unshift(data.user);
                }
                closeUserModal();
                render();
            } else {
                const err = data.errors ? Object.values(data.errors)[0]?.[0] : (data.message || 'Something went wrong.');
                showAlert(err, 'warning');
            }
        } catch (e) {
            showAlert('Request failed. Please try again.');
        } finally {
            btn.disabled = false;
            btn.innerHTML = isEdit
                ? '<i class="fa-solid fa-floppy-disk mr-2"></i> Save Changes'
                : '<i class="fa-solid fa-user-plus mr-2"></i> Create Account';
        }
    }

    // ── Delete ──
    function openDeleteModal(idx) {
        if (!PERM.delete) { showPermDenied('delete'); return; }
        deleteIdx = idx;
        const u = users[idx];
        document.getElementById('deleteUserName').textContent = u.fname + ' ' + u.lname + ' — ' + u.email;
        const modal = document.getElementById('deleteModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }
    function closeDeleteModal() {
        const modal = document.getElementById('deleteModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        deleteIdx = null;
    }
    async function confirmDelete() {
        if (deleteIdx === null) return;
        const userId = users[deleteIdx].id;
        const url    = DELETE_URL.replace(':id', userId);

        const btn = document.getElementById('deleteConfirmBtn');
        btn.disabled = true;
        btn.textContent = 'Removing...';

        const payload = new FormData();
        payload.append('_token',  CSRF_TOKEN);
        payload.append('_method', 'DELETE');

        try {
            const res  = await fetch(url, { method: 'POST', body: payload, headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            if (data.success) {
                users.splice(deleteIdx, 1);
                closeDeleteModal();
                render();
            } else {
                showAlert(data.message || 'Delete failed.');
            }
        } catch (e) {
            showAlert('Request failed. Please try again.');
        } finally {
            btn.disabled = false;
            btn.textContent = 'Remove';
        }
    }

    // ── Permissions modal ──
    async function openPermissionsModal(idx) {
        const u        = users[idx];
        const fullName = u.fname + ' ' + u.lname;
        permUserId = u.id;

        document.getElementById('permRoleChip').textContent      = u.role;
        document.getElementById('permRoleTitle').textContent     = fullName + ' — Module Permissions';
        document.getElementById('permRoleTitleLeft').textContent = fullName;

        // Show only modules assigned to this user's role
        const allowedModuleIds = (ROLE_MODULES[u.roleId] || []).map(String);
        document.querySelectorAll('.perm-row').forEach(row => {
            const mid = row.dataset.moduleId;
            row.style.display = (allowedModuleIds.length === 0 || allowedModuleIds.includes(mid))
                ? '' : 'none';
        });

        // Show a notice if no modules are assigned to this role
        const tbody = document.querySelector('#permissionsModal tbody');
        const existing = document.getElementById('no-perm-notice');
        if (existing) existing.remove();
        if (allowedModuleIds.length === 0) {
            const tr = document.createElement('tr');
            tr.id = 'no-perm-notice';
            tr.innerHTML = `<td colspan="6" class="py-8 text-center text-slate-400 text-xs font-semibold">
                <i class="fa-solid fa-circle-exclamation mr-2 text-slate-300"></i>
                No modules are assigned to the <strong>${u.role}</strong> role yet.
            </td>`;
            tbody.appendChild(tr);
        }

        // Reset all checkboxes
        document.querySelectorAll('.perm-check').forEach(cb => cb.checked = false);

        const modal = document.getElementById('permissionsModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');

        // Fetch existing permissions and pre-check
        try {
            const res  = await fetch(GET_PERM_URL.replace(':id', u.id), { headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            const activeIds = (data.permission_ids || []).map(String);

            document.querySelectorAll('.perm-check').forEach(cb => {
                const moduleId = cb.dataset.module;
                const action   = cb.dataset.action;
                const permId   = (MOD_PERM_MAP[moduleId] || {})[action];
                if (permId && activeIds.includes(String(permId))) {
                    cb.checked = true;
                }
            });
        } catch (e) { /* silently ignore fetch errors */ }
    }

    function closePermissionsModal() {
        const modal = document.getElementById('permissionsModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        permUserId = null;
    }

    async function savePermissions() {
        if (!permUserId) return;

        const permIds = [];
        document.querySelectorAll('.perm-check:checked').forEach(cb => {
            const permId = (MOD_PERM_MAP[cb.dataset.module] || {})[cb.dataset.action];
            if (permId) permIds.push(permId);
        });

        const btn = document.getElementById('savePermBtn');
        btn.disabled = true;
        btn.textContent = 'Saving...';

        const payload = new FormData();
        payload.append('_token', CSRF_TOKEN);
        permIds.forEach(id => payload.append('permission_ids[]', id));

        try {
            const res  = await fetch(SAVE_PERM_URL.replace(':id', permUserId), {
                method: 'POST', body: payload, headers: { 'Accept': 'application/json' }
            });
            const data = await res.json();
            if (data.success) {
                closePermissionsModal();
            } else {
                showAlert(data.message || 'Failed to save permissions.');
            }
        } catch (e) {
            showAlert('Request failed. Please try again.');
        } finally {
            btn.disabled = false;
            btn.textContent = 'Save Permissions';
        }
    }

    if (PERM.view) render();

    // Init searchable selects
    initSearchableSelect('inp-role');
    initSearchableSelect('inp-landing');
    initSearchableSelect('inp-mobile-prefix', { compact: true });
</script>
@endpush