@extends('layouts.app')

@section('title', 'Menu Assignment - ' . $user->name)
@section('page-title', 'Menu Assignment')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-bars me-2"></i>
                            Menu Assignment for {{ $user->name }}
                        </h5>
                        <a href="{{ route('users.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Users
                        </a>
                    </div>
                </div>
                <div class="custom-card-body">
                    @if(isset($isCurrentUserSuperAdmin) && !$isCurrentUserSuperAdmin)
                    <div class="alert alert-info mb-3">
                        <i class="fas fa-info-circle mr-2"></i>
                        <strong>Note:</strong> You can only assign menus and permissions that you have access to.
                    </div>
                    @endif
                    
                    <form method="POST" action="{{ route('user-menus.update', $user) }}">
                        @csrf
                        @method('PUT')
                        
                        <div class="row">
                            <div class="col-md-8">
                                <!-- Permissions Section -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <h6 class="mb-0 d-flex align-items-center flex-grow-1" role="button" onclick="togglePermissionsAccordion()" style="cursor: pointer;">
                                                <i class="fas fa-shield-alt mr-2"></i>
                                                <span>Permissions Management</span>
                                                @if(isset($isCurrentUserSuperAdmin) && !$isCurrentUserSuperAdmin)
                                                    <small class="text-muted ml-2">(Based on your assigned permissions)</small>
                                                @endif
                                                <i class="fas fa-chevron-up ml-2" id="permissionsChevron"></i>
                                            </h6>
                                            <div class="ml-3" onclick="event.stopPropagation();">
                                                <div class="input-group" style="width: 250px;">
                                                    <input type="text" 
                                                           class="form-control form-control-sm" 
                                                           id="permissionSearchInput" 
                                                           placeholder="Search permissions..." 
                                                           onkeyup="filterPermissions(this.value)"
                                                           onclick="event.stopPropagation();">
                                                    <div class="input-group-append">
                                                        <span class="input-group-text bg-white">
                                                            <i class="fas fa-search text-muted"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body" id="permissionsCardBody" style="display: none;">
                                        <div class="d-flex mb-3">
                                            <button type="button" class="btn btn-outline-success btn-sm mr-2" onclick="selectAllPermissions()">
                                                <i class="fas fa-check-square mr-1"></i>Select All Permissions
                                            </button>
                                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="deselectAllPermissions()">
                                                <i class="fas fa-square mr-1"></i>Deselect All Permissions
                                            </button>
                                        </div>
                                        
                                        <div id="permissionsAccordion" role="tablist">
                                            @php
                                                $permissionModules = $permissionsByModule->toArray();
                                                $firstModuleKey = array_key_first($permissionModules);
                                            @endphp
                                            @foreach($permissionsByModule as $moduleIndex => $permissions)
                                                @php
                                                    $module = $moduleIndex;
                                                    $moduleId = str_replace([' ', '-', '_', '.'], '', strtolower($module));
                                                    $isFirst = $moduleIndex === $firstModuleKey;
                                                @endphp
                                                <div class="card mb-2">
                                                    <div class="card-header" role="tab" id="permissionHeading{{ $moduleId }}">
                                                        <h6 class="mb-0">
                                                            <a class="d-flex align-items-center" 
                                                               data-toggle="collapse" 
                                                               href="#permissionCollapse{{ $moduleId }}" 
                                                               role="button" 
                                                               aria-expanded="{{ $isFirst ? 'true' : 'false' }}" 
                                                               aria-controls="permissionCollapse{{ $moduleId }}"
                                                               style="text-decoration: none; color: inherit; cursor: pointer;">
                                                                <i class="fas fa-folder text-primary mr-2"></i>
                                                                <span class="font-weight-bold">{{ ucfirst($module) }} Permissions</span>
                                                                <span class="badge bg-secondary ml-2">{{ $permissions->count() }}</span>
                                                                <i class="fas fa-chevron-down ml-auto"></i>
                                                            </a>
                                                        </h6>
                                                    </div>
                                                    
                                                    <div id="permissionCollapse{{ $moduleId }}" 
                                                         class="collapse {{ $isFirst ? 'show' : '' }}" 
                                                         role="tabpanel" 
                                                         aria-labelledby="permissionHeading{{ $moduleId }}" 
                                                         data-parent="#permissionsAccordion">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                @foreach($permissions as $permission)
                                                                    <div class="col-md-6 col-lg-4 mb-2">
                                                                        <div class="form-check">
                                                                            <input class="form-check-input permission-checkbox" 
                                                                                   type="checkbox" 
                                                                                   name="permission_ids[]" 
                                                                                   value="{{ $permission->id }}"
                                                                                   id="permission_{{ $permission->id }}"
                                                                                   {{ in_array($permission->permission_key, $userPermissions) ? 'checked' : '' }}>
                                                                            <label class="form-check-label" for="permission_{{ $permission->id }}">
                                                                                @if(str_contains($permission->permission_key, 'create'))
                                                                                    <i class="fas fa-plus text-success mr-1"></i>
                                                                                @elseif(str_contains($permission->permission_key, 'view'))
                                                                                    <i class="fas fa-eye text-info mr-1"></i>
                                                                                @elseif(str_contains($permission->permission_key, 'edit'))
                                                                                    <i class="fas fa-edit text-warning mr-1"></i>
                                                                                @elseif(str_contains($permission->permission_key, 'delete'))
                                                                                    <i class="fas fa-trash text-danger mr-1"></i>
                                                                                @else
                                                                                    <i class="fas fa-key text-secondary mr-1"></i>
                                                                                @endif
                                                                                {{ $permission->description }}
                                                                                <br>
                                                                                <small class="text-muted ml-3" style="font-size: 0.75rem;">
                                                                                    <i class="fas fa-route mr-1"></i>{{ $permission->permission_key }}
                                                                                </small>
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Menus Section -->
                                <div class="d-flex align-items-center justify-content-between mb-3">
                                    <h6 class="mb-0">
                                        Available Menus
                                        @if(isset($isCurrentUserSuperAdmin) && !$isCurrentUserSuperAdmin)
                                            <small class="text-muted">(Based on your assigned menus and permissions)</small>
                                        @endif
                                    </h6>
                                    <div class="ml-3">
                                        <div class="input-group" style="width: 250px;">
                                            <input type="text" 
                                                   class="form-control form-control-sm" 
                                                   id="menuSearchInput" 
                                                   placeholder="Search menus & routes..." 
                                                   onkeyup="filterMenus(this.value)">
                                            <div class="input-group-append">
                                                <span class="input-group-text bg-white">
                                                    <i class="fas fa-search text-muted"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div id="menusAccordion" role="tablist">
                                    @foreach($menus as $index => $menu)
                                        <div class="card mb-2">
                                            <div class="card-header" role="tab" id="heading{{ $menu->id }}">
                                                <h6 class="mb-0">
                                                    <div class="d-flex align-items-center">
                                                        <div class="form-check mr-3 mb-0" style="flex-shrink: 0;" onclick="event.stopPropagation();">
                                                            <input class="form-check-input parent-menu-checkbox" 
                                                                   type="checkbox" 
                                                                   name="menu_ids[]" 
                                                                   value="{{ $menu->id }}"
                                                                   id="menu_{{ $menu->id }}"
                                                                   style="margin-top: 0.25rem;"
                                                                   {{ in_array($menu->id, $assignedMenuIds) ? 'checked' : '' }}
                                                                   onclick="event.stopPropagation();">
                                                        </div>
                                                        <a class="d-flex align-items-center flex-grow-1" 
                                                           data-toggle="collapse" 
                                                           href="#collapse{{ $menu->id }}" 
                                                           role="button" 
                                                           aria-expanded="{{ $index === 0 ? 'true' : 'false' }}" 
                                                           aria-controls="collapse{{ $menu->id }}"
                                                           style="text-decoration: none; color: inherit; cursor: pointer;">
                                                            @if($menu->icon)
                                                                <i class="{{ $menu->icon }} mr-2"></i>
                                                            @endif
                                                            <span class="font-weight-bold">{{ $menu->name }}</span>
                                                            @if($menu->route)
                                                                <small class="text-muted ml-2">({{ $menu->route }})</small>
                                                            @endif
                                                            <i class="fas fa-chevron-down ml-auto"></i>
                                                        </a>
                                                    </div>
                                                </h6>
                                            </div>
                                            
                                            <div id="collapse{{ $menu->id }}" 
                                                 class="collapse {{ $index === 0 ? 'show' : '' }}" 
                                                 role="tabpanel" 
                                                 aria-labelledby="heading{{ $menu->id }}" 
                                                 data-parent="#menusAccordion">
                                                <div class="card-body">
                                                    @if($menu->children->count() > 0)
                                                        @php
                                                            $checkedChildrenIds = array_intersect($menu->children->pluck('id')->toArray(), $assignedMenuIds);
                                                            $checkedCount = count($checkedChildrenIds);
                                                            // Count routes assigned to user for checked children menus
                                                            $routeCount = \App\Models\UserRouteAssign::where('user_id', $user->id)
                                                                ->where('is_assigned', true)
                                                                ->whereIn('menu_id', $checkedChildrenIds)
                                                                ->count();
                                                        @endphp
                                                        <h6 class="text-muted mb-3">
                                                            <i class="fas fa-list mr-2"></i>Sub Menus:
                                                            <span class="sub-menu-count" data-parent-id="{{ $menu->id }}">
                                                                (Menu Checked-<span class="checked-count-{{ $menu->id }}">{{ $checkedCount }}</span>, Route Checked-<span class="route-count-{{ $menu->id }}">{{ $routeCount }}</span>)
                                                            </span>
                                                        </h6>
                                                        <div class="row">
                                                            @foreach($menu->children as $child)
                                                                @php
                                                                    $childRouteCount = \App\Models\UserRouteAssign::where('user_id', $user->id)
                                                                        ->where('menu_id', $child->id)
                                                                        ->where('is_assigned', true)
                                                                        ->count();
                                                                @endphp
                                                                <div class="col-md-6 mb-3">
                                                                    <div class="d-flex align-items-start">
                                                                        <div class="form-check d-flex align-items-start" style="flex: 1;">
                                                                            <input class="form-check-input child-menu-checkbox mt-1" 
                                                                                   type="checkbox" 
                                                                                   name="menu_ids[]" 
                                                                                   value="{{ $child->id }}"
                                                                                   id="menu_{{ $child->id }}"
                                                                                   data-parent="{{ $menu->id }}"
                                                                                   data-route-count="{{ $childRouteCount }}"
                                                                                   style="flex-shrink: 0; margin-right: 0.5rem;"
                                                                                   {{ in_array($child->id, $assignedMenuIds) ? 'checked' : '' }}>
                                                                            <label class="form-check-label flex-grow-1" for="menu_{{ $child->id }}" style="cursor: pointer;">
                                                                                @if($child->icon)
                                                                                    <i class="{{ $child->icon }} mr-2"></i>
                                                                                @endif
                                                                                <strong>{{ $child->name }}</strong>
                                                                                @if($child->route)
                                                                                    <br>
                                                                                    <small class="text-muted" style="font-size: 0.75rem; margin-left: 1.5rem;">
                                                                                        <i class="fas fa-route mr-1"></i>{{ $child->route }}
                                                                                    </small>
                                                                                @else
                                                                                    <br>
                                                                                    <small class="text-muted" style="font-size: 0.75rem; margin-left: 1.5rem;">
                                                                                        <i class="fas fa-info-circle mr-1"></i>No route assigned
                                                                                    </small>
                                                                                @endif
                                                                            </label>
                                                                        </div>
                                                                        @if($child->route)
                                                                            <button type="button" 
                                                                                    class="btn btn-sm btn-outline-info ml-2 route-btn" 
                                                                                    data-menu-id="{{ $child->id }}"
                                                                                    data-menu-name="{{ $child->name }}"
                                                                                    data-menu-route="{{ $child->route }}"
                                                                                    data-user-id="{{ $user->id }}"
                                                                                    onclick="event.stopPropagation(); openRoutesModal(this)">
                                                                                <i class="fas fa-list mr-1"></i>Routes
                                                                            </button>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @else
                                                        <p class="text-muted mb-0">
                                                            <i class="fas fa-info-circle mr-2"></i>
                                                            No sub-menus available for this menu.
                                                        </p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                
                                @if($menus->count() === 0)
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle mr-2"></i>
                                        No menus available. Please assign permissions to this user first.
                                    </div>
                                @endif
                            </div>
                            
                            <div class="col-md-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="mb-0">User Information</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="avatar me-3">
                                                @if($user->profile_photo)
                                                    <img src="{{ Storage::url($user->profile_photo) }}" 
                                                         alt="{{ $user->name }}" 
                                                         class="rounded-circle" 
                                                         width="50" height="50">
                                                @else
                                                    <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center text-white" 
                                                         style="width: 50px; height: 50px;">
                                                        <i class="fas fa-user"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $user->name }}</h6>
                                                <small class="text-muted">{{ $user->email }}</small>
                                            </div>
                                        </div>
                                        
                                        <div class="mb-2">
                                            <strong>Role:</strong>
                                            <span class="badge bg-{{ $user->role === 'admin' ? 'danger' : ($user->role === 'manager' ? 'warning' : ($user->role === 'technician' ? 'info' : 'secondary')) }}">
                                                {{ ucfirst($user->role) }}
                                            </span>
                                        </div>
                                        
                                        <div class="mb-2">
                                            <strong>Status:</strong>
                                            <span class="badge bg-{{ $user->status === 'active' ? 'success' : ($user->status === 'inactive' ? 'warning' : 'danger') }}">
                                                {{ ucfirst($user->status) }}
                                            </span>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <strong>Assigned Menus:</strong>
                                            <span class="badge bg-primary" id="assigned-count">{{ count($assignedMenuIds) }}</span>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <strong>Assigned Route:</strong>
                                            <span class="badge bg-info" id="assigned-routes-count">{{ $assignedRoutesCount ?? 0 }} Routes</span>
                                        </div>
                                        
                                        @if(isset($parentUser) && $parentUser)
                                        <div class="mb-3">
                                            <strong>Parent User:</strong>
                                            <div class="mt-1">
                                                <span class="badge bg-info">
                                                    <i class="fas fa-user me-1"></i>{{ $parentUser->name }}
                                                </span>
                                            </div>
                                        </div>
                                        @endif
                                        
                                        <div class="mb-3">
                                            <strong>Users Permissions:</strong>
                                            <div class="mt-2">
                                                <div class="d-flex flex-wrap gap-1">
                                                    <span class="badge bg-{{ $usersPermissions['create'] ? 'success' : 'secondary' }}">
                                                        <i class="fas fa-plus me-1"></i>Create
                                                    </span>
                                                    <span class="badge bg-{{ $usersPermissions['view'] ? 'info' : 'secondary' }}">
                                                        <i class="fas fa-eye me-1"></i>View
                                                    </span>
                                                    <span class="badge bg-{{ $usersPermissions['edit'] ? 'warning' : 'secondary' }}">
                                                        <i class="fas fa-edit me-1"></i>Edit
                                                    </span>
                                                    <span class="badge bg-{{ $usersPermissions['delete'] ? 'danger' : 'secondary' }}">
                                                        <i class="fas fa-trash me-1"></i>Delete
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <button type="submit" class="btn btn-primary btn-block mb-2">
                                                <i class="fas fa-save mr-2"></i>Save Assignments
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary btn-block mb-2" onclick="selectAll()">
                                                <i class="fas fa-check-square mr-2"></i>Select All
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary btn-block" onclick="deselectAll()">
                                                <i class="fas fa-square mr-2"></i>Deselect All
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Dashboard Contain Assignment -->
                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h6 class="mb-0">
                                            <i class="fas fa-tachometer-alt me-2"></i>Dashboard Contain Assignment
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <p class="text-muted small mb-3">
                                            Select which content sections should be visible on the user's dashboard.
                                        </p>
                                        
                                        @php
                                            $dashboardContains = [];
                                            try {
                                                $dashboardContains = $user->dashboard_contains ?? [];
                                            } catch (\Exception $e) {
                                                $dashboardContains = [];
                                            }
                                        @endphp
                                        
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="dashboard_contains[]" value="client_stats" id="client_stats" {{ in_array('client_stats', $dashboardContains) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="client_stats">
                                                <i class="fas fa-users me-2"></i>Client Statistics
                                            </label>
                                        </div>
                                        
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="dashboard_contains[]" value="revenue_stats" id="revenue_stats" {{ in_array('revenue_stats', $dashboardContains) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="revenue_stats">
                                                <i class="fas fa-chart-line me-2"></i>Revenue Statistics
                                            </label>
                                        </div>
                                        
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="dashboard_contains[]" value="network_stats" id="network_stats" {{ in_array('network_stats', $dashboardContains) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="network_stats">
                                                <i class="fas fa-network-wired me-2"></i>Network Statistics
                                            </label>
                                        </div>
                                        
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="dashboard_contains[]" value="recent_activities" id="recent_activities" {{ in_array('recent_activities', $dashboardContains) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="recent_activities">
                                                <i class="fas fa-history me-2"></i>Recent Activities
                                            </label>
                                        </div>
                                        
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="dashboard_contains[]" value="system_alerts" id="system_alerts" {{ in_array('system_alerts', $dashboardContains) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="system_alerts">
                                                <i class="fas fa-exclamation-triangle me-2"></i>System Alerts
                                            </label>
                                        </div>
                                        
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="dashboard_contains[]" value="quick_actions" id="quick_actions" {{ in_array('quick_actions', $dashboardContains) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="quick_actions">
                                                <i class="fas fa-bolt me-2"></i>Quick Actions
                                            </label>
                                        </div>
                                        
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="dashboard_contains[]" value="pending_tasks" id="pending_tasks" {{ in_array('pending_tasks', $dashboardContains) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="pending_tasks">
                                                <i class="fas fa-tasks me-2"></i>Pending Tasks
                                            </label>
                                        </div>
                                        
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="dashboard_contains[]" value="mikrotik_status" id="mikrotik_status" {{ in_array('mikrotik_status', $dashboardContains) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mikrotik_status">
                                                <i class="fas fa-server me-2"></i>Mikrotik Server Status
                                            </label>
                                        </div>
                                        
                                        <hr>
                                        
                                        <div>
                                            <button type="button" class="btn btn-outline-success btn-sm btn-block mb-2" onclick="selectAllDashboard()">
                                                <i class="fas fa-check-square mr-2"></i>Select All Dashboard
                                            </button>
                                            <button type="button" class="btn btn-outline-warning btn-sm btn-block" onclick="deselectAllDashboard()">
                                                <i class="fas fa-square mr-2"></i>Deselect All Dashboard
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Routes Modal -->
<div class="modal fade" id="routesModal" tabindex="-1" role="dialog" aria-labelledby="routesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="routesModalLabel">
                    <i class="fas fa-route mr-2"></i>Routes for <span id="modalMenuName"></span>
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="routesLoading" class="text-center py-4">
                    <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                    <p class="mt-2">Loading routes...</p>
                </div>
                <div id="routesContent" style="display: none;">
                    <div class="mb-3">
                        <small class="text-muted">
                            <i class="fas fa-info-circle mr-1"></i>
                            Base Route: <strong id="modalMenuRoute"></strong>
                        </small>
                    </div>
                    <div class="mb-3 d-flex justify-content-between align-items-center">
                        <div>
                            <button type="button" class="btn btn-outline-success btn-sm" onclick="selectAllRoutes()">
                                <i class="fas fa-check-square mr-1"></i>Select All Routes
                            </button>
                            <button type="button" class="btn btn-outline-warning btn-sm ml-2" onclick="deselectAllRoutes()">
                                <i class="fas fa-square mr-1"></i>Deselect All Routes
                            </button>
                        </div>
                        <small class="text-muted">
                            <span id="selectedRoutesCount">0</span> of <span id="totalRoutesCount">0</span> routes selected
                        </small>
                    </div>
                    <div id="routesList" class="row">
                        <!-- Routes will be loaded here -->
                    </div>
                    <div id="noRoutes" class="alert alert-info" style="display: none;">
                        <i class="fas fa-info-circle mr-2"></i>
                        No routes found for this menu.
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveRoutesBtn" onclick="saveRoutes()">
                    <i class="fas fa-save mr-2"></i>Save Routes
                </button>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts')
<style>
    /* Accordion chevron rotation */
    .card-header a[aria-expanded="true"] .fa-chevron-down {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
    .card-header a .fa-chevron-down {
        transition: transform 0.3s ease;
    }
    /* Prevent text selection on accordion header */
    .card-header {
        user-select: none;
    }
    /* Checkbox alignment fixes */
    .parent-menu-checkbox {
        position: relative;
        top: 0;
    }
    .child-menu-checkbox {
        position: relative;
        top: 0.25rem;
    }
    .form-check {
        display: flex;
        align-items: flex-start;
    }
    .form-check-input {
        margin-top: 0.25rem;
    }
    .form-check-label {
        line-height: 1.5;
    }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle accordion collapse events to update chevron icon
    $('#menusAccordion').on('show.bs.collapse', function (e) {
        $(e.target).closest('.card').find('.fa-chevron-down').css('transform', 'rotate(180deg)');
    });
    
    $('#menusAccordion').on('hide.bs.collapse', function (e) {
        $(e.target).closest('.card').find('.fa-chevron-down').css('transform', 'rotate(0deg)');
    });
    
    // Handle parent menu checkbox changes
    document.querySelectorAll('.parent-menu-checkbox').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const parentId = this.value;
            const childCheckboxes = document.querySelectorAll(`input[data-parent="${parentId}"]`);
            
            // Clear indeterminate state
            this.indeterminate = false;
            
            const isChecked = this.checked;
            const userId = {{ $user->id }};
            
            childCheckboxes.forEach(function(childCheckbox) {
                const childMenuId = childCheckbox.value;
                childCheckbox.checked = isChecked;
                
                // Sync route checkboxes with submenu checkbox if modal is open for this child menu
                const routesModal = $('#routesModal');
                const isModalVisible = routesModal.is(':visible') || routesModal.hasClass('show') || routesModal.hasClass('in');
                if (isModalVisible && currentMenuId && String(currentMenuId) === String(childMenuId)) {
                    syncRoutesWithSubmenuCheckbox();
                    updateRoutesCount();
                }
                
                // If parent is checked, automatically assign all routes for child menus
                if (isChecked) {
                    const routeBtn = document.querySelector(`button[data-menu-id="${childMenuId}"].route-btn`);
                    
                    // If child menu has routes button, automatically assign all routes
                    if (routeBtn) {
                        autoAssignAllRoutes(childMenuId, userId);
                    }
                }
            }.bind(this));
            
            // Update sub menu count for this parent
            updateSubMenuCount(parentId);
            
            updateAssignedCount();
        });
    });
    
    // Handle child menu checkbox changes - Use event delegation for dynamically loaded content
    $(document).on('change', '.child-menu-checkbox', function() {
        const menuId = $(this).attr('id').replace('menu_', '');
        const parentId = $(this).attr('data-parent');
        const parentCheckbox = document.getElementById(`menu_${parentId}`);
        const childCheckboxes = document.querySelectorAll(`input[data-parent="${parentId}"]`);
        const checkedChildren = document.querySelectorAll(`input[data-parent="${parentId}"]:checked`);
        
        // Clear indeterminate state
        if (parentCheckbox) {
            parentCheckbox.indeterminate = false;
            
            // Update parent checkbox based on child states
            if (checkedChildren.length === childCheckboxes.length) {
                // All children are checked - check parent
                parentCheckbox.checked = true;
            } else if (checkedChildren.length === 0) {
                // No children are checked - uncheck parent
                parentCheckbox.checked = false;
            }
        }
        // If some children are checked but not all, don't change parent state
        // This allows users to manually control parent menu independently
        
        // Update sub menu count for this parent
        if (parentId) {
            updateSubMenuCount(parentId);
        }
        
        updateAssignedCount();
        
        // Sync route checkboxes with submenu checkbox if modal is open for this menu
        // Use global flag and multiple checks
        const routesModal = $('#routesModal');
        const modalElement = document.getElementById('routesModal');
        const checkboxValue = $(this).attr('value');
        
        // Multiple checks for modal visibility
        const isModalVisible = isRoutesModalOpen || (
            (routesModal.length > 0 && routesModal.is(':visible')) ||
            (modalElement && modalElement.classList.contains('show')) ||
            (modalElement && window.getComputedStyle(modalElement).display === 'block') ||
            document.body.classList.contains('modal-open')
        );
        
        // Check if this is the menu that has the modal open - try multiple ID formats
        const menuIdMatch = currentMenuId && (
            String(currentMenuId) === String(menuId) ||
            String(currentMenuId) === String(checkboxValue) ||
            String(currentMenuId) === String($(this).attr('id').replace('menu_', ''))
        );
        
        // Debug logging
        console.log('🔔 Child menu checkbox changed:', {
            menuId: menuId,
            checkboxId: $(this).attr('id'),
            checkboxValue: checkboxValue,
            currentMenuId: currentMenuId,
            isRoutesModalOpen: isRoutesModalOpen,
            isModalVisible: isModalVisible,
            modalElement: modalElement ? 'found' : 'not found',
            modalHasShow: modalElement ? modalElement.classList.contains('show') : false,
            bodyHasModalOpen: document.body.classList.contains('modal-open'),
            menuIdMatch: menuIdMatch
        });
        
        // Sync if modal is visible and menu IDs match
        if (isModalVisible && menuIdMatch) {
            console.log('✅ Conditions met - Syncing route checkboxes with submenu checkbox');
            
            // Get current checkbox state
            const isSubmenuChecked = $(this).is(':checked');
            
            // Force sync immediately - uncheck all routes if submenu is unchecked
            if (!isSubmenuChecked) {
                console.log('⚠️ Submenu unchecked - unchecking all routes in modal');
                $('.route-checkbox').prop('checked', false);
                updateRoutesCount();
            } else {
                // If submenu is checked, sync with saved state by reloading
                syncRoutesWithSubmenuCheckbox();
                updateRoutesCount();
            }
            
            // Also reload routes to ensure consistency if submenu is checked
            // But first check if routes are already loaded
            if ($('.route-checkbox').length > 0) {
                // Routes are already loaded, sync is done above
                console.log('Routes already loaded, synced with submenu state');
            } else {
                // Routes not loaded yet, reload them
                console.log('Routes not loaded, reloading...');
                if (currentUserId && currentMenuId) {
                    loadMenuRoutes(currentUserId, currentMenuId);
                }
            }
        } else {
            console.log('❌ Conditions not met - Not syncing:', {
                isModalVisible: isModalVisible,
                menuIdMatch: menuIdMatch,
                isRoutesModalOpen: isRoutesModalOpen,
                currentMenuId: currentMenuId,
                menuId: menuId,
                checkboxValue: checkboxValue
            });
        }
    });
    
    // Handle parent menu checkbox changes
    // Don't auto-sync routes when parent menu checkbox changes while modal is open
    // User should be able to manually uncheck routes and save them
    
    // Initialize chevron icons for already expanded items
    $('.collapse.show').each(function() {
        $(this).closest('.card').find('.fa-chevron-down').css('transform', 'rotate(180deg)');
    });
    
    // Initialize sub menu counts on page load
    initializeSubMenuCounts();
    
    // Sync routes when modal is shown (only on first open)
    // This is handled in loadMenuRoutes function with isModalFirstOpen flag
    
    // Listen for modal show event to ensure checkbox sync works
    $('#routesModal').on('shown.bs.modal', function() {
        console.log('Routes modal shown, currentMenuId:', currentMenuId);
    });
});

// Routes Modal Functions
let currentMenuId = null;
let currentUserId = null;
let isModalFirstOpen = true; // Track if modal is opened for the first time
let isRoutesModalOpen = false; // Track if routes modal is currently open

function openRoutesModal(button) {
    currentMenuId = $(button).data('menu-id');
    currentUserId = $(button).data('user-id');
    const menuName = $(button).data('menu-name');
    const menuRoute = $(button).data('menu-route');
    
    console.log('Opening routes modal for menu:', currentMenuId, 'Name:', menuName);
    
    $('#modalMenuName').text(menuName);
    $('#modalMenuRoute').text(menuRoute);
    $('#routesModal').modal('show');
    
    // Set flag that modal is open
    isRoutesModalOpen = true;
    
    // Don't reset flag - keep it false so actual saved state is shown
    // Only sync on first open if submenu is checked and no routes are assigned
    isModalFirstOpen = false;
    
    // Load routes - will show actual saved state
    loadMenuRoutes(currentUserId, currentMenuId);
}

// Listen for modal close event
$(document).ready(function() {
    $('#routesModal').on('hidden.bs.modal', function() {
        console.log('Routes modal closed');
        isRoutesModalOpen = false;
        currentMenuId = null;
        currentUserId = null;
    });
    
    $('#routesModal').on('shown.bs.modal', function() {
        console.log('Routes modal shown, currentMenuId:', currentMenuId);
        isRoutesModalOpen = true;
    });
});

function loadMenuRoutes(userId, menuId) {
    $('#routesLoading').show();
    $('#routesContent').hide();
    $('#routesList').empty();
    
    $.ajax({
        url: `/users/${userId}/menus/${menuId}/routes`,
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            $('#routesLoading').hide();
            
            if (response.routes && response.routes.length > 0) {
                $('#routesContent').show();
                $('#noRoutes').hide();
                
                // Get submenu checkbox state to determine if we should sync
                let submenuCheckbox = $(`#menu_${currentMenuId}`);
                if (submenuCheckbox.length === 0) {
                    submenuCheckbox = $(`.child-menu-checkbox[value="${currentMenuId}"]`);
                }
                const isSubmenuChecked = submenuCheckbox.length > 0 ? submenuCheckbox.is(':checked') : false;
                
                // Check if this is a reload after submenu checkbox change
                // If submenu is unchecked, force all routes to unchecked
                // If submenu is checked, use saved state (is_assigned)
                const isForceSync = !isSubmenuChecked; // Force sync if submenu is unchecked
                
                console.log('Loading routes:', {
                    currentMenuId: currentMenuId,
                    isSubmenuChecked: isSubmenuChecked,
                    isForceSync: isForceSync,
                    checkboxFound: submenuCheckbox.length > 0
                });
                
                response.routes.forEach(function(route) {
                    // If submenu is unchecked, force all routes to unchecked
                    // If submenu is checked, use is_assigned from server (actual saved state)
                    const shouldBeChecked = isSubmenuChecked && (route.is_assigned === true);
                    
                    const routeHtml = `
                        <div class="col-md-6 mb-2">
                            <div class="form-check">
                                <input class="form-check-input route-checkbox" 
                                       type="checkbox" 
                                       value="${route.id}"
                                       id="route_${route.id}"
                                       ${shouldBeChecked ? 'checked' : ''}>
                                <label class="form-check-label" for="route_${route.id}">
                                    <strong>${route.description}</strong>
                                    <br>
                                    <small class="text-muted ml-3" style="font-size: 0.75rem;">
                                        <i class="fas fa-route mr-1"></i>${route.permission_key}
                                    </small>
                                </label>
                            </div>
                        </div>
                    `;
                    $('#routesList').append(routeHtml);
                });
                
                // Update routes count
                updateRoutesCount();
                
                // Use event delegation for route checkboxes to handle dynamically loaded content
                // Remove previous listeners and add new ones
                $(document).off('change', '.route-checkbox').on('change', '.route-checkbox', function() {
                    updateRoutesCount();
                });
                
                // DO NOT sync routes with submenu checkbox after loading
                // Show actual saved state - user can manually change routes and save
                // Sync only happens when submenu checkbox changes (real-time), not on load
            } else {
                $('#routesContent').show();
                $('#noRoutes').show();
            }
        },
        error: function(xhr) {
            $('#routesLoading').hide();
            $('#routesContent').show();
            $('#noRoutes').show();
            $('#noRoutes').html('<i class="fas fa-exclamation-triangle mr-2"></i>Error loading routes. Please try again.');
            console.error('Error loading routes:', xhr);
        }
    });
}

// Sync route checkboxes with submenu checkbox state
function syncRoutesWithSubmenuCheckbox() {
    if (!currentMenuId) {
        console.log('❌ syncRoutesWithSubmenuCheckbox: currentMenuId is not set');
        return;
    }
    
    // Try multiple selector formats
    let submenuCheckbox = $(`#menu_${currentMenuId}`);
    if (submenuCheckbox.length === 0) {
        // Try with value attribute
        submenuCheckbox = $(`.child-menu-checkbox[value="${currentMenuId}"]`);
    }
    if (submenuCheckbox.length === 0) {
        console.log('❌ syncRoutesWithSubmenuCheckbox: Submenu checkbox not found for ID:', `menu_${currentMenuId}`);
        console.log('Available checkboxes:', $('.child-menu-checkbox').map(function() { 
            return {
                id: $(this).attr('id'),
                value: $(this).attr('value'),
                checked: $(this).is(':checked')
            };
        }).get());
        return;
    }
    
    // Get checkbox state - try multiple methods
    const isSubmenuChecked = submenuCheckbox.is(':checked') || submenuCheckbox.prop('checked') || submenuCheckbox[0].checked;
    const routeCheckboxes = $('.route-checkbox');
    
    console.log('🔄 syncRoutesWithSubmenuCheckbox:', {
        currentMenuId: currentMenuId,
        checkboxId: submenuCheckbox.attr('id'),
        checkboxValue: submenuCheckbox.attr('value'),
        isSubmenuChecked: isSubmenuChecked,
        checkboxElement: submenuCheckbox[0] ? 'found' : 'not found',
        routeCheckboxesCount: routeCheckboxes.length
    });
    
    // Update all route checkboxes based on submenu checkbox state
    if (routeCheckboxes.length > 0) {
        let updatedCount = 0;
        routeCheckboxes.each(function() {
            const $checkbox = $(this);
            const wasChecked = $checkbox.is(':checked');
            $checkbox.prop('checked', isSubmenuChecked);
            const nowChecked = $checkbox.is(':checked');
            
            if (wasChecked !== nowChecked) {
                updatedCount++;
            }
        });
        console.log('✅ syncRoutesWithSubmenuCheckbox: Updated', updatedCount, 'of', routeCheckboxes.length, 'route checkboxes to', isSubmenuChecked);
        
        // Verify the update
        const checkedCount = $('.route-checkbox:checked').length;
        console.log('✅ Verification: After update,', checkedCount, 'of', routeCheckboxes.length, 'route checkboxes are checked');
    } else {
        console.log('⚠️ syncRoutesWithSubmenuCheckbox: No route checkboxes found in modal');
    }
}

// Automatically assign all routes for a child menu when parent menu is checked
function autoAssignAllRoutes(menuId, userId) {
    // Fetch available routes for this menu
    $.ajax({
        url: `/users/${userId}/menus/${menuId}/routes`,
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.routes && response.routes.length > 0) {
                // Get all permission IDs from available routes
                const allPermissionIds = response.routes.map(function(route) {
                    return route.id;
                });
                
                // Automatically assign all routes
                $.ajax({
                    url: `/users/${userId}/menus/${menuId}/routes`,
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        permission_ids: allPermissionIds
                    },
                    success: function(saveResponse) {
                        // Update route count for this menu
                        const routeCount = allPermissionIds.length;
                        const menuCheckbox = document.getElementById(`menu_${menuId}`);
                        if (menuCheckbox) {
                            menuCheckbox.setAttribute('data-route-count', routeCount);
                            
                            // Update parent menu's route count
                            const parentId = menuCheckbox.getAttribute('data-parent');
                            if (parentId) {
                                updateSubMenuCount(parentId);
                            }
                        }
                        
                        // Update assigned routes count
                        if (saveResponse.assigned_routes_count !== undefined) {
                            updateAssignedRoutesCount(userId);
                        }
                    },
                    error: function(xhr) {
                        console.error('Error auto-assigning routes for menu ' + menuId + ':', xhr);
                    }
                });
            }
        },
        error: function(xhr) {
            console.error('Error loading routes for menu ' + menuId + ':', xhr);
        }
    });
}

function saveRoutes() {
    // First, check if submenu is unchecked - if so, uncheck all routes and save empty array
    if (currentMenuId) {
        let submenuCheckbox = $(`#menu_${currentMenuId}`);
        if (submenuCheckbox.length === 0) {
            submenuCheckbox = $(`.child-menu-checkbox[value="${currentMenuId}"]`);
        }
        
        const isSubmenuChecked = submenuCheckbox.length > 0 ? submenuCheckbox.is(':checked') : false;
        
        // If submenu is unchecked, force all routes to be unchecked
        if (!isSubmenuChecked) {
            console.log('⚠️ Submenu is unchecked - unchecking all routes before saving');
            $('.route-checkbox').prop('checked', false);
            updateRoutesCount();
        }
    }
    
    const selectedRoutes = [];
    $('.route-checkbox:checked').each(function() {
        selectedRoutes.push($(this).val());
    });
    
    // Allow saving with 0 routes (all unchecked) - user can uncheck all routes
    // No need to show error if no routes are selected
    
    $('#saveRoutesBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>Saving...');
    
    $.ajax({
        url: `/users/${currentUserId}/menus/${currentMenuId}/routes`,
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            permission_ids: selectedRoutes
        },
        success: function(response) {
            $('#saveRoutesBtn').prop('disabled', false).html('<i class="fas fa-save mr-2"></i>Save Routes');
            
            // Show success message
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: response.message || 'Routes assigned successfully',
                    timer: 1500,
                    showConfirmButton: false
                });
            } else {
                alert(response.message || 'Routes assigned successfully');
            }
            
            // Update assigned routes count from response or fetch from server
            if (response.assigned_routes_count !== undefined) {
                $('#assigned-routes-count').text(response.assigned_routes_count + ' Routes');
            } else {
                updateAssignedRoutesCount(currentUserId);
            }
            
            // Update route count for this menu's checkbox and parent menu's route count
            updateMenuRouteCount(currentMenuId, currentUserId);
            
            // Reload routes in modal to show updated state
            // Don't sync with submenu checkbox after reload - let the actual saved state show
            // Set flag to false so sync doesn't happen after reload
            isModalFirstOpen = false;
            setTimeout(function() {
                loadMenuRoutes(currentUserId, currentMenuId);
                
                // After routes are loaded, DO NOT update submenu checkbox state
                // Submenu checkbox should remain independent - user can manually control it
                // Routes save should not affect submenu checkbox state
                // Only sync happens when submenu checkbox changes, not the other way around
                console.log('Routes saved - Submenu checkbox state will remain unchanged');
            }, 100);
        },
        error: function(xhr) {
            $('#saveRoutesBtn').prop('disabled', false).html('<i class="fas fa-save mr-2"></i>Save Routes');
            
            let errorMessage = 'Error saving routes. Please try again.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: errorMessage
                });
            } else {
                alert(errorMessage);
            }
            console.error('Error saving routes:', xhr);
        }
    });
}

