<!-- 0. DASHBOARD VIEW -->
<div id="view-dashboard" class="view-section h-full p-6 flex flex-col overflow-y-auto">
    <div id="dashboard-filters" class="mb-6 flex gap-3 flex-wrap items-end bg-gray-800/40 p-4 rounded-xl border border-gray-700/50 backdrop-blur-sm shadow-lg">
        <div id="dashboard-owner-filter-wrap" class="flex flex-col gap-1.5">
            <label class="text-[11px] font-bold text-gray-400 mr-1 flex items-center gap-1">
                <i class="fa-solid fa-user-tie text-blue-400"></i> فیلتر مسئول
            </label>
            <select id="dashboard-owner-filter" class="input bg-gray-900 border-gray-700 text-sm w-full md:w-64 focus:ring-blue-500/50" onchange="app.loadDashboard()">
                <option value="">همه مسئول‌ها (کل سیستم)</option>
            </select>
        </div>
        <div class="flex flex-col gap-1.5">
            <label class="text-[11px] font-bold text-gray-400 mr-1 flex items-center gap-1">
                <i class="fa-solid fa-circle-info text-yellow-400"></i> وضعیت معاملات
            </label>
            <select id="dashboard-status-filter" class="input bg-gray-900 border-gray-700 text-sm w-full md:w-48 focus:ring-yellow-500/50" onchange="app.loadDashboard()">
                <option value="all">همه وضعیت‌ها</option>
                <option value="Pending">جاری (در جریان)</option>
                <option value="Won">موفق (برنده شده)</option>
                <option value="Lost">ناموفق (باخته شده)</option>
            </select>
        </div>
        <button onclick="app.loadDashboard()" class="btn-primary h-[42px] px-6 rounded-lg text-sm transition-all hover:bg-blue-600 flex items-center gap-2">
            <i class="fa-solid fa-arrows-rotate"></i> بروزرسانی داشبورد
        </button>
    </div>
    <div id="dashboard-content"></div>
</div>

<!-- 0.1 PERFORMANCE DASHBOARD VIEW -->
<div id="view-performance-dashboard" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto">
    <div id="performance-dashboard-content"></div>
</div>

<!-- 1. LEADS VIEW -->
<div id="view-leads" class="view-section h-full p-6 hidden flex flex-col">
    <!-- Mobile: Filter Toggle Button -->
    <div class="mb-4 flex gap-3 flex-wrap items-center">
        <div class="flex gap-2 w-full md:w-auto flex-1">
            <input type="text" id="leads-search" placeholder="جستجو..." class="input flex-1 min-w-0 md:w-72 lg:w-80 touch-input" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            <button type="button" onclick="app.loadLeads(1)" class="btn-primary px-4 py-2 rounded text-sm whitespace-nowrap touch-input">
                <i class="fa-solid fa-magnifying-glass ml-1"></i> جستجو
            </button>
        </div>
        
        <!-- Mobile: Filter Toggle -->
        <button type="button" onclick="app.toggleFilters('leads')" class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2 touch-input mobile-only filter-toggle-btn">
            <i class="fa-solid fa-filter"></i>
            <span>فیلترها</span>
            <span id="leads-filter-count" class="filter-count-badge mobile-only hidden">0</span>
        </button>
        
        <?php if(isAdmin()): ?>
        <button onclick="app.openDidarSearchModal()" class="btn-primary px-4 py-2 rounded text-sm desktop-only">
            <i class="fa-solid fa-search ml-1"></i> جستجو در دیدار
        </button>
        <?php endif; ?>
    </div>
    
    <!-- Collapsible Filters Container -->
    <div id="leads-filters" class="filters-collapsible glass p-4 mb-4">
        <div class="flex justify-between items-center mb-4 mobile-only">
            <h3 class="font-bold text-white text-sm"><i class="fa-solid fa-filter ml-2"></i>فیلترهای لیدها</h3>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- Stage Filter -->
            <div>
                <label class="text-xs text-gray-400 mb-1 block">وضعیت فروش</label>
                <select id="leads-stage-filter" class="input bg-gray-800 w-full touch-input filter-input" onchange="app.onFilterChange('leads')">
                    <option value="all">همه لیدها</option>
                    <option value="success">موفق</option>
                    <option value="failed">ناموفق</option>
                </select>
            </div>
            
            <!-- Owner Filter -->
            <?php if(isAdminOrCrmSpecialist()): ?>
            <div>
                <label class="text-xs text-gray-400 mb-1 block">مسئول لید</label>
                <select id="leads-owner-filter" class="input bg-gray-800 w-full touch-input filter-input" onchange="app.onFilterChange('leads')">
                    <option value="">همه مسئول‌ها</option>
                </select>
            </div>
            <?php endif; ?>
            
            <!-- Register Date Range -->
            <div>
                <label class="text-xs text-gray-400 mb-1 block">از تاریخ ثبت</label>
                <input type="text" id="leads-register-from" class="input w-full touch-input filter-input" placeholder="۱۴۰۳/۰۱/۰۱" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            </div>
            <div>
                <label class="text-xs text-gray-400 mb-1 block">تا تاریخ ثبت</label>
                <input type="text" id="leads-register-to" class="input w-full touch-input filter-input" placeholder="۱۴۰۳/۱۲/۲۹" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            </div>
            
            <!-- Activity Date Range -->
            <div>
                <label class="text-xs text-gray-400 mb-1 block">از تاریخ فعالیت</label>
                <input type="text" id="leads-activity-from" class="input w-full touch-input filter-input" placeholder="۱۴۰۳/۰۱/۰۱" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            </div>
            <div>
                <label class="text-xs text-gray-400 mb-1 block">تا تاریخ فعالیت</label>
                <input type="text" id="leads-activity-to" class="input w-full touch-input filter-input" placeholder="۱۴۰۳/۱۲/۲۹" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            </div>
            
            <!-- Product Filter -->
            <div>
                <label class="text-xs text-gray-400 mb-1 block">محصول / خدمت</label>
                <select id="leads-product-filter" class="input bg-gray-800 w-full touch-input filter-input" onchange="app.onFilterChange('leads')">
                    <option value="">محصول / خدمت</option>
                </select>
            </div>
            
            <!-- Customer Level Filter -->
            <div>
                <label class="text-xs text-gray-400 mb-1 block">سطح مشتری</label>
                <select id="leads-customer-level-filter" class="input bg-gray-800 w-full touch-input filter-input" onchange="app.onFilterChange('leads')">
                    <option value="">سطح مشتری</option>
                    <option value="طلایی">طلایی</option>
                    <option value="نقره‌ای">نقره‌ای</option>
                    <option value="برنز">برنز</option>
                </select>
            </div>
        </div>
        
        <!-- Mobile: Sticky Action Buttons -->
        <div class="sticky-filter-actions mobile-only mt-4">
            <button onclick="app.clearAllFilters('leads')" class="clear-filters-btn flex-1">
                <i class="fa-solid fa-trash ml-1"></i>حذف فیلتر
            </button>
            <button onclick="app.applyFilters('leads')" class="btn-primary flex-1">
                <i class="fa-solid fa-check ml-1"></i>اعمال فیلتر
            </button>
        </div>
    </div>
    
    <!-- Desktop: Show action buttons inline -->
    <div class="mb-4 flex gap-2 flex-wrap desktop-only">
        <button type="button" id="leads-desktop-filter-toggle" onclick="app.toggleFilters('leads')" class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2">
            <i id="leads-desktop-filter-toggle-icon" class="fa-solid fa-chevron-down transition-transform"></i>
            <span id="leads-desktop-filter-toggle-text">نمایش فیلترها</span>
            <span id="leads-desktop-filter-count" class="filter-count-badge hidden">0</span>
        </button>
        <button type="button" onclick="app.openLocalMobileLookup()" class="btn-primary px-4 py-2 rounded text-sm">
            <i class="fa-solid fa-mobile-screen ml-1"></i> استعلام سریع شماره
        </button>
        <?php if(isAdmin()): ?>
        <button onclick="app.openDidarSearchModal()" class="btn-primary px-4 py-2 rounded text-sm">
            <i class="fa-solid fa-search ml-1"></i> جستجو در دیدار
        </button>
        <button type="button" onclick="app.openImportLeadsModal()" class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2">
            <i class="fa-solid fa-file-import"></i>
            ایمپورت از اکسل
        </button>
        <?php endif; ?>
        <button type="button" id="leads-add-btn" onclick="app.openLeadModal()" class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2">
            <i class="fa-solid fa-user-plus"></i>
            ثبت لید جدید
        </button>
        <button type="button" onclick="app.clearAllFilters('leads')" class="clear-filters-btn px-4 py-2 rounded text-sm">
            <i class="fa-solid fa-trash ml-1"></i>حذف فیلتر
        </button>
        <button onclick="app.loadLeads(1)" class="btn-primary px-6 rounded-lg">اعمال فیلتر</button>
    </div>
    
    <!-- Mobile: Bottom Sheet Filter Button (Alternative) - REMOVED -->
    <!-- <div class="mb-4 mobile-only">
        <button type="button" onclick="app.openBottomSheetFilters('leads')" class="w-full btn-primary py-3 rounded-lg touch-input">
            <i class="fa-solid fa-sliders ml-2"></i>
            فیلترهای پیشرفته
            <span id="leads-bottom-filter-count" class="filter-count-badge mobile-only hidden">0</span>
        </button>
    </div> -->
    
    <!-- Content Area -->
    <div class="flex-1 overflow-y-auto pb-24">
        <div id="leads-list" class="grid grid-cols-1 gap-4"></div>
        <div id="leads-pagination" class="pagination-spacer"></div>
    </div>
    
    <!-- Mobile: Sticky Pagination -->
    <div id="leads-sticky-pagination" class="sticky-pagination mobile-only hidden"></div>
