@extends('layouts.admin')

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

@section('content')
<div class="role-create-page">
<x-admin.form-page
    title="Edit Role"
    :crumbs="[['label' => 'Users', 'url' => null], ['label' => 'Roles', 'url' => route('admin.roles.index')], 'Edit']"
    :back-url="route('admin.roles.index')"
    :action="route('admin.roles.update', $role)"
    method="PUT"
    form-id="roleForm"
    submit-label="Update Role"
>
    @if($role->users_count > 0)
        <x-ui.alert type="info" class="mb-3">
            <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.
        </x-ui.alert>
    @endif

    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-person-badge"></i></span>
            <div>
                <h2 class="pp-card__title">Role Details</h2>
                <p class="pp-card__sub">Display name, identifier and description</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="pp-grid pp-grid--2">
                <div class="pp-field">
                    <label for="display_name">Display Name <span class="pp-req">*</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="e.g. Store Manager"
                           data-role-sync>
                    <span class="pp-hint">Shown in admin UI and staff lists</span>
                    @error('display_name')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                    @error('name')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
                <div class="pp-field">
                    <label for="name">Role Key <span class="pp-req">*</span></label>
                    <input type="text"
                           class="form-control @error('name') is-invalid @enderror"
                           id="name"
                           name="name"
                           value="{{ old('name', $role->name) }}"
                           required
                           placeholder="e.g. store_manager"
                           data-role-sync>
                    <span class="pp-hint">Lowercase key used internally</span>
                    @error('name')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="pp-field mt-3">
                <label for="description">Description</label>
                <textarea class="form-control"
                          id="description"
                          name="description"
                          rows="3"
                          placeholder="Optional notes about this role">{{ old('description') }}</textarea>
            </div>
        </div>
    </section>

    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-percent"></i></span>
            <div>
                <h2 class="pp-card__title">POS Discount</h2>
                <p class="pp-card__sub">Maximum discount and OTP requirements</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="pp-grid pp-grid--2">
                <div class="pp-field">
                    <label for="max_discount_percentage">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"
                           data-role-sync>
                    <span class="pp-hint">0–100. Leave empty for no limit.</span>
                    @error('max_discount_percentage')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
                <div class="pp-field">
                    <label>OTP for Discount</label>
                    <div class="pp-toggles mt-1">
                        <label class="pp-toggle" for="otp_required_for_discount">
                            <input type="checkbox"
                                   class="form-check-input"
                                   role="switch"
                                   id="otp_required_for_discount"
                                   name="otp_required_for_discount"
                                   value="1"
                                   {{ old('otp_required_for_discount', $role->otp_required_for_discount) ? 'checked' : '' }}
                                   data-role-sync>
                            Require OTP when applying discounts
                        </label>
                    </div>
                    <span class="pp-hint">Users with this role must verify OTP before any discount.</span>
                </div>
            </div>
        </div>
    </section>

    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-shield-check"></i></span>
            <div>
                <h2 class="pp-card__title">Permissions</h2>
                <p class="pp-card__sub">Module access and capabilities</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="role-perm-toolbar">
                <button type="button" class="pp-btn pp-btn--ghost role-perm-toolbar__btn" onclick="selectAllModule()">
                    <i class="bi bi-check2-all"></i> Select all
                </button>
                <button type="button" class="pp-btn pp-btn--ghost role-perm-toolbar__btn" onclick="clearAllModule()">
                    <i class="bi bi-x-lg"></i> Clear all
                </button>
            </div>

            <div class="permissions-list-container">
                @foreach($permissionMatrix as $module => $label)
                    <div class="permission-row">
                        <div class="permission-module">
                            <strong>{{ $label }}</strong>
                            <button type="button" class="role-perm-row-toggle" title="Toggle all in this module"
                                    onclick="selectModuleRow('{{ $module === 'dashboard' ? 'dashboard' : $loop->index }}')">
                                All
                            </button>
                        </div>
                        <div class="permission-checkboxes">
                            @if($module === 'dashboard')
                                <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>
                                <div class="form-check">
                                    <input class="form-check-input module-dashboard"
                                           type="checkbox"
                                           name="permissions[]"
                                           value="dashboard.store.view"
                                           id="perm_dashboard_store_view"
                                           {{ in_array("dashboard.store.view", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="perm_dashboard_store_view">Store tab</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input module-dashboard"
                                           type="checkbox"
                                           name="permissions[]"
                                           value="dashboard.warehouse.view"
                                           id="perm_dashboard_warehouse_view"
                                           {{ in_array("dashboard.warehouse.view", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="perm_dashboard_warehouse_view">Warehouse tab</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input module-dashboard"
                                           type="checkbox"
                                           name="permissions[]"
                                           value="dashboard.overview.view"
                                           id="perm_dashboard_overview_view"
                                           {{ in_array("dashboard.overview.view", old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="perm_dashboard_overview_view">Overview tab</label>
                                </div>
                            @else
                                @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>
                        <button type="button" class="role-perm-row-toggle" title="Toggle all in this module"
                                onclick="selectModuleRow('tickets')">All</button>
                    </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>
                        <button type="button" class="role-perm-row-toggle" title="Toggle all in this module"
                                onclick="selectModuleRow('inventory')">All</button>
                    </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>

                <div class="permission-row">
                    <div class="permission-module">
                        <strong>Multi-Store</strong>
                        <button type="button" class="role-perm-row-toggle" title="Toggle all in this module"
                                onclick="selectModuleRow('multistore')">All</button>
                    </div>
                    <div class="permission-checkboxes">
                        @foreach([
                            'locations.view' => 'View Stores / Warehouses',
                            'locations.manage' => 'Manage Stores / Warehouses',
                            'inventory.balances.view' => 'Store Balances',
                            'transfers.view' => 'View Transfers',
                            'transfers.manage' => 'Create / Cancel Transfers',
                            'transfers.approve' => 'Approve Transfers',
                            'transfers.ship' => 'Ship Transfers',
                            'transfers.receive' => 'Receive Transfers',
                            'suppliers.manage' => 'Manage Suppliers',
                            'purchase-orders.view' => 'View Purchase Orders',
                            'purchase-orders.manage' => 'Create Purchase Orders',
                            'purchase-orders.receive' => 'Receive Purchase Orders',
                            'allocation-rules.manage' => 'Allocation Rules',
                            'reports.location-ops' => 'Location Ops Report',
                        ] as $perm => $label)
                        <div class="form-check">
                            <input class="form-check-input module-multistore"
                                   type="checkbox"
                                   name="permissions[]"
                                   value="{{ $perm }}"
                                   id="perm_{{ str_replace('.', '_', $perm) }}"
                                   {{ in_array($perm, old('permissions', $assignedPermissions)) ? 'checked' : '' }}>
                            <label class="form-check-label" for="perm_{{ str_replace('.', '_', $perm) }}">{{ $label }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="permission-row">
                    <div class="permission-module">
                        <strong>Whats App</strong>
                        <button type="button" class="role-perm-row-toggle" title="Toggle all in this module"
                                onclick="selectModuleRow('whatsapp')">All</button>
                    </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>

                <div class="permission-row">
                    <div class="permission-module">
                        <strong>Reports</strong>
                        <button type="button" class="role-perm-row-toggle" title="Toggle all in this module"
                                onclick="selectModuleRow('reports')">All</button>
                    </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>

                <div class="permission-row">
                    <div class="permission-module">
                        <strong>Settings</strong>
                        <button type="button" class="role-perm-row-toggle" title="Toggle all in this module"
                                onclick="selectModuleRow('settings')">All</button>
                    </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>

                <div class="permission-row">
                    <div class="permission-module">
                        <strong>Others</strong>
                        <button type="button" class="role-perm-row-toggle" title="Toggle all in this module"
                                onclick="selectModuleRow('others')">All</button>
                    </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 mt-3 mb-0">{{ $message }}</div>
            @enderror
            @error('permissions.*')
                <div class="alert alert-danger mt-3 mb-0">{{ $message }}</div>
            @enderror
        </div>
    </section>

    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-people"></i></span>
            <div>
                <h2 class="pp-card__title">Assign Users to Role</h2>
                <p class="pp-card__sub">Users inherit all permissions assigned above</p>
            </div>
        </div>
        <div class="pp-card__body">
            <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 role-users-table">
                <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 mt-3 mb-0">{{ $message }}</div>
            @enderror
            @error('users.*')
                <div class="alert alert-danger mt-3 mb-0">{{ $message }}</div>
            @enderror
        </div>
    </section>

    <x-slot:aside>
        <section class="pp-card">
            <div class="pp-card__head">
                <span class="pp-card__icon pp-card__icon--summary"><i class="bi bi-eye"></i></span>
                <div>
                    <h2 class="pp-card__title">Live Summary</h2>
                </div>
            </div>
            <div class="pp-card__body">
                <div class="pp-summary__rows" style="margin-top: 0;">
                    <div class="pp-summary__row"><span>Display name</span><span id="roleSumDisplay">—</span></div>
                    <div class="pp-summary__row"><span>Role key</span><span id="roleSumKey">—</span></div>
                    <div class="pp-summary__row"><span>Max discount</span><span id="roleSumDiscount">—</span></div>
                    <div class="pp-summary__row"><span>OTP required</span><span id="roleSumOtp">No</span></div>
                    <div class="pp-summary__row"><span>Permissions</span><span id="roleSumPerms">0 selected</span></div>
                </div>
                <button type="submit" class="pp-btn pp-btn--primary pp-btn--block">
                    <i class="bi bi-save"></i> Update Role
                </button>
            </div>
        </section>

        <section class="pp-card role-tip-card">
            <div class="pp-card__body">
                <p class="pp-hint mb-0">
                    <i class="bi bi-lightbulb me-1"></i>
                    Grant the minimum permissions needed. Use module <strong>All</strong> to toggle a row, or Select all / Clear all for the full matrix.
                </p>
            </div>
        </section>
    </x-slot:aside>
</x-admin.form-page>
</div>
@endsection

@push('scripts')
<script>
function selectModuleRow(index) {
    const checkboxes = document.querySelectorAll('.module-' + index);
    if (!checkboxes.length) return;
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    checkboxes.forEach(cb => { cb.checked = !allChecked; });
    if (typeof refreshRoleSummary === 'function') refreshRoleSummary();
}

function selectAllModule() {
    document.querySelectorAll('input[name="permissions[]"]').forEach(cb => { cb.checked = true; });
    if (typeof refreshRoleSummary === 'function') refreshRoleSummary();
}

function clearAllModule() {
    document.querySelectorAll('input[name="permissions[]"]').forEach(cb => { cb.checked = false; });
    if (typeof refreshRoleSummary === 'function') refreshRoleSummary();
}

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

(function () {
    const displayName = document.getElementById('display_name');
    const roleNameInput = document.getElementById('name');
    let nameTouched = !!(roleNameInput && roleNameInput.value);

    roleNameInput?.addEventListener('input', function () {
        nameTouched = true;
        refreshRoleSummary();
    });

    displayName?.addEventListener('input', function (e) {
        if (roleNameInput && !nameTouched) {
            roleNameInput.value = e.target.value.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
        }
        refreshRoleSummary();
    });

    window.refreshRoleSummary = function refreshRoleSummary() {
        const display = (document.getElementById('display_name')?.value || '').trim();
        const key = (document.getElementById('name')?.value || '').trim();
        const discount = document.getElementById('max_discount_percentage')?.value;
        const otp = document.getElementById('otp_required_for_discount')?.checked;
        const perms = document.querySelectorAll('input[name="permissions[]"]:checked').length;

        const set = (id, text) => {
            const el = document.getElementById(id);
            if (el) el.textContent = text;
        };

        set('roleSumDisplay', display || '—');
        set('roleSumKey', key || '—');
        set('roleSumDiscount', discount !== undefined && discount !== '' ? discount + '%' : 'No limit');
        set('roleSumOtp', otp ? 'Yes' : 'No');
        set('roleSumPerms', perms + ' selected');
    };

    document.querySelectorAll('[data-role-sync]').forEach((el) => {
        el.addEventListener('input', refreshRoleSummary);
        el.addEventListener('change', refreshRoleSummary);
    });
    document.querySelectorAll('input[name="permissions[]"]').forEach((el) => {
        el.addEventListener('change', refreshRoleSummary);
    });

    refreshRoleSummary();
})();
</script>
@endpush

@push('styles')
<style>
.role-create-page .role-perm-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.role-create-page .role-perm-toolbar__btn {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
}
.role-create-page .permissions-list-container {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    padding: 0.65rem;
    background: #f8fafc;
}
.role-create-page .permission-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.55rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.role-create-page .permission-row:last-child {
    margin-bottom: 0;
}
.role-create-page .permission-module {
    position: sticky;
    top: 0;
    z-index: 1;
    min-width: 140px;
    max-width: 160px;
    padding: 0.15rem 0.35rem 0.15rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    flex-shrink: 0;
}
.role-create-page .permission-module strong {
    font-size: 0.8125rem;
    font-weight: 650;
    color: #0f172a;
    line-height: 1.3;
}
.role-create-page .role-perm-row-toggle {
    appearance: none;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #0f766e;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
}
.role-create-page .role-perm-row-toggle:hover {
    background: rgba(15, 118, 110, 0.1);
    border-color: #0f766e;
}
.role-create-page .permission-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    flex: 1;
}
.role-create-page .permission-checkboxes .form-check {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem 0.28rem 0.45rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.role-create-page .permission-checkboxes .form-check:has(.form-check-input:checked) {
    background: rgba(15, 118, 110, 0.08);
    border-color: rgba(15, 118, 110, 0.35);
}
.role-create-page .permission-checkboxes .form-check-input {
    margin: 0;
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    border-color: #94a3b8;
}
.role-create-page .permission-checkboxes .form-check-input:checked {
    background-color: #0f766e;
    border-color: #0f766e;
}
.role-create-page .permission-checkboxes .form-check-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
}
.role-create-page .role-users-table {
    max-height: 400px;
    overflow-y: auto;
}
.role-create-page .role-tip-card .pp-card__body {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}
.role-create-page .role-tip-card .pp-hint {
    color: #475569;
    line-height: 1.45;
}
@media (max-width: 768px) {
    .role-create-page .permission-row {
        flex-direction: column;
        align-items: stretch;
    }
    .role-create-page .permission-module {
        position: static;
        min-width: 0;
        max-width: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-bottom: 0.35rem;
        border-bottom: 1px dashed #e2e8f0;
        margin-bottom: 0.25rem;
    }
}
</style>
@endpush
@endsection