function selectAll() {
    document.querySelectorAll('input[name="menu_ids[]"]').forEach(function(checkbox) {
        checkbox.checked = true;
    });
    updateAssignedCount();
}

function deselectAll() {
    document.querySelectorAll('input[name="menu_ids[]"]').forEach(function(checkbox) {
        checkbox.checked = false;
    });
    updateAssignedCount();
}

function updateAssignedCount() {
    const checkedBoxes = document.querySelectorAll('input[name="menu_ids[]"]:checked');
    document.getElementById('assigned-count').textContent = checkedBoxes.length;
}

// Update sub menu count for a specific parent menu
function updateSubMenuCount(parentId) {
    const childCheckboxes = document.querySelectorAll(`input[data-parent="${parentId}"]`);
    const checkedChildren = document.querySelectorAll(`input[data-parent="${parentId}"]:checked`);
    const checkedCountElement = document.querySelector(`.checked-count-${parentId}`);
    const routeCountElement = document.querySelector(`.route-count-${parentId}`);
    
    // Update checked count
    if (checkedCountElement) {
        checkedCountElement.textContent = checkedChildren.length;
    }
    
    // Calculate and update route count for checked children
    if (routeCountElement) {
        let totalRouteCount = 0;
        checkedChildren.forEach(function(checkbox) {
            const routeCount = parseInt(checkbox.getAttribute('data-route-count')) || 0;
            totalRouteCount += routeCount;
        });
        routeCountElement.textContent = totalRouteCount;
    }
}