</div>

<!-- 1.1 BLATAKLIF LEADS VIEW -->
<div id="view-blataklif-leads" class="view-section h-full p-6 hidden flex flex-col">
    <div class="mb-4 flex gap-3 flex-wrap">
        <input type="text" id="blataklif-leads-search" placeholder="جستجو..." class="input w-full md:w-72 lg:w-80" onkeypress="if(event.key==='Enter') app.loadBlataklifLeads(1)">
        <select id="blataklif-leads-sale-status-filter" class="input bg-gray-800 w-full md:w-48">
            <option value="all">همه</option>
            <option value="success">موفق</option>
            <option value="failed">ناموفق</option>
        </select>
        <button onclick="app.loadBlataklifLeads(1)" class="btn-primary px-6 rounded-lg">فیلتر</button>
        <div class="text-xs text-gray-400 flex items-center gap-2">
            <span class="px-2 py-1 bg-gray-800 rounded">این لیست از «لیدها» جداست</span>
        </div>
    </div>
    <div class="flex-1 overflow-y-auto pb-24">
        <div id="blataklif-leads-list" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"></div>
        <div id="blataklif-leads-pagination"></div>
    </div>
</div>

<!-- 2. DEALS VIEW -->
<div id="view-deals" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700/50 flex flex-col gap-4">
            <div class="flex justify-between items-center">
                <h3 class="font-bold text-yellow-500 text-lg flex items-center gap-2">
                    <i class="fa-solid fa-sack-dollar text-xl"></i>
                    لیست معاملات
                </h3>
                <span class="text-[10px] text-gray-500 bg-gray-800/50 px-2.5 py-1 rounded-full border border-gray-700/30">
                    <i class="fa-solid fa-cloud-arrow-down ml-1"></i>
                    مستقیم از دیدار
                </span>
            </div>
            
            <!-- Horizontal Filter Bar -->
            <div class="flex flex-wrap gap-3 items-center bg-gray-900/30 p-3 rounded-2xl border border-gray-800/50">
                <!-- Search -->
                <div class="relative flex-1 min-w-[200px]">
                    <i class="fa-solid fa-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs"></i>
                    <input type="text" id="deals-search" placeholder="جستجوی معامله یا مشتری..." 
                        class="input bg-gray-800/50 border-gray-700/50 pr-9 text-xs w-full focus:ring-yellow-500/30"
                        onkeypress="if(event.key==='Enter') app.loadDeals()">
                </div>

                <!-- Status Filter -->
                <div class="flex flex-col gap-1">
                    <select id="deals-status-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[120px] focus:ring-yellow-500/30" onchange="app.loadDeals()">
                        <option value="all">همه وضعیت‌ها</option>
                        <option value="pending">جاری</option>
                        <option value="won">موفق</option>
                        <option value="lost">ناموفق</option>
                    </select>
                </div>

                <!-- Stage Filter -->
                <div class="flex flex-col gap-1">
                    <select id="deals-pipeline-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[140px] focus:ring-yellow-500/30" onchange="app.loadDeals()">
                        <option value="all">همه مراحل کاریز</option>
                        <option value="بلاتکلیف">بلاتکلیف</option>
                        <option value="معامله جدید">معامله جدید</option>
                        <option value="تماس عدم پاسخ">تماس عدم پاسخ</option>
                        <option value="تماس پیگیری">تماس پیگیری</option>
                        <option value="ارسال لینک پرداخت">ارسال لینک پرداخت</option>
                        <option value="پرداخت">پرداخت</option>
                        <option value="پیگیری مانده حساب">پیگیری مانده حساب</option>
                        <option value="برگزاری دوره">برگزاری دوره</option>
                        <option value="پشتیبانی">پشتیبانی</option>
                        <option value="ارجاع به CRM">ارجاع به CRM</option>
                    </select>
                </div>

                <!-- Owner Filter (Admin only) -->
                <?php if(isAdminOrCrmSpecialist()): ?>
                <div class="flex flex-col gap-1">
                    <select id="deals-owner-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[140px] focus:ring-yellow-500/30" onchange="app.loadDeals()">
                        <option value="">همه مسئول‌ها</option>
                    </select>
                </div>
                <?php endif; ?>

                <!-- Date Filter -->
                <div class="flex gap-2">
                    <input type="text" id="deals-register-from" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 w-28 focus:ring-yellow-500/30" placeholder="از تاریخ ثبت" onkeypress="if(event.key==='Enter') app.loadDeals()">
                    <input type="text" id="deals-register-to" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 w-28 focus:ring-yellow-500/30" placeholder="تا تاریخ ثبت" onkeypress="if(event.key==='Enter') app.loadDeals()">
                </div>

                <div class="flex gap-2">
                    <input type="text" id="deals-activity-from" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 w-28 focus:ring-yellow-500/30" placeholder="از تاریخ فعالیت" onkeypress="if(event.key==='Enter') app.loadDeals()">
                    <input type="text" id="deals-activity-to" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 w-28 focus:ring-yellow-500/30" placeholder="تا تاریخ فعالیت" onkeypress="if(event.key==='Enter') app.loadDeals()">
                </div>

                <!-- Refresh Button -->
                <button onclick="app.loadDeals()" class="btn-primary h-9 px-4 rounded-xl text-xs transition-all hover:scale-105 flex items-center gap-2">
                    <i class="fa-solid fa-arrows-rotate"></i>
                    بروزرسانی
                </button>
            </div>

            <!-- Quick Filter Chips -->
            <div class="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
                <button onclick="app.setQuickStatusFilter('all')" class="quick-filter-chip active" data-status="all">همه</button>
                <button onclick="app.setQuickStatusFilter('pending')" class="quick-filter-chip" data-status="pending">جاری</button>
                <button onclick="app.setQuickStatusFilter('won')" class="quick-filter-chip" data-status="won">موفق</button>
                <button onclick="app.setQuickStatusFilter('lost')" class="quick-filter-chip" data-status="lost">ناموفق</button>
            </div>
        </div>
        <div class="overflow-y-auto p-4 pb-24">
            <div id="deals-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-5"></div>
        </div>
    </div>
</div>

