@push('styles')
<style>
    /* Admin Accounts Styles */
    .admin-accounts-container { padding: 0; }
    .admin-accounts-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
    .header-left { flex: 1; }
    .admin-accounts-title { font-size: 1.25rem; font-weight: 600; color: #111827; margin: 0 0 0.25rem 0; }
    .admin-accounts-subtitle { font-size: 0.875rem; color: #6b7280; margin: 0; }
    .btn-create-user { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25); }
    .btn-create-user:hover { background: linear-gradient(135deg, #059669 0%, #047857 100%); box-shadow: 0 4px 8px rgba(16, 185, 129, 0.35); transform: translateY(-1px); }
    .btn-create-user-small { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; background: #10b981; color: white; border: none; border-radius: 0.375rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
    .admin-accounts-filters { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
    .search-box { position: relative; flex: 1; max-width: 400px; }
    .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
    .search-input { width: 100%; padding: 0.625rem 0.75rem 0.625rem 2.5rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; }
    .search-input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
    .per-page-selector { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #6b7280; }
    .per-page-selector select { padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; font-size: 0.875rem; background: white; cursor: pointer; }
    .admin-accounts-table-wrapper { background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; position: relative; min-height: 200px; }
    .admin-accounts-table { width: 100%; border-collapse: collapse; }
    .admin-accounts-table thead { background: #f9fafb; }
    .admin-accounts-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #e5e7eb; white-space: nowrap; cursor: pointer; }
    .admin-accounts-table th:hover { background: #f3f4f6; }
    .sort-icon { display: inline-block; margin-left: 0.25rem; vertical-align: middle; opacity: 0.4; }
    .admin-accounts-table td { padding: 0.875rem 1rem; font-size: 0.875rem; color: #374151; border-bottom: 1px solid #f3f4f6; }
    .admin-accounts-table tbody tr:hover { background: #f9fafb; }
    .user-name { font-weight: 500; color: #111827; }
    .status-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
    .status-badge.active { background: #d1fae5; color: #059669; }
    .status-badge.inactive { background: #fee2e2; color: #dc2626; }
    .bu-badge { display: inline-block; padding: 0.125rem 0.5rem; background: #e0e7ff; color: #4338ca; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 500; margin-right: 0.25rem; }
    .action-buttons { display: flex; gap: 0.5rem; }
    .action-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #e5e7eb; border-radius: 0.375rem; background: white; color: #6b7280; cursor: pointer; transition: all 0.15s; }
    .action-btn:hover { background: #f3f4f6; color: #374151; }
    .action-btn.edit:hover { border-color: #a5b4fc; background: #eef2ff; color: #4338ca; }
    .action-btn.delete:hover { border-color: #fecaca; background: #fef2f2; color: #dc2626; }
    .admin-accounts-table-wrapper { position: relative; min-height: 300px; }
    .table-loading { 
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        gap: 1rem; 
        background: rgba(255, 255, 255, 0.95); 
        backdrop-filter: blur(4px);
        z-index: 100;
        border-radius: 0.5rem;
    }
    .loading-spinner { 
        width: 48px; 
        height: 48px; 
        border: 4px solid #e5e7eb; 
        border-top-color: #10b981; 
        border-radius: 50%; 
        animation: spin 0.8s linear infinite; 
    }
    .table-loading span {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 500;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .table-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; gap: 1rem; color: #9ca3af; }
    .admin-accounts-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding: 0.75rem 0; }
    .pagination-info { font-size: 0.875rem; color: #6b7280; }
    .pagination-controls { display: flex; align-items: center; gap: 0.5rem; }
    .pagination-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.375rem; font-size: 0.8125rem; color: #374151; cursor: pointer; }
    .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .page-btn { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: white; border: 1px solid #e5e7eb; border-radius: 0.375rem; font-size: 0.8125rem; color: #374151; cursor: pointer; }
    .page-btn.active { background: #10b981; border-color: #10b981; color: white; }
    /* Slide-out Panel */
    .admin-user-panel-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
    .admin-user-panel-overlay.open { opacity: 1; visibility: visible; }
    .admin-user-panel { position: fixed; top: 0; right: -500px; width: 500px; max-width: 100%; height: 100vh; background: white; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; transition: right 0.3s ease; z-index: 10000; }
    .admin-user-panel-overlay.open .admin-user-panel { right: 0; }
    .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
    .panel-header h3 { margin: 0; font-size: 1.125rem; font-weight: 600; color: #111827; }
    .panel-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: white; border: 1px solid #e5e7eb; border-radius: 0.375rem; color: #6b7280; cursor: pointer; }
    .panel-close:hover { background: #fee2e2; border-color: #fecaca; color: #dc2626; }
    .panel-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
    .form-section { margin-bottom: 2rem; }
    .form-section-title { font-size: 0.875rem; font-weight: 600; color: #374151; margin: 0 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid #f3f4f6; }
    .form-section-hint { font-size: 0.8125rem; color: #6b7280; margin: -0.5rem 0 1rem 0; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .panel-form-group { margin-bottom: 1rem; }
    .panel-form-group label { display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; }
    .panel-form-group .required { color: #dc2626; }
    .panel-form-group input, .panel-form-group select { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; font-size: 0.8125rem; }
    .panel-form-group input:focus, .panel-form-group select:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
    .modules-permission-card { background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
    .modules-permission-title { font-size: 1rem; font-weight: 600; color: #111827; margin-bottom: 0.375rem; }
    .modules-permission-subtitle { font-size: 0.8125rem; color: #6b7280; margin-bottom: 1.25rem; }
    .module-group { margin-bottom: 1.5rem; }
    .module-group:last-child { margin-bottom: 0; }
    .module-parent-checkbox { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; cursor: pointer; padding: 0.25rem 0; }
    .module-parent-checkbox:hover { opacity: 0.8; }
    .module-parent-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: #10b981; flex-shrink: 0; }
    .module-parent-label { font-size: 0.875rem; font-weight: 500; color: #111827; cursor: pointer; user-select: none; }
    .module-children { margin-left: 2rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .module-child-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.375rem 0.75rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.375rem; transition: all 0.15s; }
    .module-child-checkbox:hover { background: #f9fafb; border-color: #d1d5db; }
    .module-child-checkbox input[type="checkbox"] { 
        width: 14px; 
        height: 14px; 
        margin: 0; 
        cursor: pointer; 
        flex-shrink: 0;
        appearance: none;
        -webkit-appearance: none;
        border: 1.5px solid #9ca3af;
        border-radius: 50%;
        background: white;
        position: relative;
        transition: all 0.15s;
    }
    .module-child-checkbox input[type="checkbox"]:checked {
        border-color: #10b981;
        background: white;
    }
    .module-child-checkbox input[type="checkbox"]:checked::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #10b981;
    }
    .module-child-checkbox.active { background: white; border-color: #10b981; }
    .module-child-label { font-size: 0.75rem; color: #374151; cursor: pointer; user-select: none; font-weight: 400; line-height: 1.4; }
    .module-child-checkbox.active .module-child-label { color: #111827; font-weight: 400; }
    .form-hint { font-size: 0.75rem; color: #9ca3af; margin-top: 0.375rem; }
    .password-input-wrapper { position: relative; }
    .password-input-wrapper input { padding-right: 2.75rem; }
    .password-toggle { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0.25rem; }
    /* Business Unit Multi-Select Styles (Select2-like) */
    .business-unit-multiselect-wrapper { position: relative; width: 100%; }
    .business-unit-multiselect { position: relative; width: 100%; }
    .bu-multi-select-trigger { 
        display: flex; 
        align-items: center; 
        flex-wrap: wrap;
        gap: 0.375rem;
        padding: 0.375rem 2.5rem 0.375rem 0.75rem; 
        border: 1px solid #d1d5db; 
        border-radius: 0.375rem; 
        background: white; 
        cursor: pointer; 
        transition: all 0.15s;
        min-height: 38px;
        width: 100%;
        position: relative;
        justify-content: flex-start;
    }
    .bu-multi-select-trigger:hover { border-color: #9ca3af; }
    .bu-multi-select-trigger.open { 
        border-color: #d1d5db; 
        box-shadow: none;
    }
    .bu-tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        flex: 1;
        align-items: center;
    }
    .bu-tag { 
        display: inline-flex; 
        align-items: center; 
        gap: 0.375rem; 
        padding: 0.25rem 0.5rem; 
        background: #f3f4f6; 
        border: 1px solid #d1d5db; 
        border-radius: 0.25rem; 
        font-size: 0.875rem; 
        color: #374151;
        line-height: 1.4;
        white-space: nowrap;
    }
    .bu-tag-remove { 
        cursor: pointer; 
        color: #6b7280; 
        font-weight: normal;
        font-size: 1rem;
        line-height: 1;
        padding: 0;
        margin-left: 0.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        transition: color 0.15s;
    }
    .bu-tag-remove:hover { 
        color: #374151;
    }
    .bu-placeholder { 
        font-size: 0.875rem; 
        color: #9ca3af; 
        flex: 1;
        min-width: 120px;
        line-height: 1.5;
        text-align: left;
    }
    .bu-placeholder.has-selection { display: none; }
    .bu-chevron { 
        color: #6b7280; 
        transition: transform 0.2s; 
        flex-shrink: 0;
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }
    .bu-multi-select-trigger.open .bu-chevron { 
        transform: translateY(-50%) rotate(180deg); 
    }
    .bu-multi-select-dropdown { 
        position: absolute; 
        top: calc(100% + 4px); 
        left: 0; 
        right: 0; 
        background: white; 
        border: 1px solid #d1d5db; 
        border-radius: 0.375rem; 
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
        z-index: 1000; 
        max-height: 300px; 
        display: none;
        flex-direction: column;
        overflow: hidden;
    }
    .bu-multi-select-dropdown.show { display: flex; }
    .bu-multi-select-search { padding: 0.5rem; border-bottom: 1px solid #e5e7eb; }
    .bu-search-input { 
        width: 100%; 
        padding: 0.5rem 0.75rem; 
        border: 1px solid #e5e7eb; 
        border-radius: 0.375rem; 
        font-size: 0.875rem;
        box-sizing: border-box;
    }
    .bu-search-input:focus { outline: none; border-color: #d1d5db; box-shadow: none; }
    .bu-multi-select-options { 
        max-height: 250px; 
        overflow-y: auto; 
        padding: 0.25rem;
        min-height: 100px;
    }
    .bu-option { 
        display: flex; 
        align-items: center; 
        gap: 0.625rem; 
        padding: 0.625rem 0.75rem; 
        cursor: pointer; 
        border-radius: 0.25rem; 
        transition: background 0.15s;
        margin: 0.125rem 0;
    }
    .bu-option:hover { background: #f9fafb; }
    .bu-option.selected { 
        background: #f9fafb; 
    }
    .bu-option input[type="checkbox"] { 
        width: 16px; 
        height: 16px; 
        margin: 0; 
        cursor: pointer; 
        accent-color: #3b82f6;
        flex-shrink: 0;
    }
    .bu-option-label { 
        font-size: 0.875rem; 
        color: #374151;
        flex: 1;
        user-select: none;
    }
    .bu-option.selected .bu-option-label {
        color: #374151;
        font-weight: normal;
    }
    .bu-selected-tags { 
        display: none;
    }
    .loading-business-units { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 0.5rem; 
        padding: 1.5rem; 
        color: #6b7280; 
        font-size: 0.875rem; 
    }
    .bu-no-results {
        padding: 1rem;
        text-align: center;
        color: #9ca3af;
        font-size: 0.875rem;
    }
    
    /* Inline Validation Errors */
    .field-error {
        color: #dc2626;
        font-size: 0.75rem;
        margin-top: 0.25rem;
        display: block;
        line-height: 1.4;
    }
    .panel-form-group.has-error input,
    .panel-form-group.has-error select,
    .bu-multi-select-trigger.has-error {
        border-color: #dc2626 !important;
    }
    .form-section.has-error {
        border: 1px solid #dc2626;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .section-error {
        color: #dc2626;
        font-size: 0.875rem;
        margin-top: 0.5rem;
        display: block;
        font-weight: 500;
    }
    .panel-footer { display: flex; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; background: #f9fafb; }
    .btn-cancel { flex: 1; padding: 0.75rem 1.5rem; background: white; color: #374151; border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
    .btn-submit { flex: 1; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
    .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }
    .loading-spinner-small { width: 16px; height: 16px; border: 2px solid #e5e7eb; border-top-color: #10b981; border-radius: 50%; animation: spin 0.8s linear infinite; }
    
    /* Panel Loading Overlay */
    .panel-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(4px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        z-index: 1000;
        border-radius: 0.75rem;
    }
    .panel-loading-overlay .loading-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid #e5e7eb;
        border-top-color: #10b981;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    .panel-loading-overlay span {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 500;
    }
</style>
@endpush

<x-filament-panels::page>
    <div class="account-page-container">
        <!-- Page Title -->
        <h1 class="account-page-title">Account</h1>

        <!-- Tabs Navigation -->
        <div class="account-tabs">
            <button 
                class="account-tab {{ $activeTab === 'personal-profile' ? 'active' : '' }}"
                wire:click="$set('activeTab', 'personal-profile')"
            >
                Personal Profile
            </button>
            <button 
                class="account-tab {{ $activeTab === 'company-profile' ? 'active' : '' }}"
                wire:click="$set('activeTab', 'company-profile')"
            >
                Company Profile
            </button>
            <button 
                class="account-tab {{ $activeTab === 'admin-accounts' ? 'active' : '' }}"
                wire:click="$set('activeTab', 'admin-accounts')"
            >
                Admin Accounts
            </button>
            <!-- <button 
                class="account-tab {{ $activeTab === 'billing-information' ? 'active' : '' }}"
                wire:click="$set('activeTab', 'billing-information')"
            >
                Billing Information
            </button>
            <button 
                class="account-tab {{ $activeTab === 'managed-users' ? 'active' : '' }}"
                wire:click="$set('activeTab', 'managed-users')"
            >
                Managed Users
            </button> -->
        </div>

        <!-- Tab Content -->
        <div class="account-tab-content">
            @if($activeTab === 'personal-profile')
                <!-- Personal Profile Tab -->
                <x-filament-panels::form wire:submit="save">
                    {{ $this->form }}

                    <x-filament-panels::form.actions
                        :actions="$this->getCachedFormActions()"
                        :full-width="false"
                    />
                </x-filament-panels::form>

                <!-- Product Updates Section -->
                <!-- <div class="product-updates-section">
                    <h2 class="section-title">Product updates</h2>
                    <div class="product-updates-grid">
                        <div class="product-update-card">
                            <svg class="update-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <span>Release notes</span>
                        </div>
                        <div class="product-update-card">
                            <svg class="update-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                            </svg>
                            <span>Service status</span>
                        </div>
                        <div class="product-update-card">
                            <svg class="update-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                            </svg>
                            <span>Blog</span>
                        </div>
                    </div>
                </div> -->
            @elseif($activeTab === 'company-profile')
                <!-- Company Profile Tab -->
                <form wire:submit.prevent="saveCompanyProfile" class="company-form" autocomplete="off" enctype="multipart/form-data">
                    <div class="company-form-grid">
                        <!-- Left column -->
                        <div class="form-group name-block">
                            <label>Company / Organization Name</label>
                            <input type="text" class="form-input" wire:model.defer="company_name" placeholder="Enter company name" required>
                            @error('company_name')<p class="error-text">{{ $message }}</p>@enderror
                        </div>
                        <div class="form-group email-block">
                            <label>Email</label>
                            <input type="email" class="form-input" wire:model.defer="company_email" placeholder="name@company.com" required>
                            @error('company_email')<p class="error-text">{{ $message }}</p>@enderror
                        </div>
                        <div class="form-group phone-block">
                            <label>Phone Number</label>
                            <input type="tel" class="form-input" wire:model.defer="company_phone" placeholder="+1 555 123 4567" required>
                            @error('company_phone')<p class="error-text">{{ $message }}</p>@enderror
                        </div>
                        <div class="form-group website-block">
                            <label>Website URL</label>
                            <input type="url" class="form-input" wire:model.defer="website_url" placeholder="https://example.com">
                            @error('website_url')<p class="error-text">{{ $message }}</p>@enderror
                        </div>
                        <div class="form-group currency-block">
                            <label>Currency</label>
                            <select class="form-input" wire:model.defer="currency" required>
                                <option value="USD">USD — US Dollar</option>
                                <option value="INR">INR — Indian Rupee</option>
                                <option value="EUR">EUR — Euro</option>
                                <option value="GBP">GBP — British Pound</option>
                                <option value="AED">AED — UAE Dirham</option>
                                <option value="AUD">AUD — Australian Dollar</option>
                                <option value="CAD">CAD — Canadian Dollar</option>
                            </select>
                            @error('currency')<p class="error-text">{{ $message }}</p>@enderror
                        </div>
                        <!-- Right column -->
                        <div class="form-group full-row-sm address-block">
                            <label>Address</label>
                            <textarea class="form-input" rows="5" wire:model.defer="company_address" placeholder="Street, City, State, ZIP, Country" required></textarea>
                            @error('company_address')<p class="error-text">{{ $message }}</p>@enderror
                        </div>
                        <div class="form-group gstin-block">
                            <label>GSTIN / Tax ID</label>
                            <input type="text" class="form-input" wire:model.defer="gstin" placeholder="15-character GSTIN">
                            @error('gstin')<p class="error-text">{{ $message }}</p>@enderror
                        </div>
                        <div class="form-group pan-block">
                            <label>PAN</label>
                            <input type="text" class="form-input" wire:model.defer="pan" placeholder="10-character PAN">
                            @error('pan')<p class="error-text">{{ $message }}</p>@enderror
                        </div>
                        <div class="form-group full-row logo-block">
                            <label>Company Logo</label>
                            <div class="upload-wrapper">
                                @if ($company_logo_preview)
                                    <div class="upload-preview">
                                        <img wire:key="company-logo-img-{{ md5($company_logo_preview) }}" src="{{ $company_logo_preview }}" alt="Company Logo Preview">
                                    </div>
                                    <div class="upload-actions">
                                        <label class="btn-secondary" for="company_logo_input">Replace Logo</label>
                                        <input
                                            id="company_logo_input"
                                            type="file"
                                            class="sr-only"
                                            wire:model="company_logo"
                                            wire:key="company-logo-input-{{ md5($company_logo_preview) }}"
                                            accept="image/*">
                                    </div>
                                @else
                                    <label for="company_logo_input" class="upload-dropzone">
                                        <div class="upload-icon">+</div>
                                        <div class="upload-text">
                                            <strong>Upload logo</strong>
                                            <span>PNG, JPG, or SVG</span>
                                        </div>
                                        <input
                                            id="company_logo_input"
                                            type="file"
                                            class="sr-only"
                                            wire:model="company_logo"
                                            wire:key="company-logo-input-empty"
                                            accept="image/*">
                                    </label>
                                @endif
                                @error('company_logo')<p class="error-text">{{ $message }}</p>@enderror
                            </div>
                        </div>
                    </div>
                    <div class="company-form-actions">
                        <button type="submit"
                                class="btn-primary btn-submit"
                                wire:target="saveCompanyProfile,company_logo"
                                wire:loading.attr="disabled">
                            <span wire:loading.remove wire:target="saveCompanyProfile">Save</span>
                            <span class="loading-inline" wire:loading wire:target="saveCompanyProfile">
                                <span class="loading-spinner"></span> Saving...
                            </span>
                        </button>
                    </div>
                </form>
            @elseif($activeTab === 'admin-accounts')
                <!-- Admin Accounts Tab -->
                <div class="admin-accounts-container">
                    <div class="admin-accounts-header">
                        <div class="header-left">
                            <h2 class="admin-accounts-title">Admin Users</h2>
                            <p class="admin-accounts-subtitle">Manage your sub-admin users and their business unit access</p>
                        </div>
                        <button type="button" class="btn-create-user" id="btn-create-admin-user">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                            Create User
                        </button>
                    </div>
                    <div class="admin-accounts-filters">
                        <div class="search-box">
                            <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                            <input type="text" id="admin-users-search" placeholder="Search by name, email or mobile..." class="search-input">
                        </div>
                        <div class="per-page-selector">
                            <label>Show</label>
                            <select id="admin-users-per-page"><option value="10">10</option><option value="25">25</option><option value="50">50</option></select>
                            <label>entries</label>
                        </div>
                    </div>
                    <div class="admin-accounts-table-wrapper">
                        <table class="admin-accounts-table" id="admin-users-table">
                            <thead><tr><th data-sort="name">Name</th><th data-sort="email">Email</th><th data-sort="mobile">Mobile</th><th>Business Units</th><th data-sort="status">Status</th><th data-sort="created_at">Created</th><th>Actions</th></tr></thead>
                            <tbody id="admin-users-tbody"></tbody>
                        </table>
                        <div class="table-loading" id="admin-users-loading"><div class="loading-spinner"></div><span>Loading users...</span></div>
                        <div class="table-empty" id="admin-users-empty" style="display: none;"><p>No admin users found</p><button type="button" class="btn-create-user-small" onclick="document.getElementById('btn-create-admin-user').click()">Create your first admin user</button></div>
                    </div>
                    <div class="admin-accounts-pagination" id="admin-users-pagination">
                        <div class="pagination-info">Showing <span id="pagination-start">0</span> to <span id="pagination-end">0</span> of <span id="pagination-total">0</span> entries</div>
                        <div class="pagination-controls">
                            <button type="button" class="pagination-btn" id="pagination-prev" disabled>Previous</button>
                            <div class="pagination-pages" id="pagination-pages"></div>
                            <button type="button" class="pagination-btn" id="pagination-next" disabled>Next</button>
                        </div>
                    </div>
                </div>
            @elseif($activeTab === 'billing-information')
                <!-- Billing Information Tab -->
                <div class="tab-placeholder">
                    <p>Billing Information content coming soon...</p>
                </div>
            @elseif($activeTab === 'managed-users')
                <!-- Managed Users Tab -->
                <div class="tab-placeholder">
                    <p>Managed Users content coming soon...</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Change Password Modal -->
    @if($showPasswordModal ?? false)
    <div class="modal-overlay" wire:click="$set('showPasswordModal', false)">
        <div class="modal-content" wire:click.stop>
            <div class="modal-header">
                <h2>Change Password</h2>
                <button wire:click="$set('showPasswordModal', false)" class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <p class="modal-description">Enter your current password and choose a new one.</p>
                <div class="modal-form">
                    <div class="form-group">
                        <label>Current password</label>
                        <input type="password" wire:model="current_password" placeholder="Current password" class="form-input">
                    </div>
                    <div class="form-group">
                        <label>New password</label>
                        <input type="password" wire:model="new_password" placeholder="New password" class="form-input">
                    </div>
                    <div class="form-group">
                        <label>Confirm new password</label>
                        <input type="password" wire:model="confirm_password" placeholder="Confirm new password" class="form-input">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button wire:click="changePassword" class="btn-primary">Update Password</button>
                <button wire:click="$set('showPasswordModal', false)" class="btn-secondary">Cancel</button>
            </div>
        </div>
    </div>
    @endif

    <!-- Change Email Modal -->
    @if($showEmailModal ?? false)
    <div class="modal-overlay" wire:click="$set('showEmailModal', false)">
        <div class="modal-content" wire:click.stop>
            <div class="modal-header">
                <h2>Change Email</h2>
                <button wire:click="$set('showEmailModal', false)" class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <p class="modal-description">Enter your new email address.</p>
                <div class="modal-form">
                    <div class="form-group">
                        <label>New email address</label>
                        <input type="email" wire:model="new_email" placeholder="New email address" class="form-input">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button wire:click="changeEmail" class="btn-primary">Update Email</button>
                <button wire:click="$set('showEmailModal', false)" class="btn-secondary">Cancel</button>
            </div>
        </div>
    </div>
    @endif

    <style>
        .account-page-container {
            max-width: 1200px;
            margin: 0;
            padding: 10px;
            text-align: left;
        }
        
        .py-8 {
            padding-bottom: 1rem;
            padding-top: 1rem;
        }

        .account-page-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2rem;
            color: #111827;
            text-align: left;
        }

        .account-tabs {
            display: flex;
            gap: 0;
            border-bottom: 2px solid #e5e7eb;
            margin-bottom: 2rem;
            justify-content: flex-start;
        }

        .account-tab {
            padding: 0.75rem 1.5rem;
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            color: #6b7280;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: -2px;
        }

        .account-tab:hover {
            color: #111827;
        }

        .account-tab.active {
            color: #10b981;
            border-bottom-color: #10b981;
        }

        .account-tab-content {
            min-height: 400px;
            text-align: left;
        }

        .product-updates-section {
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid #e5e7eb;
        }

        .section-title {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: #111827;
        }

        .product-updates-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .product-update-card {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .product-update-card:hover {
            border-color: #10b981;
            background: #f0fdf4;
        }

        .update-icon {
            width: 1.5rem;
            height: 1.5rem;
            color: #6b7280;
        }

        .product-update-card:hover .update-icon {
            color: #10b981;
        }

        .tab-placeholder {
            padding: 3rem;
            text-align: center;
            color: #6b7280;
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            border-radius: 0.5rem;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.5rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .modal-header h2 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
            color: #111827;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #6b7280;
            cursor: pointer;
            padding: 0;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-close:hover {
            color: #111827;
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-description {
            color: #6b7280;
            margin-bottom: 1.5rem;
            font-size: 0.875rem;
        }

        .modal-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .form-group label {
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
        }

        .form-input {
            padding: 0.5rem 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            font-size: 0.875rem;
        }

        .form-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .modal-footer {
            display: flex;
            gap: 0.75rem;
            justify-content: flex-end;
            padding: 1.5rem;
            border-top: 1px solid #e5e7eb;
        }

        .btn-primary {
            padding: 0.5rem 1rem;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
        }

        .btn-primary:hover {
            background: #2563eb;
        }

        .btn-secondary {
            padding: 0.5rem 1rem;
            background: white;
            color: #374151;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
        }

        .btn-secondary:hover {
            background: #f9fafb;
        }

        /* Password field disabled styling - keep it faded */
        input[name*="password_display"][disabled] {
            background-color: #f9fafb !important;
            cursor: not-allowed !important;
            opacity: 0.6 !important;
        }
        
        /* Force show text when type is text - override browser default masking */
        input[name*="password_display"][type="text"] {
            -webkit-text-security: none !important;
            text-security: none !important;
            font-family: monospace !important;
        }
        
        /* When type is password, ensure masking */
        input[name*="password_display"][type="password"] {
            -webkit-text-security: disc !important;
            text-security: disc !important;
        }
        
        /* Additional override for disabled text inputs */
        input[name*="password_display"][type="text"][disabled] {
            -webkit-text-security: none !important;
            text-security: none !important;
            color: inherit !important;
        }

        /* Make reveal button (eye icon) clickable even when input is disabled */
        .fi-input-wrp button.fi-input-wrp-action,
        .fi-input-wrp button:has(svg) {
            pointer-events: auto !important;
            cursor: pointer !important;
            z-index: 9999 !important;
            position: relative !important;
        }
        
        /* Company Profile form layout */
        .company-form {
            display: block;
            width: 100%;
        }
        .company-form-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem 1.25rem;
        }
        @media (min-width: 1024px) {
            .company-form-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        .company-form .full-row {
            grid-column: 1 / -1;
        }
        /* Make textarea block span full width on small screens; on lg it stays in its column */
        .company-form .full-row-sm {
            grid-column: 1 / -1;
        }
        @media (min-width: 1024px) {
            .company-form .full-row-sm {
                grid-column: auto;
            }
        }
        .company-form-actions {
            margin-top: 1rem;
        }
        .btn-submit[disabled] {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .error-text {
            color: #dc2626;
            font-size: 0.75rem;
        }
        
        /* Upload styles */
        .upload-wrapper {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        .upload-dropzone {
            border: 2px dashed #3b82f6;
            border-radius: 0.5rem;
            padding: 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            color: #374151;
            cursor: pointer;
            user-select: none;
        }
        .upload-dropzone:hover {
            background: #f3f4f6;
        }
        .upload-icon {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #3b82f6;
            border: 2px solid #3b82f6;
            border-radius: 9999px;
            font-weight: 600;
            line-height: 1;
        }
        .upload-text {
            display: flex;
            flex-direction: column;
            font-size: 0.875rem;
        }
        .upload-text strong {
            font-weight: 600;
        }
        .upload-preview {
            width: 240px;
            max-width: 100%;
            aspect-ratio: 1 / 1;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            overflow: hidden;
            background: #fff;
        }
        .upload-preview img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .upload-actions {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .loading-inline {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .loading-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid #bfdbfe;
            border-top-color: #2563eb;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
        
        /* Desktop grid re-layout for Company Profile
           - Address at bottom-left
           - Logo on the right side
           Mobile layout remains stacked as-is */
        @media (min-width: 1024px) {
            .company-form-grid {
                grid-template-columns: 1fr 1fr;
                grid-template-areas:
                    "name email"
                    "phone website"
                    "currency gstin"
                    "address pan"
                    "logo logo";
            }
            .company-form .name-block { grid-area: name; }
            .company-form .email-block { grid-area: email; }
            .company-form .phone-block { grid-area: phone; }
            .company-form .website-block { grid-area: website; }
            .company-form .currency-block { grid-area: currency; }
            .company-form .address-block { grid-area: address; }
            .company-form .gstin-block { grid-area: gstin; }
            .company-form .pan-block { grid-area: pan; }
            .company-form .logo-block { grid-area: logo; }
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>

    <script>
        (function() {
            let passwordInput = null;
            let revealButton = null;
            let isInitialized = false;
            
            function togglePassword() {
                // Check if we have a cached reference
                if (window.passwordInputRef && document.contains(window.passwordInputRef)) {
                    passwordInput = window.passwordInputRef;
                } else if (!passwordInput) {
                    // Re-find input
                    const allInputs = document.querySelectorAll('input[type="password"], input[type="text"]');
                    for (let inp of allInputs) {
                        const wrapper = inp.closest('.fi-input-wrp');
                        if (wrapper) {
                            const label = wrapper.querySelector('label');
                            if (label && (label.textContent.trim() === 'Password' || label.textContent.trim() === 'Password*')) {
                                passwordInput = inp;
                                break;
                            }
                        }
                    }
                }
                
                if (!passwordInput) {
                    console.log('Password input not found for toggle');
                    return;
                }
                
                console.log('Toggling password, current type:', passwordInput.type);
                
                const wrapper = passwordInput.closest('.fi-input-wrp');
                if (!wrapper) return;
                
                // Find Alpine.js data - try multiple methods
                let alpineData = null;
                
                // Method 1: Try Alpine.$data
                if (window.Alpine && typeof window.Alpine.$data === 'function') {
                    try {
                        alpineData = window.Alpine.$data(wrapper);
                    } catch(e) {}
                }
                
                // Method 2: Try __x (Alpine v2)
                if (!alpineData && wrapper.__x) {
                    alpineData = wrapper.__x;
                }
                
                // Method 3: Try _x_dataStack (Alpine v3)
                if (!alpineData && wrapper._x_dataStack && wrapper._x_dataStack.length > 0) {
                    alpineData = wrapper._x_dataStack[0];
                }
                
                // Method 4: Try to find parent with Alpine data
                if (!alpineData) {
                    let parent = wrapper.parentElement;
                    while (parent && parent !== document.body) {
                        if (parent.__x) {
                            alpineData = parent.__x;
                            break;
                        }
                        if (parent._x_dataStack && parent._x_dataStack.length > 0) {
                            alpineData = parent._x_dataStack[0];
                            break;
                        }
                        parent = parent.parentElement;
                    }
                }
                
                // Determine new state - toggle based on current type
                const currentType = passwordInput.type || passwordInput.getAttribute('type') || 'password';
                const shouldReveal = currentType === 'password';
                const newType = shouldReveal ? 'text' : 'password';
                
                console.log('Toggling password - Current type:', currentType, 'New type:', newType);
                
                // Update Alpine variable if available
                if (alpineData && typeof alpineData.isPasswordRevealed !== 'undefined') {
                    alpineData.isPasswordRevealed = shouldReveal;
                    console.log('Updated Alpine isPasswordRevealed to:', shouldReveal);
                }
                
                // Remove all Alpine bindings that might interfere
                const alpineAttrs = ['x-bind:type', 'x-model', ':type'];
                alpineAttrs.forEach(attr => {
                    if (passwordInput.hasAttribute(attr)) {
                        passwordInput.removeAttribute(attr);
                    }
                });
                
                // For disabled fields, we need to temporarily enable to change type
                const wasDisabled = passwordInput.disabled;
                if (wasDisabled) {
                    passwordInput.disabled = false;
                }
                
                // Force type change - set both property and attribute
                passwordInput.type = newType;
                passwordInput.setAttribute('type', newType);
                
                // Set value - when type is text, show dots as plain text
                passwordInput.value = '••••••••';
                passwordInput.setAttribute('value', '••••••••');
                
                // Re-disable if it was disabled
                if (wasDisabled) {
                    passwordInput.disabled = true;
                }
                
                // Use a more aggressive approach - create overlay for revealed state
                // wrapper is already declared above, so we don't redeclare it
                if (!wrapper) return;
                
                // Remove existing overlay if any
                const existingOverlay = wrapper.querySelector('.password-reveal-overlay');
                if (existingOverlay) {
                    existingOverlay.remove();
                }
                
                if (shouldReveal) {
                    // Get input's position and dimensions
                    const inputRect = passwordInput.getBoundingClientRect();
                    const wrapperRect = wrapper.getBoundingClientRect();
                    
                    // Create overlay to show the password value
                    const overlay = document.createElement('div');
                    overlay.className = 'password-reveal-overlay';
                    overlay.textContent = '••••••••';
                    
                    // Calculate position relative to wrapper
                    const topOffset = inputRect.top - wrapperRect.top;
                    const leftOffset = inputRect.left - wrapperRect.left;
                    
                    overlay.style.cssText = `
                        position: absolute;
                        left: ${leftOffset}px;
                        top: ${topOffset}px;
                        width: ${inputRect.width}px;
                        height: ${inputRect.height}px;
                        display: flex;
                        align-items: center;
                        padding-left: 0.75rem;
                        padding-right: 0.75rem;
                        pointer-events: none;
                        font-family: monospace;
                        font-size: 1rem;
                        line-height: 1.5rem;
                        color: rgb(17, 24, 39) !important;
                        background-color: #f9fafb !important;
                        z-index: 1000;
                        opacity: 0.6;
                        box-sizing: border-box;
                    `;
                    
                    // Ensure wrapper has relative positioning
                    const wrapperStyle = window.getComputedStyle(wrapper);
                    if (wrapperStyle.position === 'static') {
                        wrapper.style.position = 'relative';
                    }
                    
                    wrapper.appendChild(overlay);
                    
                    // Hide the actual input when revealed
                    passwordInput.style.opacity = '0';
                    passwordInput.style.position = 'absolute';
                    passwordInput.style.width = '1px';
                    passwordInput.style.height = '1px';
                    passwordInput.style.overflow = 'hidden';
                    passwordInput.style.pointerEvents = 'none';
                    
                    console.log('Password revealed via overlay - Position:', { top: topOffset, left: leftOffset, width: inputRect.width, height: inputRect.height });
                } else {
                    // Remove overlay if exists
                    const existingOverlay = wrapper.querySelector('.password-reveal-overlay');
                    if (existingOverlay) {
                        existingOverlay.remove();
                    }
                    
                    // Show the actual input when hidden
                    passwordInput.style.opacity = '';
                    passwordInput.style.position = '';
                    passwordInput.style.width = '';
                    passwordInput.style.height = '';
                    passwordInput.style.overflow = '';
                    passwordInput.style.pointerEvents = '';
                    
                    // Ensure type is password
                    passwordInput.type = 'password';
                    passwordInput.setAttribute('type', 'password');
                    
                    console.log('Password hidden - using input field');
                }
                
                // Also update the type for consistency
                passwordInput.type = newType;
                passwordInput.setAttribute('type', newType);
                
                // Re-disable if needed
                if (wasDisabled) {
                    passwordInput.disabled = true;
                }
                
                // Cache reference
                window.passwordInputRef = passwordInput;
                
                console.log('Password toggled - Type:', newType, 'Revealed:', shouldReveal);
            }
            
            function setupPasswordToggle() {
                // Method 1: Find by label "Password" in Login details section
                const sections = document.querySelectorAll('section, .fi-section, [class*="section"]');
                for (let section of sections) {
                    const sectionText = section.textContent || '';
                    if (sectionText.includes('Login details')) {
                        const labels = section.querySelectorAll('label');
                        for (let label of labels) {
                            const labelText = label.textContent.trim();
                            if (labelText === 'Password' || labelText === 'Password*') {
                                // Find the input wrapper
                                let wrapper = label.closest('.fi-input-wrp');
                                if (!wrapper) {
                                    wrapper = label.closest('.fi-fo-field-wrapper')?.querySelector('.fi-input-wrp');
                                }
                                if (!wrapper) {
                                    // Try parent
                                    let parent = label.parentElement;
                                    while (parent && parent !== section) {
                                        wrapper = parent.querySelector('.fi-input-wrp');
                                        if (wrapper) break;
                                        parent = parent.parentElement;
                                    }
                                }
                                
                                if (wrapper) {
                                    passwordInput = wrapper.querySelector('input[type="password"], input[type="text"]');
                                    if (passwordInput) {
                                        console.log('Found password input by label in Login details');
                                        break;
                                    }
                                }
                            }
                        }
                        if (passwordInput) break;
                    }
                }
                
                // Method 2: Find all password inputs and check their labels
                if (!passwordInput) {
                    const allInputs = document.querySelectorAll('input[type="password"], input[type="text"]');
                    for (let inp of allInputs) {
                        const wrapper = inp.closest('.fi-input-wrp');
                        if (wrapper) {
                            const label = wrapper.querySelector('label');
                            if (label) {
                                const labelText = label.textContent.trim();
                                if (labelText === 'Password' || labelText === 'Password*') {
                                    // Check if it's in Login details section
                                    const section = wrapper.closest('section, .fi-section, [class*="section"]');
                                    if (section && section.textContent.includes('Login details')) {
                                        passwordInput = inp;
                                        console.log('Found password input by checking all inputs');
                                        break;
                                    }
                                }
                            }
                        }
                    }
                }
                
                if (!passwordInput) {
                    console.log('Password input not found');
                    return false;
                }
                
                console.log('Password input found:', passwordInput);
                
                const wrapper = passwordInput.closest('.fi-input-wrp');
                if (!wrapper) {
                    console.log('Wrapper not found');
                    return false;
                }
                
                // Find reveal button
                const buttons = Array.from(wrapper.querySelectorAll('button'));
                revealButton = null;
                
                for (let btn of buttons) {
                    const btnText = (btn.textContent || '').trim();
                    if (btnText.includes('Change password')) continue;
                    if (btn.querySelector('svg')) {
                        revealButton = btn;
                        console.log('Found reveal button by SVG');
                        break;
                    }
                }
                
                if (!revealButton) {
                    revealButton = wrapper.querySelector('button.fi-input-wrp-action');
                    if (revealButton) {
                        console.log('Found reveal button by class');
                    }
                }
                
                if (!revealButton) {
                    console.log('Reveal button not found');
                    return false;
                }
                
                console.log('Reveal button found:', revealButton);
                
                // Make button clickable
                revealButton.style.cssText = 'pointer-events: auto !important; cursor: pointer !important; z-index: 9999 !important; position: relative !important;';
                
                // Remove all Alpine.js attributes from button to prevent interference
                const alpineAttrs = ['x-on:click', 'x-show', '@click', 'x-bind'];
                alpineAttrs.forEach(attr => {
                    if (revealButton.hasAttribute(attr)) {
                        revealButton.removeAttribute(attr);
                    }
                });
                
                // Remove existing listeners by cloning
                const newBtn = revealButton.cloneNode(true);
                revealButton.parentNode.replaceChild(newBtn, revealButton);
                revealButton = newBtn;
                
                // Store current reveal state
                let isRevealed = false;
                
                // Update button icon based on state
                function updateButtonIcon() {
                    const svg = revealButton.querySelector('svg');
                    if (svg) {
                        // Toggle between eye-open and eye-closed icons
                        const path = svg.querySelector('path');
                        if (path) {
                            if (isRevealed) {
                                // Eye closed icon (hide)
                                path.setAttribute('d', 'M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21');
                            } else {
                                // Eye open icon (show)
                                path.setAttribute('d', 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z');
                            }
                        }
                        revealButton.setAttribute('title', isRevealed ? 'Hide password' : 'Show password');
                    }
                }
                
                // Add click handler with highest priority
                revealButton.addEventListener('click', function(e) {
                    console.log('Reveal button clicked!');
                    e.preventDefault();
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    
                    // Toggle state
                    isRevealed = !isRevealed;
                    updateButtonIcon();
                    
                    // Toggle password visibility
                    togglePassword();
                    return false;
                }, true);
                
                // Also add mousedown for better compatibility
                revealButton.addEventListener('mousedown', function(e) {
                    console.log('Reveal button mousedown!');
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }, true);
                
                // Initialize button icon
                updateButtonIcon();
                
                console.log('Password toggle setup complete');
                return true;
            }
            
            function init() {
                if (isInitialized) return;
                
                passwordInput = null;
                revealButton = null;
                
                let attempts = 0;
                const interval = setInterval(function() {
                    attempts++;
                    if (setupPasswordToggle()) {
                        isInitialized = true;
                        clearInterval(interval);
                        console.log('Password toggle initialized successfully');
                    } else if (attempts >= 30) {
                        clearInterval(interval);
                        console.log('Failed to initialize after', attempts, 'attempts');
                    }
                }, 200);
            }
            
            // Initialize
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', function() {
                    setTimeout(init, 1000);
                });
            } else {
                setTimeout(init, 1000);
            }
            
            // Re-initialize on Livewire updates
            if (typeof Livewire !== 'undefined') {
                document.addEventListener('livewire:load', function() {
                    isInitialized = false;
                    setTimeout(init, 1000);
                });
                
                Livewire.hook('message.processed', function() {
                    isInitialized = false;
                    setTimeout(init, 1000);
                });
            }
            
            // Watch for DOM changes
            const observer = new MutationObserver(function() {
                if (!isInitialized) {
                    setTimeout(init, 500);
                }
            });
            observer.observe(document.body, { childList: true, subtree: true });
        })();
    </script>

    <!-- Slide-out Panel for Admin Users -->
    <div class="admin-user-panel-overlay" id="admin-user-panel-overlay">
        <div class="admin-user-panel" id="admin-user-panel">
            <div class="panel-header">
                <h3 id="panel-title">Create Admin User</h3>
                <button type="button" class="panel-close" id="panel-close-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
            </div>
            <div class="panel-body">
                <form id="admin-user-form">
                    <input type="hidden" id="admin-user-id" value="">
                    <input type="hidden" id="admin-user-mode" value="create">
                    <div class="form-section">
                        <h4 class="form-section-title">User Information</h4>
                        <div class="form-row">
                            <div class="panel-form-group"><label>Full Name <span class="required">*</span></label><input type="text" id="admin-user-name" placeholder="Enter full name" required></div>
                            <div class="panel-form-group"><label>Email Address <span class="required">*</span></label><input type="email" id="admin-user-email" placeholder="Enter email address" required></div>
                        </div>
                        <div class="form-row">
                            <div class="panel-form-group"><label>Mobile Number</label><input type="text" id="admin-user-mobile" placeholder="Enter mobile number"></div>
                            <div class="panel-form-group"><label>Password <span class="required" id="password-required">*</span></label><div class="password-input-wrapper"><input type="password" id="admin-user-password" placeholder="Enter password"><button type="button" class="password-toggle" id="password-toggle-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg></button></div><p class="form-hint" id="password-hint">Min 8 chars</p></div>
                        </div>
                        <div class="panel-form-group"><label>Status</label><select id="admin-user-status"><option value="1">Active</option><option value="0">Inactive</option></select></div>
                    </div>
                    <div class="form-section" id="modules-section">
                        <div class="modules-permission-card">
                            <h4 class="modules-permission-title">Select dashboard permissions for this account <span class="required">*</span></h4>
                            <p class="modules-permission-subtitle">Choose all applicable sections below.</p>
                            <div id="modules-list"><div class="loading-business-units"><div class="loading-spinner-small"></div>Loading modules...</div></div>
                        </div>
                    </div>
                    <div class="form-section" id="business-unit-section">
                        <h4 class="form-section-title">Business Unit Access <span class="required">*</span></h4>
                        <p class="form-section-hint">Select the business units this user can access</p>
                        <div class="business-unit-multiselect-wrapper" id="business-unit-multiselect-wrapper">
                            <div class="business-unit-multiselect" id="business-unit-multiselect">
                                <div class="bu-multi-select-trigger" id="bu-multi-select-trigger">
                                    <div class="bu-tags-container" id="bu-tags-container"></div>
                                    <span class="bu-placeholder" id="bu-placeholder">Select business units...</span>
                                    <svg class="bu-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <polyline points="6 9 12 15 18 9"></polyline>
                                    </svg>
                                </div>
                                <div class="bu-multi-select-dropdown" id="bu-multi-select-dropdown" style="display: none;">
                                    <div class="bu-multi-select-search">
                                        <input type="text" id="bu-search-input" placeholder="Search business units..." class="bu-search-input">
                                    </div>
                                    <div class="bu-multi-select-options" id="bu-multi-select-options">
                                        <div class="loading-business-units"><div class="loading-spinner-small"></div>Loading business units...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="panel-footer">
                <button type="button" class="btn-cancel" id="panel-cancel-btn">Cancel</button>
                <button type="button" class="btn-submit" id="panel-submit-btn">Create User</button>
            </div>
            <!-- Loading Overlay for Panel -->
            <div class="panel-loading-overlay" id="panel-loading-overlay" style="display: none;">
                <div class="loading-spinner"></div>
                <span>Loading user data...</span>
            </div>
        </div>
    </div>
</x-filament-panels::page>

@push('scripts')
<script>
(function() {
    let currentPage = 1, perPage = 10, sortColumn = 'created_at', sortDirection = 'desc', searchQuery = '', searchTimeout = null, businessUnits = [], modules = [], groupedModules = {}, isAdminInitialized = false;

    function initAdminAccounts() {
        if (isAdminInitialized) return;
        const container = document.querySelector('.admin-accounts-container');
        if (!container) return;
        isAdminInitialized = true;
        setupAdminEventListeners();
        loadAdminUsers();
        // Don't load business units/modules on init - load them when panel opens
        // loadBusinessUnits();
        // loadModules();
    }

    function setupAdminEventListeners() {
        document.getElementById('btn-create-admin-user')?.addEventListener('click', () => openPanel('create'));
        document.getElementById('admin-users-search')?.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => { searchQuery = this.value; currentPage = 1; loadAdminUsers(); }, 300);
        });
        document.getElementById('admin-users-per-page')?.addEventListener('change', function() { perPage = parseInt(this.value); currentPage = 1; loadAdminUsers(); });
        document.getElementById('pagination-prev')?.addEventListener('click', () => { if (currentPage > 1) { currentPage--; loadAdminUsers(); } });
        document.getElementById('pagination-next')?.addEventListener('click', () => { currentPage++; loadAdminUsers(); });
        document.getElementById('admin-user-panel-overlay')?.addEventListener('click', function(e) { if (e.target === this) closePanel(); });
        document.getElementById('panel-close-btn')?.addEventListener('click', closePanel);
        document.getElementById('panel-cancel-btn')?.addEventListener('click', closePanel);
        document.getElementById('panel-submit-btn')?.addEventListener('click', handleFormSubmit);
        document.getElementById('password-toggle-btn')?.addEventListener('click', function() {
            const inp = document.getElementById('admin-user-password');
            inp.type = inp.type === 'password' ? 'text' : 'password';
        });
        document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closePanel(); });
    }

    async function loadAdminUsers() {
        const loading = document.getElementById('admin-users-loading'), tbody = document.getElementById('admin-users-tbody'), empty = document.getElementById('admin-users-empty'), table = document.getElementById('admin-users-table');
        if (loading) loading.style.display = 'flex';
        if (empty) empty.style.display = 'none';
        try {
            const response = await fetch(`/admin/account/admin-users?page=${currentPage}&per_page=${perPage}&sort_column=${sortColumn}&sort_direction=${sortDirection}&search=${searchQuery}`);
            const data = await response.json();
            if (data.success) {
                renderTable(data.data);
                renderPagination(data);
                if (data.data.length === 0) { if (empty) empty.style.display = 'flex'; if (table) table.style.display = 'none'; }
                else { if (table) table.style.display = 'table'; }
            }
        } catch (error) { console.error('Error loading admin users:', error); }
        finally { if (loading) loading.style.display = 'none'; }
    }

    function renderTable(users) {
        const tbody = document.getElementById('admin-users-tbody');
        if (!tbody) return;
        tbody.innerHTML = users.map(user => `<tr><td><span class="user-name">${escapeHtml(user.name)}</span></td><td>${escapeHtml(user.email)}</td><td>${escapeHtml(user.mobile)}</td><td>${renderBuBadges(user.business_unit_ids)}</td><td><span class="status-badge ${user.status == 1 ? 'active' : 'inactive'}">${user.status_label}</span></td><td>${escapeHtml(user.created_at)}</td><td><div class="action-buttons"><button class="action-btn edit" onclick="window.adminAccounts.editUser(${user.id})"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button><button class="action-btn delete" onclick="window.adminAccounts.deleteUser(${user.id}, '${escapeHtml(user.name).replace(/'/g, "\\'")}')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button></div></td></tr>`).join('');
    }

    function renderBuBadges(buIds) {
        if (!buIds) return '<span style="color:#9ca3af">None</span>';
        const ids = buIds.split(',').filter(id => id.trim());
        if (ids.length === 0) return '<span style="color:#9ca3af">None</span>';
        return ids.slice(0,2).map(id => { const bu = businessUnits.find(b => b.id.toString() === id.trim()); return `<span class="bu-badge">${bu ? bu.short_code || bu.name : 'BU-'+id}</span>`; }).join('') + (ids.length > 2 ? `<span class="bu-badge" style="background:#f3f4f6;color:#6b7280">+${ids.length-2}</span>` : '');
    }

    function renderPagination(data) {
        document.getElementById('pagination-start').textContent = data.data.length > 0 ? ((data.page - 1) * data.per_page) + 1 : 0;
        document.getElementById('pagination-end').textContent = Math.min(data.page * data.per_page, data.filtered);
        document.getElementById('pagination-total').textContent = data.filtered;
        document.getElementById('pagination-prev').disabled = data.page <= 1;
        document.getElementById('pagination-next').disabled = data.page >= data.total_pages;
        const pagesContainer = document.getElementById('pagination-pages');
        let html = '';
        for (let i = Math.max(1, data.page - 2); i <= Math.min(data.total_pages, data.page + 2); i++) {
            html += `<button class="page-btn ${i === data.page ? 'active' : ''}" onclick="window.adminAccounts.goToPage(${i})">${i}</button>`;
        }
        pagesContainer.innerHTML = html;
    }

    async function loadBusinessUnits() {
        const optionsContainer = document.getElementById('bu-multi-select-options');
        if (!optionsContainer) {
            console.warn('Business units container not found');
            return Promise.resolve();
        }
        
        // Show loading state
        optionsContainer.innerHTML = '<div class="loading-business-units"><div class="loading-spinner-small"></div>Loading business units...</div>';
        
        try {
            const response = await fetch('/admin/account/business-units');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            
            console.log('Business units response:', data);
            
            if (data.success && data.business_units) {
                businessUnits = data.business_units;
                console.log('Loaded business units:', businessUnits.length);
                renderBusinessUnitsMultiSelect();
                setupBusinessUnitMultiSelect();
            } else {
                optionsContainer.innerHTML = '<div class="loading-business-units">No business units available</div>';
                console.warn('No business units in response:', data.message || 'Unknown error');
            }
            return Promise.resolve();
        } catch (error) {
            console.error('Error loading business units:', error);
            optionsContainer.innerHTML = '<div class="loading-business-units">Error loading business units. Please try again.</div>';
            return Promise.resolve();
        }
    }

    let selectedBusinessUnits = [];
    let businessUnitMultiSelectOpen = false;

    function renderBusinessUnitsMultiSelect() {
        const optionsContainer = document.getElementById('bu-multi-select-options');
        if (!optionsContainer) return;
        
        if (businessUnits.length === 0) {
            optionsContainer.innerHTML = '<div class="loading-business-units">No business units available</div>';
            updateBusinessUnitTags();
            updateBusinessUnitPlaceholder();
            return;
        }
        
        console.log('Rendering business units:', businessUnits);
        optionsContainer.innerHTML = businessUnits.map(bu => {
            const isSelected = selectedBusinessUnits.some(s => s.id === bu.id);
            const name = escapeHtml(bu.name || 'Unnamed');
            const code = bu.short_code ? ` (${escapeHtml(bu.short_code)})` : '';
            return `<div class="bu-option ${isSelected ? 'selected' : ''}" data-bu-id="${bu.id}" data-bu-name="${escapeHtml(bu.name || 'Unnamed')}" data-bu-code="${escapeHtml(bu.short_code || '')}">
                <input type="checkbox" value="${bu.id}" ${isSelected ? 'checked' : ''}>
                <span class="bu-option-label">${name}${code}</span>
            </div>`;
        }).join('');
        
        // Add click handlers using event delegation
        optionsContainer.querySelectorAll('.bu-option input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const option = this.closest('.bu-option');
                const buId = parseInt(option.dataset.buId);
                const buName = option.dataset.buName;
                const buCode = option.dataset.buCode;
                console.log('Checkbox changed:', { buId, buName, buCode, checked: this.checked });
                toggleBusinessUnit(buId, buName, buCode);
            });
        });
        
        // Add click handlers to options
        optionsContainer.querySelectorAll('.bu-option').forEach(option => {
            option.addEventListener('click', function(e) {
                e.stopPropagation();
                // Toggle checkbox when clicking on the option row (not the checkbox itself)
                const checkbox = this.querySelector('input[type="checkbox"]');
                if (checkbox && e.target !== checkbox) {
                    checkbox.checked = !checkbox.checked;
                    const buId = parseInt(this.dataset.buId);
                    const buName = this.dataset.buName;
                    const buCode = this.dataset.buCode;
                    console.log('Option clicked:', { buId, buName, buCode, checked: checkbox.checked });
                    toggleBusinessUnit(buId, buName, buCode);
                }
            });
        });
        
        updateBusinessUnitTags();
        
        // Ensure setup is called (only runs once due to flag)
        setupBusinessUnitMultiSelect();
    }

    function toggleBusinessUnit(buId, name, code) {
        console.log('toggleBusinessUnit called:', { buId, name, code });
        const index = selectedBusinessUnits.findIndex(bu => bu.id === buId);
        const option = document.querySelector(`.bu-option[data-bu-id="${buId}"]`);
        
        if (index > -1) {
            selectedBusinessUnits.splice(index, 1);
            if (option) {
                option.classList.remove('selected');
            }
        } else {
            selectedBusinessUnits.push({ id: buId, name: name, code: code });
            if (option) {
                option.classList.add('selected');
            }
        }
        
        console.log('selectedBusinessUnits after toggle:', selectedBusinessUnits);
        updateBusinessUnitTags();
        
        // Clear business unit error if at least one is selected
        if (selectedBusinessUnits.length > 0) {
            const trigger = document.getElementById('bu-multi-select-trigger');
            const wrapper = document.getElementById('business-unit-multiselect-wrapper');
            if (trigger) trigger.classList.remove('has-error');
            if (wrapper) {
                const error = wrapper.querySelector('.field-error');
                if (error) error.remove();
            }
        }
    }

    function updateBusinessUnitTags() {
        console.log('updateBusinessUnitTags called, selectedBusinessUnits:', selectedBusinessUnits);
        const tagsContainer = document.getElementById('bu-tags-container');
        const placeholder = document.getElementById('bu-placeholder');
        console.log('tagsContainer:', tagsContainer, 'placeholder:', placeholder);
        
        if (!tagsContainer || !placeholder) {
            console.error('Tags container or placeholder not found!');
            return;
        }
        
        if (selectedBusinessUnits.length === 0) {
            tagsContainer.innerHTML = '';
            placeholder.style.display = 'block';
            placeholder.classList.remove('has-selection');
            return;
        }
        
        placeholder.style.display = 'none';
        placeholder.classList.add('has-selection');
        
        const tagsHTML = selectedBusinessUnits.map(bu => {
            console.log('Creating tag for:', bu);
            return `<span class="bu-tag">${escapeHtml(bu.name)}<span class="bu-tag-remove" onclick="event.stopPropagation(); window.adminAccounts.removeBusinessUnit(${bu.id})">×</span></span>`;
        }).join('');
        
        console.log('tagsHTML:', tagsHTML);
        tagsContainer.innerHTML = tagsHTML;
        console.log('tagsContainer after update:', tagsContainer.innerHTML);
    }

    function updateBusinessUnitPlaceholder() {
        updateBusinessUnitTags();
    }

    function removeBusinessUnit(buId) {
        console.log('removeBusinessUnit called with buId:', buId);
        console.log('selectedBusinessUnits before:', selectedBusinessUnits);
        selectedBusinessUnits = selectedBusinessUnits.filter(bu => bu.id !== buId);
        console.log('selectedBusinessUnits after:', selectedBusinessUnits);
        
        // Update checkbox and option state
        const option = document.querySelector(`.bu-option[data-bu-id="${buId}"]`);
        if (option) {
            const checkbox = option.querySelector('input[type="checkbox"]');
            if (checkbox) checkbox.checked = false;
            option.classList.remove('selected');
        }
        
        updateBusinessUnitTags();
    }

    // Setup multi-select dropdown - use event delegation to avoid listener issues
    let buMultiSelectSetup = false;
    
    function setupBusinessUnitMultiSelect() {
        if (buMultiSelectSetup) return;
        buMultiSelectSetup = true;
        
        const wrapper = document.getElementById('business-unit-multiselect');
        if (!wrapper) return;
        
        // Use event delegation on the wrapper
        wrapper.addEventListener('click', function(e) {
            const trigger = document.getElementById('bu-multi-select-trigger');
            const dropdown = document.getElementById('bu-multi-select-dropdown');
            const searchInput = document.getElementById('bu-search-input');
            
            // Check if clicked on remove button
            if (e.target.classList.contains('bu-tag-remove')) {
                e.stopPropagation();
                return;
            }
            
            // Check if clicked inside dropdown (not trigger)
            if (dropdown && dropdown.contains(e.target) && !trigger.contains(e.target)) {
                e.stopPropagation();
                return;
            }
            
            // If clicked on trigger area (but not dropdown)
            if (trigger && trigger.contains(e.target) && !dropdown.contains(e.target)) {
                e.stopPropagation();
                e.preventDefault();
                
                businessUnitMultiSelectOpen = !businessUnitMultiSelectOpen;
                
                if (businessUnitMultiSelectOpen) {
                    trigger.classList.add('open');
                    dropdown.classList.add('show');
                    dropdown.style.display = 'flex';
                    
                    setTimeout(() => {
                        if (searchInput) {
                            searchInput.focus();
                            searchInput.select();
                        }
                    }, 50);
                } else {
                    trigger.classList.remove('open');
                    dropdown.classList.remove('show');
                    dropdown.style.display = 'none';
                }
            }
        });
        
        // Close on outside click
        document.addEventListener('click', function(e) {
            const trigger = document.getElementById('bu-multi-select-trigger');
            const dropdown = document.getElementById('bu-multi-select-dropdown');
            const wrapper = document.getElementById('business-unit-multiselect');
            
            if (wrapper && !wrapper.contains(e.target)) {
                businessUnitMultiSelectOpen = false;
                if (trigger) trigger.classList.remove('open');
                if (dropdown) {
                    dropdown.classList.remove('show');
                    dropdown.style.display = 'none';
                }
            }
        });
        
        // Search functionality - use event delegation
        wrapper.addEventListener('input', function(e) {
            if (e.target.id === 'bu-search-input') {
                const dropdown = document.getElementById('bu-multi-select-dropdown');
                const searchTerm = e.target.value.toLowerCase();
                const options = dropdown.querySelectorAll('.bu-option');
                let visibleCount = 0;
                
                options.forEach(option => {
                    const label = option.querySelector('.bu-option-label');
                    if (label) {
                        const labelText = label.textContent.toLowerCase();
                        if (labelText.includes(searchTerm)) {
                            option.style.display = 'flex';
                            visibleCount++;
                        } else {
                            option.style.display = 'none';
                        }
                    }
                });
                
                // Show message if no results
                let noResults = dropdown.querySelector('.bu-no-results');
                if (visibleCount === 0 && searchTerm) {
                    if (!noResults) {
                        const noResultsDiv = document.createElement('div');
                        noResultsDiv.className = 'bu-no-results';
                        noResultsDiv.style.cssText = 'padding: 1rem; text-align: center; color: #9ca3af; font-size: 0.875rem;';
                        noResultsDiv.textContent = 'No business units found';
                        dropdown.querySelector('.bu-multi-select-options').appendChild(noResultsDiv);
                    }
                } else if (noResults) {
                    noResults.remove();
                }
            }
        });
        
        // Prevent Enter key from submitting form
        wrapper.addEventListener('keydown', function(e) {
            if (e.target.id === 'bu-search-input' && e.key === 'Enter') {
                e.preventDefault();
                e.stopPropagation();
            }
        });
    }

    // Expose functions globally
    window.adminAccounts = window.adminAccounts || {};
    window.adminAccounts.toggleBusinessUnit = toggleBusinessUnit;
    window.adminAccounts.removeBusinessUnit = removeBusinessUnit;

    async function loadModules() {
        try {
            const response = await fetch('/admin/account/modules');
            const data = await response.json();
            if (data.success) { modules = data.modules; groupedModules = data.grouped_modules; renderModulesCheckboxes(); }
        } catch (error) { console.error('Error loading modules:', error); }
    }

    function renderModulesCheckboxes() {
        const container = document.getElementById('modules-list');
        if (!container) return;
        if (Object.keys(groupedModules).length === 0) { container.innerHTML = '<div class="loading-business-units">No modules available</div>'; return; }
        let html = '';
        for (const [groupKey, groupData] of Object.entries(groupedModules)) {
            const groupName = groupData.name || groupKey;
            const modules = groupData.modules || [];
            if (modules.length === 0) continue;
            html += `<div class="module-group" data-group="${groupKey}">`;
            html += `<label class="module-parent-checkbox"><input type="checkbox" class="module-parent" data-group="${groupKey}"><span class="module-parent-label">${escapeHtml(groupName)}</span></label>`;
            html += `<div class="module-children">`;
            html += modules.map(m => `<label class="module-child-checkbox"><input type="checkbox" class="module-child" name="modules" value="${m.id}" data-group="${groupKey}"><span class="module-child-label">${escapeHtml(m.name)}</span></label>`).join('');
            html += '</div></div>';
        }
        container.innerHTML = html;
        
        // Add event listeners for parent-child selection
        setTimeout(() => {
            setupModuleSelectionHandlers();
            // Set initial active states for any pre-checked items
            document.querySelectorAll('.module-child:checked').forEach(cb => {
                const wrapper = cb.closest('.module-child-checkbox');
                if (wrapper) wrapper.classList.add('active');
            });
        }, 100);
    }

    function setupModuleSelectionHandlers() {
        // Remove existing listeners by cloning and replacing
        document.querySelectorAll('.module-parent').forEach(parentCb => {
            const newParent = parentCb.cloneNode(true);
            parentCb.parentNode.replaceChild(newParent, parentCb);
        });
        document.querySelectorAll('.module-child').forEach(childCb => {
            const newChild = childCb.cloneNode(true);
            childCb.parentNode.replaceChild(newChild, childCb);
        });

        // Parent checkbox - select/deselect all children
        document.querySelectorAll('.module-parent').forEach(parentCb => {
            parentCb.addEventListener('change', function() {
                const group = this.dataset.group;
                const children = document.querySelectorAll(`.module-child[data-group="${group}"]`);
                children.forEach(child => {
                    child.checked = this.checked;
                    const checkboxWrapper = child.closest('.module-child-checkbox');
                    if (checkboxWrapper) {
                        if (this.checked) {
                            checkboxWrapper.classList.add('active');
                        } else {
                            checkboxWrapper.classList.remove('active');
                        }
                    }
                });
                
                // Clear module section error if any module is selected
                const anySelected = document.querySelectorAll('#modules-list input.module-child:checked').length > 0;
                if (anySelected) {
                    const section = document.getElementById('modules-section');
                    if (section) {
                        section.classList.remove('has-error');
                        const error = section.querySelector('.section-error');
                        if (error) error.remove();
                    }
                }
            });
        });

        // Child checkbox - update parent state and toggle active class
        document.querySelectorAll('.module-child').forEach(childCb => {
            childCb.addEventListener('change', function() {
                const group = this.dataset.group;
                const parent = document.querySelector(`.module-parent[data-group="${group}"]`);
                if (!parent) return;
                const children = document.querySelectorAll(`.module-child[data-group="${group}"]`);
                const checkedChildren = document.querySelectorAll(`.module-child[data-group="${group}"]:checked`);
                
                // If any child is checked, check parent; if all unchecked, uncheck parent
                parent.checked = checkedChildren.length > 0;
                
                // Toggle active class on parent checkbox wrapper
                const checkboxWrapper = this.closest('.module-child-checkbox');
                if (checkboxWrapper) {
                    if (this.checked) {
                        checkboxWrapper.classList.add('active');
                    } else {
                        checkboxWrapper.classList.remove('active');
                    }
                }
                
                // Clear module section error if any module is selected
                const anySelected = document.querySelectorAll('#modules-list input.module-child:checked').length > 0;
                if (anySelected) {
                    const section = document.getElementById('modules-section');
                    if (section) {
                        section.classList.remove('has-error');
                        const error = section.querySelector('.section-error');
                        if (error) error.remove();
                    }
                }
            });
            
            // Set initial state
            const checkboxWrapper = childCb.closest('.module-child-checkbox');
            if (checkboxWrapper && childCb.checked) {
                checkboxWrapper.classList.add('active');
            }
        });
    }

    function openPanel(mode, userId = null) {
        const panel = document.getElementById('admin-user-panel-overlay');
        document.getElementById('admin-user-form')?.reset();
        document.getElementById('admin-user-id').value = userId || '';
        document.getElementById('admin-user-mode').value = mode;
        selectedBusinessUnits = [];
        document.querySelectorAll('#modules-list input.module-child').forEach(cb => cb.checked = false);
        document.querySelectorAll('#modules-list input.module-parent').forEach(cb => cb.checked = false);
        document.getElementById('panel-title').textContent = mode === 'create' ? 'Create Admin User' : 'Edit Admin User';
        document.getElementById('panel-submit-btn').textContent = mode === 'create' ? 'Create User' : 'Update User';
        document.getElementById('password-required').style.display = mode === 'create' ? 'inline' : 'none';
        document.getElementById('password-hint').textContent = mode === 'create' ? 'Min 8 chars' : 'Leave blank to keep current';
        
        // Close business unit dropdown if open
        businessUnitMultiSelectOpen = false;
        const trigger = document.getElementById('bu-multi-select-trigger');
        const dropdown = document.getElementById('bu-multi-select-dropdown');
        if (trigger) trigger.classList.remove('open');
        if (dropdown) {
            dropdown.classList.remove('show');
            dropdown.style.display = 'none';
        }
        
        // Clear tags and show placeholder
        const tagsContainer = document.getElementById('bu-tags-container');
        const placeholder = document.getElementById('bu-placeholder');
        if (tagsContainer) tagsContainer.innerHTML = '';
        if (placeholder) {
            placeholder.style.display = 'block';
            placeholder.classList.remove('has-selection');
        }
        
        // Reload business units and modules when panel opens
        if (mode === 'edit' && userId) {
            // Load business units first, then user data
            loadBusinessUnits().then(() => {
                loadUserData(userId);
                // Setup dropdown after data is loaded
                setTimeout(() => {
                    setupBusinessUnitMultiSelect();
                }, 200);
            });
        } else {
            loadBusinessUnits();
            // Setup dropdown after panel opens
            setTimeout(() => {
                setupBusinessUnitMultiSelect();
            }, 200);
        }
        loadModules();
        panel.classList.add('open');
        document.body.style.overflow = 'hidden';
        
        // Setup validation listeners
        setupValidationListeners();
    }

    function closePanel() {
        document.getElementById('admin-user-panel-overlay')?.classList.remove('open');
        document.body.style.overflow = '';
        
        // Hide panel loader
        const panelLoader = document.getElementById('panel-loading-overlay');
        if (panelLoader) panelLoader.style.display = 'none';
    }

    async function loadUserData(userId) {
        const panelLoader = document.getElementById('panel-loading-overlay');
        if (panelLoader) panelLoader.style.display = 'flex';
        
        try {
            const response = await fetch(`/admin/account/admin-users/${userId}`);
            const data = await response.json();
            if (data.success && data.user) {
                document.getElementById('admin-user-name').value = data.user.name || '';
                document.getElementById('admin-user-email').value = data.user.email || '';
                document.getElementById('admin-user-mobile').value = data.user.mobile || '';
                document.getElementById('admin-user-status').value = data.user.status || '1';
                // Load business_unit (preferred) or business_unit_ids (fallback)
                const buIds = data.user.business_unit || data.user.business_unit_ids;
                if (buIds) {
                    const ids = buIds.split(',').map(id => id.trim()).filter(id => id);
                    selectedBusinessUnits = [];
                    ids.forEach(id => {
                        const bu = businessUnits.find(b => b.id.toString() === id);
                        if (bu) {
                            selectedBusinessUnits.push({
                                id: bu.id,
                                name: bu.name,
                                code: bu.short_code || ''
                            });
                        }
                    });
                    renderBusinessUnitsMultiSelect();
                }
                if (data.user.user_access) {
                    const selectedModuleIds = data.user.user_access.split(',').map(id => id.trim());
                    selectedModuleIds.forEach(id => {
                        const cb = document.querySelector(`#modules-list input.module-child[value="${id}"]`);
                        if (cb) {
                            cb.checked = true;
                            const checkboxWrapper = cb.closest('.module-child-checkbox');
                            if (checkboxWrapper) {
                                checkboxWrapper.classList.add('active');
                            }
                        }
                    });
                    // Update parent checkboxes based on child selections - check parent if any child is checked
                    document.querySelectorAll('.module-group').forEach(group => {
                        const groupKey = group.dataset.group;
                        const checkedChildren = document.querySelectorAll(`.module-child[data-group="${groupKey}"]:checked`);
                        const parent = document.querySelector(`.module-parent[data-group="${groupKey}"]`);
                        if (parent) {
                            parent.checked = checkedChildren.length > 0;
                        }
                    });
                }
            }
        } catch (error) { 
            console.error('Error loading user data:', error); 
        } finally {
            const panelLoader = document.getElementById('panel-loading-overlay');
            if (panelLoader) panelLoader.style.display = 'none';
        }
    }

    // Validation helper functions
    function showFieldError(fieldId, message) {
        const field = document.getElementById(fieldId);
        if (!field) return;
        
        const formGroup = field.closest('.panel-form-group');
        if (formGroup) {
            formGroup.classList.add('has-error');
            
            // Remove existing error message
            const existingError = formGroup.querySelector('.field-error');
            if (existingError) existingError.remove();
            
            // Add new error message
            const errorDiv = document.createElement('span');
            errorDiv.className = 'field-error';
            errorDiv.textContent = message;
            field.parentNode.appendChild(errorDiv);
        }
    }
    
    function showSectionError(sectionSelector, message) {
        const section = document.querySelector(sectionSelector);
        if (!section) return;
        
        section.classList.add('has-error');
        
        // Remove existing error message
        const existingError = section.querySelector('.section-error');
        if (existingError) existingError.remove();
        
        // Add new error message
        const errorDiv = document.createElement('span');
        errorDiv.className = 'section-error';
        errorDiv.textContent = message;
        section.appendChild(errorDiv);
    }
    
    function showBusinessUnitError(message) {
        const trigger = document.getElementById('bu-multi-select-trigger');
        const wrapper = document.getElementById('business-unit-multiselect-wrapper');
        if (!trigger || !wrapper) return;
        
        trigger.classList.add('has-error');
        
        // Remove existing error message
        const existingError = wrapper.querySelector('.field-error');
        if (existingError) existingError.remove();
        
        // Add new error message
        const errorDiv = document.createElement('span');
        errorDiv.className = 'field-error';
        errorDiv.textContent = message;
        wrapper.appendChild(errorDiv);
    }
    
    function clearAllErrors() {
        // Remove all error classes
        document.querySelectorAll('.has-error').forEach(el => el.classList.remove('has-error'));
        
        // Remove all error messages
        document.querySelectorAll('.field-error, .section-error').forEach(el => el.remove());
    }
    
    function clearFieldError(fieldId) {
        const field = document.getElementById(fieldId);
        if (!field) return;
        
        const formGroup = field.closest('.panel-form-group');
        if (formGroup) {
            formGroup.classList.remove('has-error');
            const error = formGroup.querySelector('.field-error');
            if (error) error.remove();
        }
    }
    
    // Add event listeners to clear errors on input
    function setupValidationListeners() {
        ['admin-user-name', 'admin-user-email', 'admin-user-mobile', 'admin-user-password'].forEach(id => {
            const field = document.getElementById(id);
            if (field) {
                field.addEventListener('input', function() {
                    clearFieldError(id);
                });
            }
        });
    }

    async function handleFormSubmit() {
        // Clear previous errors
        clearAllErrors();
        
        const mode = document.getElementById('admin-user-mode').value;
        const userId = document.getElementById('admin-user-id').value;
        const submitBtn = document.getElementById('panel-submit-btn');
        
        const name = document.getElementById('admin-user-name').value.trim();
        const email = document.getElementById('admin-user-email').value.trim();
        const mobile = document.getElementById('admin-user-mobile').value.trim();
        const password = document.getElementById('admin-user-password').value;
        const status = document.getElementById('admin-user-status').value;
        
        const selectedBUIds = selectedBusinessUnits.map(bu => bu.id).join(',');
        const selectedModules = Array.from(document.querySelectorAll('#modules-list input.module-child:checked')).map(cb => cb.value);
        
        // Validation
        let hasError = false;
        
        if (!name) {
            showFieldError('admin-user-name', 'Full name is required');
            hasError = true;
        }
        
        if (!email) {
            showFieldError('admin-user-email', 'Email address is required');
            hasError = true;
        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            showFieldError('admin-user-email', 'Please enter a valid email address');
            hasError = true;
        }
        
        if (mode === 'create' && !password) {
            showFieldError('admin-user-password', 'Password is required');
            hasError = true;
        } else if (password && password.length < 8) {
            showFieldError('admin-user-password', 'Password must be at least 8 characters');
            hasError = true;
        }
        
        if (selectedModules.length === 0) {
            showSectionError('#modules-section', 'Please select at least one dashboard permission');
            hasError = true;
        }
        
        if (selectedBusinessUnits.length === 0) {
            showBusinessUnitError('Please select at least one business unit');
            hasError = true;
        }
        
        if (hasError) {
            // Scroll to first error
            const firstError = document.querySelector('.has-error');
            if (firstError) {
                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
            return;
        }
        
        submitBtn.disabled = true;
        submitBtn.textContent = mode === 'create' ? 'Creating...' : 'Updating...';
        
        try {
            const url = mode === 'create' ? '/admin/account/admin-users/create' : `/admin/account/admin-users/${userId}/update`;
            const formData = { 
                name, 
                email, 
                mobile, 
                status, 
                business_unit: selectedBUIds, 
                business_unit_ids: selectedBUIds, 
                user_access: selectedModules.join(',') 
            };
            if (password) formData.password = password;
            
            const response = await fetch(url, { 
                method: 'POST', 
                headers: { 
                    'Content-Type': 'application/json', 
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '' 
                }, 
                body: JSON.stringify(formData) 
            });
            
            const data = await response.json();
            
            if (data.success) {
                closePanel();
                loadAdminUsers();
                // Show success message in a better way
                showToast(data.message || 'User saved successfully!', 'success');
            } else {
                showToast(data.message || 'An error occurred', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showToast('An error occurred while saving the user', 'error');
        } finally {
            submitBtn.disabled = false;
            submitBtn.textContent = mode === 'create' ? 'Create User' : 'Update User';
        }
    }
    
    // Simple toast notification function
    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem 1.5rem;
            background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'};
            color: white;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            z-index: 99999;
            font-size: 0.875rem;
            max-width: 400px;
        `;
        toast.textContent = message;
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.style.transition = 'opacity 0.3s';
            toast.style.opacity = '0';
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }

    async function deleteUser(userId, userName) {
        if (!confirm(`Are you sure you want to delete "${userName}"?`)) return;
        try {
            const response = await fetch(`/admin/account/admin-users/${userId}/delete`, { 
                method: 'POST', 
                headers: { 
                    'Content-Type': 'application/json', 
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '' 
                } 
            });
            const data = await response.json();
            if (data.success) { 
                loadAdminUsers(); 
                showToast('User deleted successfully!', 'success'); 
            } else { 
                showToast(data.message || 'Failed to delete user', 'error'); 
            }
        } catch (error) { 
            showToast('Error deleting user', 'error'); 
        }
    }

    function escapeHtml(text) { if (!text) return ''; const div = document.createElement('div'); div.textContent = text; return div.innerHTML; }

    window.adminAccounts = window.adminAccounts || {};
    window.adminAccounts.editUser = (id) => openPanel('edit', id);
    window.adminAccounts.deleteUser = deleteUser;
    window.adminAccounts.goToPage = (p) => { currentPage = p; loadAdminUsers(); };

    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initAdminAccounts);
    else initAdminAccounts();

    if (typeof Livewire !== 'undefined') {
        Livewire.hook('message.processed', () => { isAdminInitialized = false; setTimeout(initAdminAccounts, 100); });
    }
    const adminObserver = new MutationObserver(() => { if (document.querySelector('.admin-accounts-container') && !isAdminInitialized) initAdminAccounts(); else if (!document.querySelector('.admin-accounts-container')) isAdminInitialized = false; });
    adminObserver.observe(document.body, { childList: true, subtree: true });
})();
</script>
@endpush