@extends('layouts.admin')

@section('title', 'Edit Role')

@section('content')
<div class="role-form-container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">Edit Role</h1>
        <a href="{{ route('admin.roles.index') }}" class="btn btn-link text-decoration-none p-0" style="font-size: 1.5rem; line-height: 1;">
            <i class="bi bi-x-lg"></i>
        </a>
    </div>

    @if($role->users_count > 0)
        <div class="alert alert-info">
            <i class="bi bi-info-circle me-2"></i>
            This role is assigned to <strong>{{ $role->users_count }}</strong> user(s). Changes will affect all users with this role.
        </div>
    @endif

    <div class="card shadow-sm">
        <div class="card-body p-4">
            <form action="{{ route('admin.roles.update', $role) }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="display_name" class="form-label">Display Name <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control @error('display_name') is-invalid @enderror @error('name') is-invalid @enderror" 
                               id="display_name" 
                               name="display_name" 
                               value="{{ old('display_name', $role->name) }}" 
                               required
                               placeholder="Please Enter Display Name">
                        @error('display_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="name" class="form-label">Role Name <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control @error('name') is-invalid @enderror" 
                               id="name" 
                               name="name" 
                               value="{{ old('name', $role->name) }}" 
                               required
                               placeholder="Please Enter Role Name">
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="mb-4">
                    <label for="description" class="form-label">Description</label>
                    <textarea class="form-control" 
                              id="description" 
                              name="description" 
                              rows="3" 
                              placeholder="Please Enter Description">{{ old('description') }}</textarea>
                </div>

                <hr class="my-4">

                <h5 class="mb-3">POS Discount Configuration</h5>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="max_discount_percentage" class="form-label">Max Discount Percentage</label>
                        <input type="number" 
                               class="form-control @error('max_discount_percentage') is-invalid @enderror" 
                               id="max_discount_percentage" 
                               name="max_discount_percentage" 
                               value="{{ old('max_discount_percentage', $role->max_discount_percentage) }}" 
                               min="0" 
                               max="100" 
                               step="0.01"
                               placeholder="e.g., 90.00">
                        <small class="form-text text-muted">Maximum discount percentage allowed for this role (0-100). Leave empty for no limit.</small>
                        @error('max_discount_percentage')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">OTP Required for Discount</label>
                        <div class="form-check mt-2">
                            <input class="form-check-input" 
                                   type="checkbox" 
                                   id="otp_required_for_discount" 
                                   name="otp_required_for_discount" 
                                   value="1"
                                   {{ old('otp_required_for_discount', $role->otp_required_for_discount) ? 'checked' : '' }}>
                            <label class="form-check-label" for="otp_required_for_discount">
                                Require OTP validation when applying discounts
                            </label>
                        </div>
                        <small class="form-text text-muted">If enabled, users with this role must verify OTP before applying any discount.</small>
                    </div>
                </div>

                <hr class="my-4">

                <h5 class="mb-3">Permissions</h5>

                <div class="permissions-list-container">
                    @foreach($permissionMatrix as $module => $label)
                        <div class="permission-row">
                            <div class="permission-module">
                                <strong>{{ $label }}</strong>
                            </div>
                            <div class="permission-checkboxes">
                                @if($module === 'dashboard')
                                    {{-- Dashboard has special permissions: View KPIs and View Dashlets --}}
                                    <div class="form-check">
                                        <input class="form-check-input module-dashboard" 
                                               type="checkbox" 
                                               name="permissions[]" 
                                               value="dashboard.view-kpis"
                                               id="perm_dashboard_view_kpis"
                                               {{ in_array("dashboard.view-kpis", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="perm_dashboard_view_kpis">
                                            View KPIs
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input module-dashboard" 
                                               type="checkbox" 
                                               name="permissions[]" 
                                               value="dashboard.view-dashlets"
                                               id="perm_dashboard_view_dashlets"
                                               {{ in_array("dashboard.view-dashlets", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="perm_dashboard_view_dashlets">
                                            View Dashlets
                                        </label>
                                    </div>
                                @else
                                    {{-- Other modules use standard abilities --}}
                                    @foreach($abilities as $ability)
                                        @php
                                            $abilityLabel = $ability === 'create' ? 'Add' : ($ability === 'update' ? 'Edit' : ucfirst($ability));
                                        @endphp
                                        <div class="form-check">
                                            <input class="form-check-input module-{{ $loop->parent->index }}" 
                                                   type="checkbox" 
                                                   name="permissions[]" 
                                                   value="{{ $module }}.{{ $ability }}"
                                                   id="perm_{{ $module }}_{{ $ability }}"
                                                   {{ in_array("{$module}.{$ability}", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="perm_{{ $module }}_{{ $ability }}">
                                                {{ $abilityLabel }}
                                            </label>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    @endforeach
                    
                    <div class="permission-row">
                        <div class="permission-module">
                            <strong>Tickets</strong>
                        </div>
                        <div class="permission-checkboxes">
                            <div class="form-check">
                                <input class="form-check-input module-tickets" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="tickets.view"
                                       id="perm_tickets_view"
                                       {{ in_array("tickets.view", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_tickets_view">View</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-tickets" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="tickets.update"
                                       id="perm_tickets_update"
                                       {{ in_array("tickets.update", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_tickets_update">Update</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-tickets" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="tickets.assign"
                                       id="perm_tickets_assign"
                                       {{ in_array("tickets.assign", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_tickets_assign">Assign Tickets</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-tickets" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="tickets.reply"
                                       id="perm_tickets_reply"
                                       {{ in_array("tickets.reply", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_tickets_reply">Reply to Tickets</label>
                            </div>                            
                        </div>
                    </div>

                    <div class="permission-row">
                        <div class="permission-module">
                            <strong>Inventory</strong>
                        </div>
                        <div class="permission-checkboxes">
                            <div class="form-check">
                                <input class="form-check-input module-inventory" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="products.restock"
                                       id="perm_products_restock"
                                       {{ in_array("products.restock", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_products_restock">Restock Products</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-inventory" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="stock-audit.create"
                                       id="perm_stock_audit_create"
                                       {{ in_array("stock-audit.create", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_stock_audit_create">Create Stock Audits</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-inventory" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="stock-audit.view"
                                       id="perm_stock_audit_view"
                                       {{ in_array("stock-audit.view", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_stock_audit_view">View Stock Audits</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-inventory" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="stock-adjustments.manage"
                                       id="perm_stock_adjustments_manage"
                                       {{ in_array("stock-adjustments.manage", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_stock_adjustments_manage">Manage Stock Adjustments</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-inventory" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="stock-adjustments.view"
                                       id="perm_stock_adjustments_view"
                                       {{ in_array("stock-adjustments.view", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_stock_adjustments_view">View Stock Adjustments</label>
                            </div>
                        </div>
                    </div>

                    <!-- WhatsApp Permissions -->
                    <div class="permission-row">
                        <div class="permission-module">
                            <strong>Whats App</strong>
                        </div>
                        <div class="permission-checkboxes">
                            <div class="form-check">
                                <input class="form-check-input module-whatsapp" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="whatsapp.credits"
                                       id="perm_whatsapp_credits"
                                       {{ in_array("whatsapp.credits", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_whatsapp_credits">Credits</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-whatsapp" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="whatsapp.templates"
                                       id="perm_whatsapp_templates"
                                       {{ in_array("whatsapp.templates", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_whatsapp_templates">Templates</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-whatsapp" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="whatsapp.logs"
                                       id="perm_whatsapp_logs"
                                       {{ in_array("whatsapp.logs", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_whatsapp_logs">Logs</label>
                            </div>
                        </div>
                    </div>

                    <!-- Reports Permissions -->
                    <div class="permission-row">
                        <div class="permission-module">
                            <strong>Reports</strong>
                        </div>
                        <div class="permission-checkboxes">
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.sales"
                                       id="perm_reports_sales"
                                       {{ in_array("reports.sales", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_sales">Sales Report</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.salesman"
                                       id="perm_reports_salesman"
                                       {{ in_array("reports.salesman", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>   
                                <label class="form-check-label" for="perm_reports_salesman">Salesman Report</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.profit"
                                       id="perm_reports_profit"
                                       {{ in_array("reports.profit", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_profit">Profit Report</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.top-products"
                                       id="perm_reports_top_products"
                                       {{ in_array("reports.top-products", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_top_products">Top Products</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.payments"
                                       id="perm_reports_payments"
                                       {{ in_array("reports.payments", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_payments">Payment Summary</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.gst"
                                       id="perm_reports_gst"
                                       {{ in_array("reports.gst", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_gst">GST Reports</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.delivery"
                                       id="perm_reports_delivery"
                                       {{ in_array("reports.delivery", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_delivery">Delivery Reports</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.day-ledger.view"
                                       id="perm_reports_day_ledger_view"
                                       {{ in_array("reports.day-ledger.view", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_day_ledger_view">Day Ledger View</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.day-ledger.manage"
                                       id="perm_reports_day_ledger_manage"
                                       {{ in_array("reports.day-ledger.manage", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_day_ledger_manage">Day Ledger Manage</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.day-ledger.close"
                                       id="perm_reports_day_ledger_close"
                                       {{ in_array("reports.day-ledger.close", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_day_ledger_close">Day Ledger Close</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.day-ledger.reopen"
                                       id="perm_reports_day_ledger_reopen"
                                       {{ in_array("reports.day-ledger.reopen", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_day_ledger_reopen">Day Ledger Reopen</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.stock-audit"
                                       id="perm_reports_stock_audit"
                                       {{ in_array("reports.stock-audit", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_stock_audit">Stock Audit Report</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-reports" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="reports.stock-adjustments"
                                       id="perm_reports_stock_adjustments"
                                       {{ in_array("reports.stock-adjustments", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_reports_stock_adjustments">Stock Adjustments Report</label>
                            </div>
                        </div>
                    </div>

                    <!-- Settings Permissions -->
                    <div class="permission-row">
                        <div class="permission-module">
                            <strong>Settings</strong>
                        </div>
                        <div class="permission-checkboxes">
                            <div class="form-check">
                                <input class="form-check-input module-settings" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="settings.general"
                                       id="perm_settings_general"
                                       {{ in_array("settings.general", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_settings_general">General Settings</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-settings" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="settings.payment"
                                       id="perm_settings_payment"
                                       {{ in_array("settings.payment", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_settings_payment">Payment Settings</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-settings" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="settings.sms"
                                       id="perm_settings_sms"
                                       {{ in_array("settings.sms", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_settings_sms">SMS Configuration</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-settings" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="settings.ticket"
                                       id="perm_settings_ticket"
                                       {{ in_array("settings.ticket", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_settings_ticket">Ticket Settings</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-settings" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="settings.carriers"
                                       id="perm_settings_carriers"
                                       {{ in_array("settings.carriers", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_settings_carriers">Carriers</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-settings" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="settings.countries"
                                       id="perm_settings_countries"
                                       {{ in_array("settings.countries", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_settings_countries">Countries</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-settings" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="settings.states"
                                       id="perm_settings_states"
                                       {{ in_array("settings.states", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_settings_states">States</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-settings" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="settings.cities"
                                       id="perm_settings_cities"
                                       {{ in_array("settings.cities", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_settings_cities">Cities</label>
                            </div>
                        </div>
                    </div>

                    <!-- Others Permissions -->
                    <div class="permission-row">
                        <div class="permission-module">
                            <strong>Others</strong>
                        </div>
                        <div class="permission-checkboxes">
                            <div class="form-check">
                                <input class="form-check-input module-others" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="pos_access"
                                       id="perm_pos_access"
                                       {{ in_array("pos_access", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_pos_access">POS Access</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-others" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="manage reviews"
                                       id="perm_manage_review"
                                       {{ in_array("manage reviews", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_manage_review">Manage Review</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input module-others" 
                                       type="checkbox" 
                                       name="permissions[]" 
                                       value="manage shipping"
                                       id="perm_manage_shipping"
                                       {{ in_array("manage shipping", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="perm_manage_shipping">Manage Shipping</label>
                            </div>
                        </div>
                    </div>
                </div>

                @error('permissions')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
                @error('permissions.*')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror

                <hr class="my-4">

                <h5 class="mb-3">
                    <i class="bi bi-people"></i> Assign Users to Role
                </h5>
                <p class="text-muted mb-4">Select which users should have this role. Users with this role will inherit all permissions assigned above.</p>

                <div class="mb-3">
                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input" id="selectAllUsers" onchange="toggleAllUsers()">
                        <label class="form-check-label fw-bold" for="selectAllUsers">
                            Select All Users
                        </label>
                    </div>
                </div>

                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                    <table class="table table-sm table-hover">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th width="50">Select</th>
                                <th>Name</th>
                                <th>Mobile</th>
                                <th>Email</th>
                                <th>Current Roles</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($allUsers as $user)
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input type="checkbox" 
                                                   class="form-check-input user-checkbox" 
                                                   name="users[]" 
                                                   value="{{ $user->id }}"
                                                   id="user_{{ $user->id }}"
                                                   {{ in_array($user->id, old('users', $assignedUserIds)) ? 'checked' : '' }}>
                                        </div>
                                    </td>
                                    <td>{{ $user->name }}</td>
                                    <td>{{ $user->mobile }}</td>
                                    <td>{{ $user->email ?? '-' }}</td>
                                    <td>
                                        @foreach($user->roles as $userRole)
                                            <span class="badge bg-{{ $userRole->name === 'admin' ? 'danger' : ($userRole->name === 'staff' ? 'warning' : 'primary') }}">
                                                {{ ucfirst($userRole->name) }}
                                            </span>
                                        @endforeach
                                        @if($user->roles->isEmpty())
                                            <span class="badge bg-secondary">Customer</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @error('users')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror
                @error('users.*')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror

                <div class="d-flex justify-content-end gap-2 mt-4">
                    <a href="{{ route('admin.roles.index') }}" class="btn btn-light">
                        Cancel
                    </a>
                    <button type="submit" class="btn btn-warning text-white">
                        <i class="bi bi-check-circle"></i> Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function selectModuleRow(index) {
    const checkboxes = document.querySelectorAll(`.module-${index}`);
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    checkboxes.forEach(cb => cb.checked = !allChecked);
}

function selectAllModule() {
    const checkboxes = document.querySelectorAll('input[name="permissions[]"]');
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    checkboxes.forEach(cb => cb.checked = !allChecked);
}

function toggleAllUsers() {
    const selectAll = document.getElementById('selectAllUsers');
    const userCheckboxes = document.querySelectorAll('.user-checkbox');
    userCheckboxes.forEach(cb => cb.checked = selectAll.checked);
}

// Auto-generate role name from display name (optional)
document.getElementById('display_name')?.addEventListener('input', function(e) {
    const roleNameInput = document.getElementById('name');
    if (roleNameInput && !roleNameInput.value) {
        // Convert display name to role name (lowercase, replace spaces with underscores)
        roleNameInput.value = e.target.value.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
    }
});
</script>

@push('styles')
<style>
.role-form-container {
    max-width: 1200px;
    margin: 0 auto;
}

.permissions-list-container {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
}

.permission-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.permission-row:last-child {
    border-bottom: none;
}

.permission-module {
    min-width: 200px;
    padding-right: 1.5rem;
    font-weight: 500;
}

.permission-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    flex: 1;
}

.permission-checkboxes .form-check {
    margin: 0;
}

.permission-checkboxes .form-check-label {
    margin-left: 0.5rem;
    font-weight: normal;
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

.btn-light {
    background-color: #fff;
    border-color: #dee2e6;
}

.btn-light:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

@media (max-width: 768px) {
    .permission-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .permission-module {
        min-width: auto;
        margin-bottom: 0.5rem;
    }
    
    .permission-checkboxes {
        width: 100%;
    }
}
.form-check {
    align-items: center;
    display: flex;
}
</style>
@endpush
@endsection