<!-- Legacy Deals View -->
<div id="view-legacy-deals" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700 flex flex-col gap-4">
            <div class="flex justify-between items-center">
                <h3 class="font-bold text-purple-400 text-lg flex items-center gap-2">
                    <i class="fa-solid fa-clock-rotate-left text-xl"></i>
                    معاملات گذشته دیدار
                </h3>
                <span class="text-[10px] text-gray-500 bg-gray-800/50 px-2.5 py-1 rounded-full border border-gray-700/30">
                    فقط معاملات ایمپورت شده
                </span>
            </div>
            <div class="flex flex-wrap gap-3 items-center bg-gray-900/30 p-3 rounded-2xl border border-gray-800/50">
                <div class="relative flex-1 min-w-[200px]">
                    <i class="fa-solid fa-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs"></i>
                    <input type="text" id="legacy-deals-search" placeholder="جستجو در معاملات گذشته..."
                        class="input bg-gray-800/50 border-gray-700/50 pr-9 text-xs w-full focus:ring-yellow-500/30"
                        onkeypress="if(event.key==='Enter') app.loadLegacyDeals()">
                </div>

                <div class="flex flex-col gap-1">
                    <select id="legacy-deals-status-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[120px] focus:ring-yellow-500/30" onchange="app.loadLegacyDeals()">
                        <option value="all">همه وضعیت‌ها</option>
                        <option value="pending">در جریان</option>
                        <option value="won">موفق</option>
                        <option value="lost">ناموفق</option>
                    </select>
                </div>

                <?php if(isAdminOrCrmSpecialist()): ?>
                <div class="flex flex-col gap-1">
                    <select id="legacy-deals-owner-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[140px] focus:ring-yellow-500/30" onchange="app.loadLegacyDeals()">
                        <option value="">همه مسئول‌ها</option>
                    </select>
                </div>
                <?php endif; ?>

                <button onclick="app.loadLegacyDeals()" class="btn-primary h-9 px-4 rounded-xl text-xs transition-all hover:scale-105 flex items-center gap-2">
                    <i class="fa-solid fa-arrows-rotate"></i>
                    به‌روزرسانی
                </button>
            </div>
        </div>
        <div class="overflow-y-auto p-4 pb-24">
            <div id="legacy-deals-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-5"></div>
            <div id="legacy-deals-pagination" class="flex justify-center mt-6">
                <button id="legacy-deals-load-more" onclick="app.loadMoreLegacyDeals()" class="btn-primary px-6 py-2 rounded-lg hidden">
                    نمایش بیشتر
                </button>
            </div>
        </div>
    </div>
</div>

<?php if(isAdminOrCrmSpecialist()): ?>
<!-- 3. REFERRALS VIEW -->
<div id="view-referrals" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
            <h3 class="font-bold text-pink-500">ارجاع‌های به CRM</h3>
            <button class="text-xs text-gray-400 hover:text-white" onclick="app.loadReferrals()"><i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی</button>
        </div>
        <div class="overflow-y-auto pb-24">
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-right min-w-[800px]">
                    <thead class="bg-gray-800 text-gray-400 text-xs">
                        <tr>
                            <th class="p-3">لید</th>
                            <th class="p-3">شماره‌ها</th>
                            <th class="p-3">ارجاع‌دهنده</th>
                            <th class="p-3">تاریخ ارجاع</th>
                            <th class="p-3">توضیحات</th>
                        </tr>
                    </thead>
                    <tbody id="referrals-list" class="text-gray-300 text-xs"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- 4. SETTINGS VIEW -->