// Initialize sub menu counts on page load
function initializeSubMenuCounts() {
    // Get all parent menus
    document.querySelectorAll('.parent-menu-checkbox').forEach(function(parentCheckbox) {
        const parentId = parentCheckbox.value;
        updateSubMenuCount(parentId);
    });
}

// Update route count for a specific menu after routes are saved
function updateMenuRouteCount(menuId, userId) {
    // Fetch updated route count from server
    $.ajax({
        url: `/users/${userId}/menus/${menuId}/routes`,
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.routes) {
                // Count assigned routes
                const assignedRoutesCount = response.routes.filter(route => route.is_assigned).length;
                
                // Update data-route-count attribute for this menu's checkbox
                const menuCheckbox = document.getElementById(`menu_${menuId}`);
                if (menuCheckbox) {
                    menuCheckbox.setAttribute('data-route-count', assignedRoutesCount);
                    
                    // Update parent menu's route count display
                    const parentId = menuCheckbox.getAttribute('data-parent');
                    if (parentId) {
                        updateSubMenuCount(parentId);
                    }
                }
            }
        },
        error: function(xhr) {
            console.error('Error fetching route count:', xhr);
        }
    });
}

function selectAllDashboard() {
    document.querySelectorAll('input[name="dashboard_contains[]"]').forEach(function(checkbox) {
        checkbox.checked = true;
    });
}