<div id="view-settings" class="view-section flex-1 min-h-0 p-4 sm:p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass w-full max-w-6xl mx-auto p-4 sm:p-6 mb-6">
        <h3 class="font-bold text-white mb-6 text-lg sm:text-xl">تنظیمات</h3>

        <div class="mb-6 p-3 bg-gray-900/30 border border-gray-800 rounded-xl">
            <p class="text-xs text-gray-400 mb-2">پرش سریع بین بخش‌ها</p>
            <div class="flex flex-wrap gap-2">
                <button type="button" class="px-3 py-2 rounded-lg text-xs border border-gray-700 bg-gray-800/60 text-gray-200" data-settings-section-btn="account" onclick="app.switchSettingsSection('account')">حساب کاربری</button>
                <button type="button" class="px-3 py-2 rounded-lg text-xs border border-gray-700 bg-gray-800/60 text-gray-200" data-settings-section-btn="integration" onclick="app.switchSettingsSection('integration')">یکپارچه‌سازی</button>
                <button type="button" class="px-3 py-2 rounded-lg text-xs border border-gray-700 bg-gray-800/60 text-gray-200" data-settings-section-btn="system" onclick="app.switchSettingsSection('system')">فلگ‌های سیستمی</button>
            </div>
        </div>

        <div id="settings-section-account" class="space-y-6" data-settings-section="account">
            <?php if(isAdmin()): ?>
            <div class="border border-gray-700 rounded-lg p-4 sm:p-6 bg-gradient-to-br from-purple-900/20 to-blue-900/20">
                <h4 class="text-lg font-bold text-purple-400 mb-4">
                    <i class="fa-solid fa-master-key ml-2"></i> رمز عبور اصلی
                </h4>
                <p class="text-xs text-gray-400 mb-4">
                    <i class="fa-solid fa-info-circle ml-1"></i>
                    با تنظیم رمز عبور اصلی، می‌توانید با همین رمز وارد حساب سایر کاربران شوید.
                </p>
                <form onsubmit="app.setMasterPassword(event)" class="space-y-4">
                    <div>
                        <label class="text-sm text-gray-400 mb-1 block">رمز عبور مدیر (فعلی)</label>
                        <input type="password" name="current_admin_password" id="master-current-admin" placeholder="رمز عبور مدیر" class="input" required>
                    </div>
                    <div>
                        <label class="text-sm text-gray-400 mb-1 block">رمز عبور اصلی جدید</label>
                        <input type="password" name="new_master_password" id="master-new-password" placeholder="حداقل 6 کاراکتر" class="input" required minlength="6">
                    </div>
                    <div>
                        <label class="text-sm text-gray-400 mb-1 block">تأیید رمز عبور اصلی</label>
                        <input type="password" name="confirm_master_password" id="master-confirm-password" placeholder="تکرار رمز عبور اصلی" class="input" required minlength="6">
                    </div>
                    <button type="submit" class="btn-primary w-full py-2 rounded-lg bg-purple-600 hover:bg-purple-500">
                        <i class="fa-solid fa-save ml-2"></i> ذخیره رمز عبور اصلی
                    </button>
                </form>
            </div>
            <?php endif; ?>

            <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
                <div class="border border-gray-700 rounded-lg p-4 sm:p-6">
                    <h4 class="text-lg font-bold text-yellow-500 mb-4">
                        <i class="fa-solid fa-key ml-2"></i> تغییر رمز عبور
                    </h4>
                    <form onsubmit="app.changePasswordFromSettings(event)" class="space-y-4">
                        <input type="hidden" name="user_id" id="settings-change-password-user-id" value="<?php echo $_SESSION['user_id'] ?? 0; ?>">
                        <div>
                            <label class="text-sm text-gray-400 mb-1 block">رمز عبور فعلی</label>
                            <input type="password" name="current_password" id="settings-current-password" placeholder="رمز عبور فعلی" class="input" required>
                        </div>
                        <div>
                            <label class="text-sm text-gray-400 mb-1 block">رمز عبور جدید</label>
                            <input type="password" name="new_password" id="settings-new-password" placeholder="حداقل 6 کاراکتر" class="input" required minlength="6">
                        </div>
                        <div>
                            <label class="text-sm text-gray-400 mb-1 block">تأیید رمز عبور جدید</label>
                            <input type="password" name="confirm_password" id="settings-confirm-password" placeholder="تکرار رمز عبور جدید" class="input" required minlength="6">
                        </div>
                        <button type="submit" class="btn-primary w-full py-2 rounded-lg">
                            <i class="fa-solid fa-save ml-2"></i> ذخیره رمز عبور
                        </button>
                    </form>
                </div>

                <div class="border border-gray-700 rounded-lg p-4 sm:p-6">
                    <h4 class="text-lg font-bold text-yellow-500 mb-4">
                        <i class="fa-solid fa-user ml-2"></i> اطلاعات کاربری
                    </h4>
                    <div class="space-y-3 text-sm">
                        <div class="flex justify-between gap-3">
                            <span class="text-gray-400 shrink-0">نام:</span>
                            <span class="text-white text-left break-words"><?php echo htmlspecialchars($_SESSION['name'] ?? ''); ?></span>
                        </div>
                        <div class="flex justify-between gap-3">
                            <span class="text-gray-400 shrink-0">ایمیل:</span>
                            <span class="text-white text-left break-all"><?php echo htmlspecialchars($_SESSION['email'] ?? ''); ?></span>
                        </div>
                        <div class="flex justify-between gap-3">
                            <span class="text-gray-400 shrink-0">نقش:</span>
                            <span class="text-white text-left"><?php 
                                $role = $_SESSION['role'] ?? '';
                                echo $role === 'admin' ? 'مدیر' : ($role === 'crm_specialist' ? 'کارشناس CRM' : 'کارشناس');
                            ?></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="settings-section-integration" class="space-y-6 hidden" data-settings-section="integration">
            <?php if(isAdmin()): ?>
            <div class="border border-gray-700 rounded-lg p-4 sm:p-6">
                <div class="flex items-center justify-between gap-3 mb-4">
                    <h4 class="text-lg font-bold text-yellow-500">
                        <i class="fa-solid fa-cloud-arrow-up ml-2"></i> تنظیمات ارسال به دیدار
                    </h4>
                    <span id="settings-badge-didar-write" class="text-[11px] px-2 py-1 rounded-full border border-gray-700 text-gray-300 bg-gray-800/70">بدون تغییر</span>
                </div>
                <p class="text-xs text-gray-400 mb-4">در صورت غیرفعال بودن، لید و فعالیت جدید فقط در سیستم ثبت می‌شود و به دیدار ارسال نمی‌شود.</p>
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                    <label class="flex items-start gap-2 text-sm">
                        <input type="checkbox" id="settings-didar-write-enabled" class="accent-yellow-500">
                        <span class="leading-relaxed">ارسال لید و فعالیت جدید به دیدار</span>
                    </label>
                    <button type="button" onclick="app.saveDidarWriteSettings()" class="btn-primary w-full lg:w-auto px-4 py-2 rounded text-xs">ذخیره</button>
                </div>
                <p class="text-[11px] text-gray-500 mt-3">اثر: ارسال خودکار به دیدار | ریسک: احتمال ایجاد داده ناخواسته در دیدار | زمان استفاده: در حالت عملیاتی عادی روشن باشد.</p>
                <p class="text-xs text-gray-500 mt-2" id="settings-didar-write-status"></p>
            </div>

            <div class="border border-gray-700 rounded-lg p-4 sm:p-6">
                <div class="flex items-center justify-between gap-3 mb-4">
                    <h4 class="text-lg font-bold text-yellow-500">
                        <i class="fa-solid fa-database ml-2"></i> مایگریشن خودکار
                    </h4>
                    <span id="settings-badge-auto-migration" class="text-[11px] px-2 py-1 rounded-full border border-gray-700 text-gray-300 bg-gray-800/70">بدون تغییر</span>
                </div>
                <p class="text-xs text-gray-400 mb-4">در صورت فعال بودن، در بارگذاری‌های معمول وب نیز مایگریشن اجرا می‌شود (توصیه: فقط هنگام نیاز فعال شود).</p>
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                    <label class="flex items-start gap-2 text-sm">
                        <input type="checkbox" id="settings-auto-migration-enabled" class="accent-yellow-500">
                        <span class="leading-relaxed">اجرای خودکار مایگریشن در شروع برنامه</span>
                    </label>
                    <button type="button" onclick="app.saveAutoMigrationSettings()" class="btn-primary w-full lg:w-auto px-4 py-2 rounded text-xs">ذخیره</button>
                </div>
                <p class="text-[11px] text-gray-500 mt-3">اثر: اجرای خودکار تغییرات ساختاری | ریسک: کندی بارگذاری یا خطای غیرمنتظره | زمان استفاده: فقط هنگام استقرار/تغییرات دیتابیس.</p>
                <p class="text-xs text-gray-500 mt-2" id="settings-auto-migration-status"></p>
            </div>

            <div class="border border-gray-700 rounded-lg p-4 sm:p-6">
                <div class="flex items-center justify-between gap-3 mb-4">
                    <h4 class="text-lg font-bold text-yellow-500">
                        <i class="fa-solid fa-plug-circle-bolt ml-2"></i> API خارجی لید
                    </h4>
                    <span id="settings-badge-external-api" class="text-[11px] px-2 py-1 rounded-full border border-gray-700 text-gray-300 bg-gray-800/70">بدون تغییر</span>
                </div>
                <p class="text-xs text-gray-400 mb-4">این بخش برای اپ‌های داخلی دیگر است تا با API مشترک، وضعیت اختصاص کارشناس فروش برای لید را از `SaleOs` بخوانند.</p>
                <div class="space-y-4">
                    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                        <label class="flex items-start gap-2 text-sm">
                            <input type="checkbox" id="settings-external-api-enabled" class="accent-yellow-500">
                            <span class="leading-relaxed">فعال بودن API خارجی</span>
                        </label>
                        <button type="button" onclick="app.saveExternalApiSettings()" class="btn-primary w-full lg:w-auto px-4 py-2 rounded text-xs">ذخیره وضعیت</button>
                    </div>

                    <div class="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_220px] gap-3 items-end">
                        <div>
                            <label class="text-sm text-gray-400 mb-1 block">API Key فعلی</label>
                            <input type="text" id="settings-external-api-token" class="input font-mono text-xs" value="" readonly>
                        </div>
                        <div>
                            <label class="text-sm text-gray-400 mb-1 block">آدرس endpoint</label>
                            <input type="text" id="settings-external-api-endpoint" class="input font-mono text-xs" value="/?api=get_lead_assignment" readonly>
                        </div>
                    </div>

                    <div>
                        <label class="text-sm text-gray-400 mb-1 block">رمز عبور مدیر برای ایجاد/حذف key</label>
                        <input type="password" id="settings-external-api-admin-password" class="input" placeholder="رمز عبور فعلی مدیر">
                    </div>

                    <div class="flex flex-col sm:flex-row gap-3">
                        <button type="button" onclick="app.generateExternalApiToken()" class="btn-primary w-full sm:w-auto px-4 py-2 rounded text-xs bg-emerald-600 hover:bg-emerald-500">
                            <i class="fa-solid fa-wand-magic-sparkles ml-2"></i> ایجاد یا بازتولید API Key
                        </button>
                        <button type="button" onclick="app.revokeExternalApiToken()" class="btn-primary w-full sm:w-auto px-4 py-2 rounded text-xs bg-red-600 hover:bg-red-500">
                            <i class="fa-solid fa-trash ml-2"></i> حذف API Key
                        </button>
                    </div>

                    <div class="border border-gray-800 rounded-lg px-3 py-3 bg-gray-900/40">
                        <p class="text-xs text-gray-400">آخرین key ساخته‌شده فقط در همان لحظه نمایش داده می‌شود. بعد از رفرش صفحه فقط نسخه masked آن نمایش داده می‌شود.</p>
                        <p class="text-xs text-gray-500 mt-2" id="settings-external-api-status"></p>
                    </div>
                </div>
            </div>
            <?php else: ?>
            <div class="border border-gray-700 rounded-lg p-4 sm:p-6 bg-gray-900/30 text-sm text-gray-400">تنظیمات یکپارچه‌سازی فقط برای مدیر سیستم قابل دسترسی است.</div>
            <?php endif; ?>
        </div>

        <div id="settings-section-system" class="space-y-6 hidden" data-settings-section="system">
            <?php if(isAdmin()): ?>
            <div class="border border-gray-700 rounded-lg p-4 sm:p-6 bg-gray-900/30">
                <div class="flex items-center justify-between gap-3 mb-4">
                    <h4 class="text-lg font-bold text-yellow-500">
                        <i class="fa-solid fa-flask ml-2"></i> فلگ‌های سیستمی
                    </h4>
                    <span id="settings-badge-feature-flags" class="text-[11px] px-2 py-1 rounded-full border border-gray-700 text-gray-300 bg-gray-800/70">بدون تغییر</span>
                </div>
                <p class="text-xs text-gray-400 mb-4">این گزینه‌ها رفتار ناوبری SPA و جلوگیری از نمایش داده‌های قدیمی در مودال را کنترل می‌کنند.</p>
                <div class="space-y-4">
                    <div class="border border-gray-800 rounded-lg px-3 py-3 bg-gray-900/40">
                        <label class="flex items-start sm:items-center justify-between gap-4">
                            <span class="text-sm text-gray-200 leading-relaxed">فعال‌سازی History داخلی SPA</span>
                            <input type="checkbox" id="settings-feature-history-enabled" class="accent-yellow-500 shrink-0 mt-1 sm:mt-0">
                        </label>
                        <p class="text-[11px] text-gray-500 mt-2">اثر: دکمه Back/Forward داخل اپ کار می‌کند | ریسک: تداخل با جریان قدیمی ناوبری | زمان استفاده: پس از تست کامل داخلی.</p>
                    </div>
                    <div class="border border-gray-800 rounded-lg px-3 py-3 bg-gray-900/40">
                        <label class="flex items-start sm:items-center justify-between gap-4">
                            <span class="text-sm text-gray-200 leading-relaxed">محافظت از تازگی داده مودال‌ها</span>
                            <input type="checkbox" id="settings-feature-freshness-enabled" class="accent-yellow-500 shrink-0 mt-1 sm:mt-0">
                        </label>
                        <p class="text-[11px] text-gray-500 mt-2">اثر: پاسخ قدیمی درخواست‌ها وارد UI نمی‌شود | ریسک: در شبکه بسیار ناپایدار برخی پاسخ‌ها نادیده گرفته می‌شوند | زمان استفاده: برای جلوگیری از نمایش داده اشتباه همیشه روشن بماند.</p>
                    </div>
                </div>
                <div class="mt-4 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                    <p class="text-xs text-gray-500" id="settings-feature-flags-status"></p>
                    <button type="button" onclick="app.saveFeatureFlagSettings()" class="btn-primary w-full lg:w-auto px-4 py-2 rounded text-xs">ذخیره فلگ‌های سیستمی</button>
                </div>
            </div>
            <?php else: ?>
            <div class="border border-gray-700 rounded-lg p-4 sm:p-6 bg-gray-900/30 text-sm text-gray-400">مدیریت فلگ‌های سیستمی فقط برای مدیر سیستم فعال است.</div>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php if(isAdmin()): ?>
<!-- 4.4 LOOKUPS VIEW (ADMIN) -->
<div id="view-lookups" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <!-- Tabs -->
    <div class="flex gap-3 mb-4 border-b border-gray-700">
        <button onclick="app.switchLookupTab('groups')" class="lookup-tab px-4 py-2 text-sm text-gray-400 hover:text-white border-b-2 border-transparent active" data-tab="groups">
            <i class="fa-solid fa-list ml-1"></i> Lookup Groups
        </button>
        <button onclick="app.switchLookupTab('fields')" class="lookup-tab px-4 py-2 text-sm text-gray-400 hover:text-white border-b-2 border-transparent" data-tab="fields">
            <i class="fa-solid fa-sliders ml-1"></i> Field Configurations
        </button>
    </div>

    <!-- Field Configurations Tab (Removed separate tab, merged into groups) -->
    <div id="lookup-groups-tab" class="lookup-tab-content glass p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-white">مدیریت لوکاپ‌ها و فیلدها</h3>
            <button onclick="app.loadLookupAdmin(true)" class="text-xs text-gray-400 hover:text-white">
                <i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی
            </button>
        </div>
        
        <div class="grid grid-cols-1 gap-6 mb-6">
            <div class="bg-gray-900/40 p-4 rounded-xl border border-gray-800">
                <label class="block text-xs font-bold text-blue-400 mb-2 uppercase tracking-wider">انتخاب فیلد یا گروه جهت تنظیمات</label>
                <select id="lookup-group-select" class="input bg-gray-800 w-full border-gray-700 focus:ring-blue-500/50" onchange="app.onLookupGroupChange()">
                    <option value="">-- انتخاب کنید --</option>
                </select>
            </div>
        </div>

        <!-- Field Configuration Settings Panel -->
        <div id="field-advanced-settings" class="hidden bg-gray-800/40 p-5 rounded-xl border border-gray-700/50 mb-6">
            <h4 class="text-sm font-bold text-blue-400 mb-4 flex items-center gap-2">
                <i class="fa-solid fa-sliders"></i> تنظیمات فیلد
            </h4>
            
            <!-- Row 1: Basic Settings -->
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-4">
                <label class="flex items-center gap-2 text-xs text-gray-400 cursor-pointer group bg-gray-900/40 p-3 rounded-lg border border-gray-700/50 hover:border-blue-500/50 transition-colors">
                    <input type="checkbox" id="fc-is-required" onchange="app.saveFieldConfigurationMerged()" class="w-4 h-4 rounded border-gray-600 bg-gray-900 text-blue-600">
                    <span class="group-hover:text-white">اجباری</span>
                    <i class="fa-solid fa-circle-info text-gray-600 text-[10px]" title="این فیلد برای ثبت الزامی است"></i>
                </label>
                <label class="flex items-center gap-2 text-xs text-gray-400 cursor-pointer group bg-gray-900/40 p-3 rounded-lg border border-gray-700/50 hover:border-blue-500/50 transition-colors">
                    <input type="checkbox" id="fc-is-editable" onchange="app.saveFieldConfigurationMerged()" class="w-4 h-4 rounded border-gray-600 bg-gray-900 text-blue-600" checked>
                    <span class="group-hover:text-white">قابل ویرایش</span>
                    <i class="fa-solid fa-circle-info text-gray-600 text-[10px]" title="کاربران مجاز می‌توانند این فیلد را ویرایش کنند"></i>
                </label>
                <label class="flex items-center gap-2 text-xs text-gray-400 cursor-pointer group bg-gray-900/40 p-3 rounded-lg border border-gray-700/50 hover:border-blue-500/50 transition-colors">
                    <input type="checkbox" id="fc-is-editable-after-create" onchange="app.saveFieldConfigurationMerged()" class="w-4 h-4 rounded border-gray-600 bg-gray-900 text-blue-600" checked>
                    <span class="group-hover:text-white">ویرایش پس از ثبت</span>
                    <i class="fa-solid fa-circle-info text-gray-600 text-[10px]" title="آیا پس از اولین ثبت قابل ویرایش است؟"></i>
                </label>
                <label class="flex items-center gap-2 text-xs text-gray-400 cursor-pointer group bg-gray-900/40 p-3 rounded-lg border border-gray-700/50 hover:border-blue-500/50 transition-colors">
                    <input type="checkbox" id="fc-is-active" onchange="app.saveFieldConfigurationMerged()" class="w-4 h-4 rounded border-gray-600 bg-gray-900 text-blue-600" checked>
                    <span class="group-hover:text-white">فعال</span>
                    <i class="fa-solid fa-circle-info text-gray-600 text-[10px]" title="اگر غیرفعال شود، این فیلد نمایش داده نمی‌شود"></i>
                </label>
            </div>

            <!-- Row 2: Role Permissions -->
            <div class="bg-gray-900/40 p-4 rounded-lg border border-gray-700/50 mb-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-[10px] text-gray-500 uppercase font-bold mb-2">دسترسی ویرایش:</label>
                        <div class="flex flex-wrap items-center gap-3" id="fc-roles-container">
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="admin" onchange="app.saveFieldConfigurationMerged()" class="role-checkbox w-3 h-3 rounded"> مدیر
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="crm_specialist" onchange="app.saveFieldConfigurationMerged()" class="role-checkbox w-3 h-3 rounded"> CRM
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="agent" onchange="app.saveFieldConfigurationMerged()" class="role-checkbox w-3 h-3 rounded"> کارشناس
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-[10px] text-gray-500 uppercase font-bold mb-2">دسترسی حذف:</label>
                        <div class="flex flex-wrap items-center gap-3" id="fc-delete-roles-container">
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="admin" onchange="app.saveFieldConfigurationMerged()" class="delete-role-checkbox w-3 h-3 rounded"> مدیر
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="crm_specialist" onchange="app.saveFieldConfigurationMerged()" class="delete-role-checkbox w-3 h-3 rounded"> CRM
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="agent" onchange="app.saveFieldConfigurationMerged()" class="delete-role-checkbox w-3 h-3 rounded"> کارشناس
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-[10px] text-gray-500 uppercase font-bold mb-2">نقش‌های مشاهده:</label>
                        <div class="flex flex-wrap items-center gap-3" id="fc-view-roles-container">
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="admin" onchange="app.saveFieldConfigurationMerged()" class="view-role-checkbox w-3 h-3 rounded"> مدیر
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="crm_specialist" onchange="app.saveFieldConfigurationMerged()" class="view-role-checkbox w-3 h-3 rounded"> CRM
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="agent" onchange="app.saveFieldConfigurationMerged()" class="view-role-checkbox w-3 h-3 rounded"> کارشناس
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Row 3: Advanced Settings -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                <div>
                    <label class="block text-[10px] text-gray-500 uppercase font-bold mb-1">برچسب فیلد (نمایش فارسی)</label>
                    <input type="text" id="fc-field-label" class="input bg-gray-900 text-xs w-full" placeholder="مثال: 4 رقم آخر کارت" onchange="app.saveFieldConfigurationMerged()">
                </div>
                <div>
                    <label class="block text-[10px] text-gray-500 uppercase font-bold mb-1">مقدار پیش‌فرض</label>
                    <input type="text" id="fc-default-value" class="input bg-gray-900 text-xs w-full" placeholder="مثال: card_reader" onchange="app.saveFieldConfigurationMerged()">
                </div>
                <div>
                    <label class="block text-[10px] text-gray-500 uppercase font-bold mb-1">گروه/تب</label>
                    <input type="text" id="fc-group-name" class="input bg-gray-900 text-xs w-full" placeholder="مثال: اطلاعات مالی" onchange="app.saveFieldConfigurationMerged()">
                </div>
            </div>

            <!-- Row 4: Validation & Help -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div>
                    <label class="block text-[10px] text-gray-500 uppercase font-bold mb-1">الگوی اعتبارسنجی (Regex)</label>
                    <input type="text" id="fc-validation-pattern" class="input bg-gray-900 text-xs w-full font-mono" placeholder="مثال: ^\d{4}$" onchange="app.saveFieldConfigurationMerged()">
                    <p class="text-[9px] text-gray-600 mt-1">فقط کاراکترهایی که با این الگو مطابقت دارند مجاز هستند</p>
                </div>
                <div>
                    <label class="block text-[10px] text-gray-500 uppercase font-bold mb-1">متن راهنما (Tooltip)</label>
                    <textarea id="fc-help-text" class="input bg-gray-900 text-xs w-full h-16 resize-none" placeholder="این متن به عنوان راهنما در کنار فیلد نمایش داده می‌شود..." onchange="app.saveFieldConfigurationMerged()"></textarea>
                </div>
            </div>

            <!-- Row 5: Conditional Logic -->
            <div class="bg-gray-900/40 p-4 rounded-lg border border-gray-700/50">
                <label class="block text-[10px] text-gray-500 uppercase font-bold mb-2">
                    <i class="fa-solid fa-code-branch text-yellow-500 ml-1"></i>
                    منطق شرطی (اختیاری)
                </label>
                <p class="text-[10px] text-gray-600 mb-2">این فیلد را فقط زمانی نمایش بده که شرط زیر برقرار باشد:</p>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <input type="text" id="fc-conditional-field" class="input bg-gray-800 text-xs" placeholder="نام فیلد وابسته (مثال: payment_method)">
                    <select id="fc-conditional-operator" class="input bg-gray-800 text-xs">
                        <option value="=">=  برابر</option>
                        <option value="!=">≠  نابرابر</option>
                        <option value="in">در لیست</option>
                        <option value="not_empty">پر باشد</option>
                        <option value="empty">خالی باشد</option>
                    </select>
                    <input type="text" id="fc-conditional-value" class="input bg-gray-800 text-xs" placeholder="مقدار (مثال: card_to_card)">
                </div>
                <input type="hidden" id="fc-conditional-logic">
                <button type="button" onclick="app.applyConditionalLogicFromUI()" class="text-[10px] text-blue-400 hover:text-blue-300 mt-2">
                    <i class="fa-solid fa-check ml-1"></i> اعمال شرط
                </button>
            </div>
        </div>

        <div id="lookup-items-section" class="hidden mt-6">
            <div class="flex flex-wrap items-center justify-between gap-4 mb-4 bg-gray-800/30 p-4 rounded-xl border border-gray-700/50">
                <div class="flex items-center gap-3">
                    <h4 class="text-sm font-bold text-gray-300 flex items-center gap-2">
                        <i class="fa-solid fa-list-ul text-blue-400"></i> گزینه‌های لیست
                    </h4>
                    <button id="lookup-add-item-btn" onclick="app.addLookupRow()" class="btn-primary px-4 py-1.5 rounded-lg text-[11px] font-bold">
                        <i class="fa-solid fa-plus ml-1"></i> افزودن گزینه جدید
                    </button>
                </div>
            </div>

            <div class="overflow-x-auto border border-gray-800 rounded-xl">
                <table class="w-full text-right text-sm">
                    <thead class="bg-gray-800/80 text-gray-400">
                        <tr>
                            <th class="p-3 font-medium">عنوان نمایش</th>
                            <th class="p-3 font-medium">مقدار (Value)</th>
                            <th class="p-3 font-medium">کد (Code)</th>
                            <th class="p-3 font-medium">Meta JSON</th>
                            <th id="lookup-col-header-service-price" class="p-3 font-medium hidden">قیمت (تومان)</th>
                            <th id="lookup-col-header-service-price-list-code" class="p-3 font-medium hidden">کد لیست قیمت</th>
                            <th id="lookup-col-header-service-products" class="p-3 font-medium hidden">محصولات لینک‌شده</th>
                            <th class="p-3 font-medium">والد</th>
                            <th class="p-3 font-medium w-20 text-center">ترتیب</th>
                            <th class="p-3 font-medium w-20 text-center">فعال</th>
                            <th class="p-3 font-medium text-center">عملیات</th>
                        </tr>
                    </thead>
                    <tbody id="lookup-items-table" class="divide-y divide-gray-800 text-gray-300 bg-gray-900/20"></tbody>
                </table>
            </div>
            <p class="text-[10px] text-gray-500 mt-3 italic">* تغییرات آیتم‌ها بصورت ردیفی اعمال می‌شود. برای هر ردیف دکمه ذخیره وجود دارد.</p>
        </div>

        <div id="lookup-products-manager-section" class="hidden mt-6">
            <div class="flex flex-wrap items-center justify-between gap-4 mb-4 bg-gray-800/30 p-4 rounded-xl border border-gray-700/50">
                <div class="flex items-center gap-3">
                    <h4 class="text-sm font-bold text-gray-300 flex items-center gap-2">
                        <i class="fa-solid fa-box text-yellow-400"></i> مدیریت محصولات
                    </h4>
                    <button id="lookup-add-product-btn" onclick="app.addLookupProductRow()" class="btn-primary px-4 py-1.5 rounded-lg text-[11px] font-bold">
                        <i class="fa-solid fa-plus ml-1"></i> افزودن محصول
                    </button>
                </div>
                <div class="text-xs text-gray-500">در این بخش می‌توانید هر محصول را به یک خدمت از لیست خدمات قابل ارائه لینک کنید.</div>
            </div>
            <div class="overflow-x-auto border border-gray-800 rounded-xl">
                <table class="w-full text-right text-sm">
                    <thead class="bg-gray-800/80 text-gray-400">
                        <tr>
                            <th class="p-3 font-medium">نام محصول</th>
                            <th class="p-3 font-medium">خدمت لینک‌شده</th>
                            <th class="p-3 font-medium text-center">عملیات</th>
                        </tr>
                    </thead>
                    <tbody id="lookup-products-table" class="divide-y divide-gray-800 text-gray-300 bg-gray-900/20"></tbody>
                </table>
            </div>
        </div>

        <div id="lookup-rbac-manager-section" class="hidden mt-6">
            <div class="flex flex-wrap items-center justify-between gap-4 mb-4 bg-gray-800/30 p-4 rounded-xl border border-gray-700/50">
                <div class="flex items-center gap-3">
                    <h4 class="text-sm font-bold text-gray-300 flex items-center gap-2">
                        <i class="fa-solid fa-user-shield text-cyan-400"></i> مدیریت نقش‌ها و دسترسی‌ها (RBAC)
                    </h4>
                    <button type="button" onclick="app.loadLookupRbacManagerData(true)" class="px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-xs">
                        <i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی
                    </button>
                </div>
                <div class="text-xs text-gray-500">نسخه اولیه فاز 2: مدیریت نقش، دسترسی‌ها و scope داده‌ها</div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                <div class="glass p-4 space-y-3">
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">نقش‌ها</label>
                        <select id="rbac-role-select" class="input bg-gray-800 w-full" onchange="app.onLookupRbacRoleChange()">
                            <option value="">-- انتخاب نقش --</option>
                        </select>
                    </div>
                    <div class="grid grid-cols-1 gap-2">
                        <input type="hidden" id="rbac-role-id" value="">
                        <input type="text" id="rbac-role-key" class="input bg-gray-800 text-xs" placeholder="role_key (مثال: sales_viewer)">
                        <input type="text" id="rbac-role-title" class="input bg-gray-800 text-xs" placeholder="عنوان نقش">
                        <div class="flex items-center gap-2">
                            <label class="text-xs text-gray-400 flex items-center gap-2">
                                <input type="checkbox" id="rbac-role-active" class="accent-yellow-500" checked>
                                فعال
                            </label>
                            <span id="rbac-role-system-badge" class="text-[10px] px-2 py-0.5 rounded bg-gray-700 text-gray-300 hidden">سیستمی</span>
                        </div>
                        <button type="button" onclick="app.saveLookupRbacRole()" class="btn-primary py-2 text-xs rounded">
                            <i class="fa-solid fa-floppy-disk ml-1"></i> ذخیره مشخصات نقش
                        </button>
                    </div>

                    <div class="border-t border-gray-700 pt-3 space-y-2">
                        <div class="text-xs text-gray-400 font-bold">ایجاد نقش جدید از تمپلیت</div>
                        <input type="text" id="rbac-clone-role-key" class="input bg-gray-800 text-xs" placeholder="new_role_key">
                        <input type="text" id="rbac-clone-role-title" class="input bg-gray-800 text-xs" placeholder="عنوان نقش جدید">
                        <select id="rbac-clone-template-role" class="input bg-gray-800 text-xs">
                            <option value="">-- تمپلیت نقش --</option>
                        </select>
                        <button type="button" onclick="app.cloneLookupRbacRole()" class="px-3 py-2 rounded bg-cyan-600 hover:bg-cyan-500 text-xs text-white w-full">
                            <i class="fa-solid fa-copy ml-1"></i> ساخت از تمپلیت
                        </button>
                    </div>
                </div>

                <div class="glass p-4 lg:col-span-2">
                    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <h5 class="text-sm font-bold text-white">دسترسی‌ها (Capabilities)</h5>
                                <button type="button" onclick="app.saveLookupRbacCapabilities()" class="px-3 py-1 rounded bg-blue-600 hover:bg-blue-500 text-xs">ذخیره دسترسی‌ها</button>
                            </div>
                            <input id="rbac-capabilities-search" type="text" class="input bg-gray-800 text-xs w-full mb-2" placeholder="جستجو..." oninput="app.renderLookupRbacCapabilities()">
                            <div id="rbac-capabilities-container" class="max-h-[420px] overflow-y-auto border border-gray-800 rounded-lg p-3 space-y-3 bg-gray-900/30">
                                <div class="text-center text-gray-500 text-xs py-6">ابتدا یک نقش انتخاب کنید</div>
                            </div>
                        </div>

                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <h5 class="text-sm font-bold text-white">محدوده داده‌ها (Scopes)</h5>
                                <button type="button" onclick="app.saveLookupRbacScopes()" class="px-3 py-1 rounded bg-green-600 hover:bg-green-500 text-xs">ذخیره Scope</button>
                            </div>
                            <div id="rbac-scopes-container" class="space-y-3">
                                <div class="text-center text-gray-500 text-xs py-6 border border-gray-800 rounded-lg bg-gray-900/30">ابتدا یک نقش انتخاب کنید</div>
                            </div>
                            <p class="text-[10px] text-gray-500 mt-2">برای `selected_users` کاربران موردنظر را انتخاب کنید.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hidden separate tab content (removed UI, but kept container for JS compatibility if needed) -->
    <div id="lookup-fields-tab" class="hidden"></div>