function deselectAllDashboard() {
    document.querySelectorAll('input[name="dashboard_contains[]"]').forEach(function(checkbox) {
        checkbox.checked = false;
    });
}

function togglePermissionsAccordion() {
    const cardBody = document.getElementById('permissionsCardBody');
    const chevron = document.getElementById('permissionsChevron');
    
    if (cardBody.style.display === 'none') {
        // Show accordion
        cardBody.style.display = '';
        chevron.classList.remove('fa-chevron-up');
        chevron.classList.add('fa-chevron-down');
    } else {
        // Hide accordion
        cardBody.style.display = 'none';
        chevron.classList.remove('fa-chevron-down');
        chevron.classList.add('fa-chevron-up');
    }
}

function filterPermissions(searchTerm) {
    const searchLower = searchTerm.toLowerCase().trim();
    const permissionCards = document.querySelectorAll('#permissionsAccordion .card');
    let hasVisiblePermissions = false;
    
    // If search is empty, show all permissions and reset to default state
    if (searchLower === '') {
        permissionCards.forEach((card, index) => {
            card.style.display = '';
            // Show all permission items
            const permissionItems = card.querySelectorAll('.col-md-6, .col-lg-4');
            permissionItems.forEach(item => {
                item.style.display = '';
            });
            
            const collapse = card.querySelector('.collapse');
            const isFirst = index === 0;
            if (collapse) {
                if (isFirst) {
                    collapse.classList.add('show');
                } else {
                    collapse.classList.remove('show');
                }
            }
        });
        return;
    }
    
    // Auto-open accordion when searching
    const cardBody = document.getElementById('permissionsCardBody');
    if (cardBody && cardBody.style.display === 'none') {
        cardBody.style.display = '';
        const chevron = document.getElementById('permissionsChevron');
        if (chevron) {
            chevron.classList.remove('fa-chevron-up');
            chevron.classList.add('fa-chevron-down');
        }
    }
    
    // Filter permissions
    permissionCards.forEach((card) => {
        const moduleHeader = card.querySelector('.card-header');
        const moduleName = moduleHeader ? moduleHeader.textContent.toLowerCase() : '';
        const permissionCheckboxes = card.querySelectorAll('.permission-checkbox');
        let moduleHasMatch = false;
        let visibleCount = 0;
        
        permissionCheckboxes.forEach((checkbox) => {
            const formCheck = checkbox.closest('.form-check');
            if (!formCheck) return;
            
            const label = formCheck.querySelector('label');
            if (!label) return;
            
            // Get full text from label (description + permission key)
            const fullText = label.innerText || label.textContent || '';
            const permissionText = fullText.toLowerCase();
            
            // Check if permission matches search term (description or key)
            if (permissionText.includes(searchLower)) {
                // Show this permission
                const parentCol = formCheck.closest('.col-md-6, .col-lg-4');
                if (parentCol) {
                    parentCol.style.display = '';
                }
                formCheck.style.display = '';
                moduleHasMatch = true;
            } else {
                // Hide this permission
                const parentCol = formCheck.closest('.col-md-6, .col-lg-4');
                if (parentCol) {
                    parentCol.style.display = 'none';
                }
                formCheck.style.display = 'none';
            }
        });
        
        // Show/hide module card based on matches
        if (moduleHasMatch || moduleName.includes(searchLower)) {
            card.style.display = '';
            // Auto-expand modules that have matches
            const collapse = card.querySelector('.collapse');
            if (collapse && moduleHasMatch) {
                collapse.classList.add('show');
            }
            hasVisiblePermissions = true;
        } else {
            card.style.display = 'none';
        }
    });
    
    // If no matches found, show a message
    if (!hasVisiblePermissions && searchLower !== '') {
        // You can add a "No results" message here if needed
    }
}