</div>
<?php endif; ?>
<!-- 4.5 EXPORTS VIEW (ADMIN) -->
<div id="view-exports" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-white">گزارشات</h3>
            <button onclick="app.loadExportCatalog(true)" class="text-xs text-gray-400 hover:text-white">
                <i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div>
                <label class="block text-xs text-gray-400 mb-1">نوع خروجی</label>
                <select id="export-dataset" class="input bg-gray-800 w-full" onchange="app.onExportDatasetChange()">
                    <option value="">در حال بارگذاری...</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">فرمت</label>
                <select id="export-format" class="input bg-gray-800 w-full">
                    <option value="csv">CSV</option>
                    <option value="xlsx">Excel (XLSX)</option>
                </select>
                <p class="text-[11px] text-gray-500 mt-1">برای خروجی‌های بزرگ، CSV سریع‌تر و مطمئن‌تر است.</p>
            </div>
            <div class="flex items-end">
                <button onclick="app.submitExport()" class="btn-primary w-full py-2 rounded">
                    <i class="fa-solid fa-download ml-1"></i> دانلود خروجی
                </button>
            </div>
        </div>

        <div id="export-filters" class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3"></div>

        <div class="mt-6">
            <div class="flex items-center justify-between gap-3 mb-2">
                <h4 class="font-bold text-white text-sm">ستون‌ها</h4>
                <div class="flex gap-2 items-center">
                    <input id="export-columns-search" type="text" class="input bg-gray-800 text-xs w-56" placeholder="جستجوی ستون..." oninput="app.filterExportColumns()">
                    <button type="button" class="px-3 py-2 rounded bg-gray-700 hover:bg-gray-600 text-xs" onclick="app.selectAllExportColumns(true)">انتخاب همه</button>
                    <button type="button" class="px-3 py-2 rounded bg-gray-700 hover:bg-gray-600 text-xs" onclick="app.selectAllExportColumns(false)">حذف همه</button>
                </div>
            </div>
            <div id="export-columns" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2"></div>
        </div>

        <form id="export-form" method="POST" action="?api=export_run" class="hidden">
            <input type="hidden" name="dataset" id="export-form-dataset" value="">
            <input type="hidden" name="format" id="export-form-format" value="">
            <input type="hidden" name="columns_json" id="export-form-columns" value="[]">
            <input type="hidden" name="filters_json" id="export-form-filters" value="{}">
        </form>
    </div>
</div>

<!-- 4.6 AUDIT LOGS VIEW (ADMIN) -->
<div id="view-audit-logs" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-white">لاگ فعالیت کاربران (سیستمی و رابط کاربری)</h3>
            <button onclick="app.loadAuditLogs(true)" class="text-xs text-gray-400 hover:text-white">
                <i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-4">
            <div>
                <label class="block text-xs text-gray-400 mb-1">نوع عملیات</label>
                <select id="audit-filter-action" class="input bg-gray-800 w-full" onchange="app.loadAuditLogs(true)">
                    <option value="">همه</option>
                    <option value="login">ورود به سیستم</option>
                    <option value="logout">خروج</option>
                    <option value="delete">حذف</option>
                    <option value="owner_change">تغییر مسئول</option>
                    <option value="Click">کلیک‌ها (UI)</option>
                    <option value="HTTP POST">تغییرات داده (POST)</option>
                    <option value="HTTP GET">مشاهده صفحات</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">نوع رکورد</label>
                <select id="audit-filter-entity" class="input bg-gray-800 w-full" onchange="app.loadAuditLogs(true)">
                    <option value="">همه</option>
                    <option value="person">لید</option>
                    <option value="deal">معامله</option>
                    <option value="activity">فعالیت</option>
                    <option value="payment">پرداخت</option>
                    <option value="system">سیستم</option>
                    <option value="client_ui">رابط کاربری</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">جستجوی شخص (نام/موبایل)</label>
                <input id="audit-filter-person" type="text" class="input bg-gray-800 w-full" placeholder="نام یا شماره..." onkeypress="if(event.key==='Enter') app.loadAuditLogs(true)">
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">از تاریخ (شمسی)</label>
                <input id="audit-filter-from" type="text" class="input bg-gray-800 w-full" placeholder="1403/10/01" onkeypress="if(event.key==='Enter') app.loadAuditLogs(true)" data-jalali-picker="1">
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">تا تاریخ (شمسی)</label>
                <input id="audit-filter-to" type="text" class="input bg-gray-800 w-full" placeholder="1403/10/30" onkeypress="if(event.key==='Enter') app.loadAuditLogs(true)" data-jalali-picker="1">
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-right text-sm min-w-[1000px]">
                <thead class="bg-gray-800 text-gray-400">
                    <tr>
                        <th class="p-3">زمان</th>
                        <th class="p-3">کاربر</th>
                        <th class="p-3">شخص مرتبط</th>
                        <th class="p-3">IP</th>
                        <th class="p-3">عملیات</th>
                        <th class="p-3">نوع</th>
                        <th class="p-3">جزئیات</th>
                        <th class="p-3">اقدام</th>
                    </tr>
                </thead>
                <tbody id="audit-logs-table" class="divide-y divide-gray-700 text-gray-300"></tbody>
            </table>
        </div>

        <div class="flex justify-between items-center mt-4 text-xs text-gray-400">
            <button class="px-3 py-2 rounded bg-gray-700 hover:bg-gray-600" onclick="app.auditLogsPrev()">قبلی</button>
            <span id="audit-logs-info">-</span>
            <button class="px-3 py-2 rounded bg-gray-700 hover:bg-gray-600" onclick="app.auditLogsNext()">بعدی</button>
        </div>
    </div>