function filterMenus(searchTerm) {
    const searchLower = searchTerm.toLowerCase().trim();
    const menuCards = document.querySelectorAll('#menusAccordion .card');
    
    // If search is empty, show all menus
    if (searchLower === '') {
        menuCards.forEach((card, index) => {
            card.style.display = '';
            // Show all child menus
            const childMenus = card.querySelectorAll('.col-md-6');
            childMenus.forEach(item => {
                item.style.display = '';
            });
            
            const collapse = card.querySelector('.collapse');
            const isFirst = index === 0;
            if (collapse) {
                if (isFirst) {
                    collapse.classList.add('show');
                } else {
                    collapse.classList.remove('show');
                }
            }
        });
        return;
    }
    
    // Filter menus and routes
    menuCards.forEach((card) => {
        const menuHeader = card.querySelector('.card-header');
        const menuName = menuHeader ? menuHeader.textContent.toLowerCase() : '';
        const menuRoute = menuHeader ? 
            (menuHeader.querySelector('small') ? menuHeader.querySelector('small').textContent.toLowerCase() : '') : '';
        
        // Check parent menu name and route
        const parentMatches = menuName.includes(searchLower) || menuRoute.includes(searchLower);
        
        // Check child menus
        const childMenuItems = card.querySelectorAll('.child-menu-checkbox');
        let hasMatchingChild = false;
        
        childMenuItems.forEach((checkbox) => {
            const formCheck = checkbox.closest('.form-check');
            if (!formCheck) return;
            
            const label = formCheck.querySelector('label');
            if (!label) return;
            
            const childName = label.querySelector('strong') ? 
                label.querySelector('strong').textContent.toLowerCase() : '';
            const childRoute = label.querySelector('small') ? 
                label.querySelector('small').textContent.toLowerCase() : '';
            const fullText = label.textContent.toLowerCase();
            
            // Check if child menu matches search term
            if (childName.includes(searchLower) || 
                childRoute.includes(searchLower) || 
                fullText.includes(searchLower)) {
                // Show this child menu
                const parentCol = formCheck.closest('.col-md-6');
                if (parentCol) {
                    parentCol.style.display = '';
                }
                hasMatchingChild = true;
            } else {
                // Hide this child menu
                const parentCol = formCheck.closest('.col-md-6');
                if (parentCol) {
                    parentCol.style.display = 'none';
                }
            }
        });
        
        // Show/hide parent menu card based on matches
        if (parentMatches || hasMatchingChild) {
            card.style.display = '';
            // Auto-expand menus that have matches
            const collapse = card.querySelector('.collapse');
            if (collapse && (hasMatchingChild || parentMatches)) {
                collapse.classList.add('show');
            }
        } else {
            card.style.display = 'none';
        }
    });
}