</div>

<!-- 5. USERS VIEW (ADMIN) -->
<div id="view-users" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-6">
        <div class="flex justify-between mb-6">
            <h3 class="font-bold text-white">کاربران و کارشناسان</h3>
            <div class="flex gap-2">
                <button onclick="app.syncDidarUsers()" class="btn-primary px-4 py-2 rounded text-xs bg-purple-600 hover:bg-purple-700" title="همگام‌سازی کاربران با Didar برای درست کردن Owner IDs">
                    <i class="fa-solid fa-sync ml-1"></i> همگام‌سازی Didar
                </button>
                <button onclick="app.runMigration()" class="btn-primary px-4 py-2 rounded text-xs bg-blue-600 hover:bg-blue-700">
                    <i class="fa-solid fa-database ml-1"></i> اجرای Migration
                </button>
                <button onclick="app.runActivityTypeRepair()" class="btn-primary px-4 py-2 rounded text-xs bg-amber-600 hover:bg-amber-700">
                    <i class="fa-solid fa-wrench ml-1"></i> ترمیم نوع فعالیت‌ها
                </button>
                <button onclick="app.runWonKarizReconcile()" class="btn-primary px-4 py-2 rounded text-xs bg-emerald-700 hover:bg-emerald-600">
                    <i class="fa-solid fa-broom ml-1"></i> ترمیم کاریز معاملات موفق
                </button>
                <button onclick="app.openUserModal()" class="btn-primary px-4 py-2 rounded text-xs">افزودن کاربر</button>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-right text-sm min-w-[700px]">
                <thead class="bg-gray-800 text-gray-400">
                    <tr>
                        <th class="p-3">نام</th>
                        <th class="p-3">نام کاربری</th>
                        <th class="p-3">نقش</th>
                        <th class="p-3">Didar ID</th>
                        <th class="p-3">عملیات</th>
                    </tr>
                </thead>
                <tbody id="users-table" class="divide-y divide-gray-700 text-gray-300"></tbody>
            </table>
        </div>
    </div>
    <div id="crm-owner-settings" class="glass p-6 mt-6 space-y-3">
        <div class="flex items-center justify-between">
            <div>
                <h4 class="font-bold text-white text-sm">کارشناس CRM پیش‌فرض</h4>
                <p class="text-xs text-gray-400 mt-1">لیدهای ارجاع‌شده به این کارشناس منتقل می‌شوند</p>
            </div>
            <button type="button" onclick="app.saveCrmOwner()" class="btn-primary px-4 py-2 rounded text-xs">ذخیره</button>
        </div>
        <select id="crm-owner-select" class="input bg-gray-800">
            <option value="">در حال بارگذاری کاربران دیدار...</option>
        </select>
        <p class="text-xs text-gray-500" id="crm-owner-current"></p>
    </div>
    <div class="glass p-6 mt-6 space-y-4">
        <div class="flex items-center justify-between">
            <div>
                <h4 class="font-bold text-white text-sm">رمز عبور اصلی</h4>
                <p class="text-xs text-gray-400 mt-1">ورود به حساب سایر کاربران با رمز عبور اصلی</p>
            </div>
            <span id="master-password-status" class="text-xs px-2 py-1 rounded bg-slate-800 text-slate-300">نامشخص</span>
        </div>
        <form onsubmit="app.setMasterPassword(event)" class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <input type="password" name="current_admin_password" placeholder="رمز عبور مدیر" class="input" required>
            <input type="password" name="new_master_password" placeholder="رمز عبور اصلی جدید" class="input" required minlength="6">
            <div class="flex gap-2">
                <input type="password" name="confirm_master_password" placeholder="تأیید رمز" class="input flex-1" required minlength="6">
                <button type="submit" class="btn-primary px-4 py-2 rounded bg-purple-600 hover:bg-purple-500 whitespace-nowrap">ذخیره</button>
            </div>
        </form>
    </div>
</div>

<!-- KPI DASHBOARD VIEW -->
<div id="view-kpi-dashboard" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto">
    <div id="kpi-dashboard-content" class="space-y-6">
        <div class="text-sm text-gray-400">در حال بارگذاری داشبورد KPI...</div>
    </div>
</div>

<div id="view-commissions" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-5 mb-5">
        <div class="flex flex-wrap gap-3 justify-between items-center">
            <h3 class="text-yellow-500 font-bold text-lg"><i class="fa-solid fa-percent ml-2"></i>مدیریت پورسانت</h3>
            <div class="flex gap-2">
                <button class="btn-primary px-4 py-2 rounded text-sm" onclick="app.openCommissionMatrixModal()">
                    <i class="fa-solid fa-table-cells-large ml-1"></i> ماتریس پورسانت
                </button>
                <button class="btn-primary px-4 py-2 rounded text-sm bg-green-600 hover:bg-green-700" onclick="app.loadCommissions()">
                    <i class="fa-solid fa-rotate ml-1"></i> بروزرسانی
                </button>
            </div>
        </div>
    </div>
    <div class="glass p-4">
        <div class="mb-4">
            <div class="flex flex-wrap gap-2 items-center justify-between">
                <h4 class="text-sm text-cyan-300 font-bold">چرخه پرداخت پورسانت (Manager Payroll)</h4>
                <div class="flex gap-2">
                    <button class="btn-primary px-3 py-1.5 rounded text-xs bg-indigo-600 hover:bg-indigo-500" onclick="app.aggregateCommissionPayoutCycles()">
                        <i class="fa-solid fa-calculator ml-1"></i> تجمیع ماه جاری
                    </button>
                    <button class="btn-primary px-3 py-1.5 rounded text-xs" onclick="app.loadCommissionPayoutQueue()">
                        <i class="fa-solid fa-rotate ml-1"></i> بروزرسانی صف
                    </button>
                </div>
            </div>
            <div id="commission-payout-queue" class="overflow-x-auto mt-3"></div>
        </div>
        <div id="commissions-list" class="overflow-x-auto">
            <div class="text-gray-400 text-sm">در حال بارگذاری...</div>
        </div>
    </div>
</div>

<div id="view-finance-inbox" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-4">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-3">
            <h3 class="text-yellow-500 font-bold text-lg">
                <i class="fa-solid fa-file-invoice-dollar ml-2"></i>کارتابل مالی پورسانت (چک‌ها)
            </h3>
            <div class="flex items-center gap-2">
                <button class="btn-primary px-4 py-2 rounded text-xs" onclick="app.loadFinanceChequeInbox()">
                    <i class="fa-solid fa-rotate ml-1"></i>بروزرسانی
                </button>
            </div>
        </div>
        <div id="finance-inbox-list" class="overflow-x-auto mt-4"></div>
    </div>
</div>

<!-- 6. PERSONS VIEW -->
<div id="view-persons" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
            <h3 class="font-bold text-yellow-500">لیست اشخاص</h3>
            <input type="text" id="persons-search" placeholder="جستجو..." class="input w-full md:w-64 bg-gray-800">
        </div>
        <div class="overflow-y-auto p-4 pb-24">
            <div id="persons-list" class="space-y-2"></div>
        </div>
    </div>
</div>

<!-- 7. REMINDERS VIEW -->
<div id="view-reminders" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
            <h3 class="font-bold text-blue-500">لیست یادآوری‌های فعالیت</h3>
            <button class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2" onclick="app.loadReminders()">
                <i class="fa-solid fa-rotate-right"></i>
                بروزرسانی
            </button>
        </div>
        <div class="flex-1 overflow-y-auto p-4 pb-24">
            <div id="reminders-list-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                <div class="text-center text-gray-500 py-10 col-span-full">در حال بارگذاری...</div>
            </div>
        </div>
    </div>
</div>