function selectAllPermissions() {
    document.querySelectorAll('input[name="permission_ids[]"]').forEach(function(checkbox) {
        checkbox.checked = true;
    });
}

function deselectAllPermissions() {
    document.querySelectorAll('input[name="permission_ids[]"]').forEach(function(checkbox) {
        checkbox.checked = false;
    });
}

// Routes Modal - Select All / Deselect All Functions
function selectAllRoutes() {
    $('.route-checkbox').each(function() {
        $(this).prop('checked', true);
    });
    updateRoutesCount();
}

function deselectAllRoutes() {
    $('.route-checkbox').each(function() {
        $(this).prop('checked', false);
    });
    updateRoutesCount();
}

function updateRoutesCount() {
    const totalRoutes = $('.route-checkbox').length;
    const selectedRoutes = $('.route-checkbox:checked').length;
    
    $('#totalRoutesCount').text(totalRoutes);
    $('#selectedRoutesCount').text(selectedRoutes);
}

// Update assigned routes count from server
function updateAssignedRoutesCount(userId) {
    $.ajax({
        url: `/users/${userId}/menus/routes/count`,
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.count !== undefined) {
                $('#assigned-routes-count').text(response.count + ' Routes');
            }
        },
        error: function(xhr) {
            console.error('Error fetching assigned routes count:', xhr);
        }
    });
}
</script>
@endsection