<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>بوابة الشركاء | Vision</title>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root { --primary: #00bdae; --secondary: #7338a2; --slate-900: #0f172a; --slate-800: #1e293b; --slate-600: #475569; --slate-400: #94a3b8; --bg: #f8fafc; --white: #fff; --border: #e2e8f0; --radius: 16px; }
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', sans-serif; outline: none; -webkit-tap-highlight-color: transparent; }
        body { background: var(--bg); color: var(--slate-800); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
        
        /* === Login Screen === */
        #login-screen { position: fixed; inset: 0; background: linear-gradient(135deg, var(--bg), #e0f2fe); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
        .login-box { background: var(--white); padding: 40px 30px; border-radius: 24px; width: 100%; max-width: 380px; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); text-align: center; }
        .app-logo { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 16px; display: grid; place-items: center; color: white; font-weight: 800; font-size: 24px; margin: 0 auto 20px; box-shadow: 0 10px 20px rgba(0,189,174,0.3); }
        .login-title { font-size: 20px; font-weight: 800; color: var(--slate-900); margin-bottom: 8px; }
        .login-subtitle { font-size: 13px; color: var(--slate-600); margin-bottom: 30px; }
        
        /* === App Layout === */
        #app-screen { display: none; padding-bottom: 90px; animation: fadeIn 0.4s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .top-bar { background: var(--white); padding: 20px; position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
        .user-greeting h1 { font-size: 16px; font-weight: 800; color: var(--slate-900); }
        .user-greeting p { font-size: 12px; color: var(--slate-600); }
        .refresh-btn { width: 36px; height: 36px; background: var(--bg); border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--slate-600); }
        
        .container { padding: 20px; max-width: 600px; margin: 0 auto; }
        
        /* Balance Card */
        .balance-card { background: linear-gradient(135deg, #1e293b, #0f172a); color: white; padding: 24px; border-radius: 20px; margin-bottom: 24px; box-shadow: 0 10px 30px -5px rgba(30, 41, 59, 0.4); position: relative; overflow: hidden; }
        .balance-card::after { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: rgba(255,255,255,0.05); border-radius: 50%; }
        .bal-label { font-size: 12px; opacity: 0.8; font-weight: 600; margin-bottom: 8px; }
        .bal-value { font-size: 32px; font-weight: 800; letter-spacing: -1px; }
        .bal-value small { font-size: 16px; font-weight: 600; margin-right: 4px; opacity: 0.8; }
        
        /* Stats Grid */
        .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
        .stat-card { background: var(--white); padding: 16px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); border: 1px solid var(--border); }
        .stat-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 12px; font-size: 14px; }
        .stat-label { font-size: 11px; color: var(--slate-600); font-weight: 700; }
        .stat-num { font-size: 18px; font-weight: 800; color: var(--slate-900); margin-top: 4px; }
        
        /* Data Lists (Mobile Cards) */
        .data-list { display: flex; flex-direction: column; gap: 12px; }
        .data-card { background: var(--white); padding: 16px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 2px 5px rgba(0,0,0,0.02); display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; }
        .data-card.alert { border-right: 4px solid #ef4444; }
        .data-card.refunded { border-right: 4px solid #f97316; }
        .dc-left h4 { font-size: 14px; font-weight: 700; color: var(--slate-800); margin-bottom: 4px; }
        .dc-left p { font-size: 12px; color: var(--slate-400); }
        .dc-right { text-align: left; }
        .dc-val { font-size: 15px; font-weight: 800; color: var(--primary); }
        .dc-sub { font-size: 11px; color: var(--slate-600); display: block; }
        
        /* Tabs (Bottom Nav Style) */
        .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--border); padding: 10px 20px; display: flex; justify-content: space-around; z-index: 90; padding-bottom: 20px; box-shadow: 0 -4px 20px rgba(0,0,0,0.05); }
        .bn-item { display: flex; flex-direction: column; align-items: center; color: var(--slate-400); font-size: 10px; font-weight: 700; gap: 6px; background: none; border: none; cursor: pointer; flex: 1; }
        .bn-item svg { width: 24px; height: 24px; stroke-width: 2; transition: .2s; }
        .bn-item.active { color: var(--primary); }
        .bn-item.active svg { transform: translateY(-3px); }
        
        .view-content { display: none; animation: fadeIn 0.3s; }
        .view-content.active { display: block; }

        /* Form Elements */
        .input-group { margin-bottom: 16px; text-align: right; }
        .input-label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 13px; color: var(--slate-800); }
        .form-input { width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; background: #f8fafc; transition: .2s; }
        .form-input:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,189,174,0.1); }
        .btn { width: 100%; padding: 14px; background: var(--slate-800); color: white; border: none; border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer; }
        .btn:active { transform: scale(0.98); }
        
        /* Badges */
        .badge { padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; display: inline-block; }
        .bg-red { background: #fee2e2; color: #991b1b; }
        .bg-orange { background: #ffedd5; color: #9a3412; }
        .bg-gray { background: #f1f5f9; color: #64748b; }

        /* Empty State */
        .empty-state { text-align: center; padding: 40px 20px; color: var(--slate-400); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
    </style>
</head>
<body>

    <!-- Login Screen -->
    <div id="login-screen">
        <div class="login-box">
            <div class="app-logo">V</div>
            <h2 class="login-title">بوابة الشركاء</h2>
            <p class="login-subtitle">سجل الدخول لمتابعة مبيعات شبكتك</p>
            
            <div class="input-group">
                <label class="input-label">اسم المستخدم</label>
                <input type="text" id="username" class="form-input" placeholder="اسم الحساب">
            </div>
            <div class="input-group">
                <label class="input-label">كلمة المرور</label>
                <input type="password" id="password" class="form-input" placeholder="••••••">
            </div>
            <button class="btn" onclick="managerLogin()">دخول</button>
            <p id="login-error" style="color:#ef4444; margin-top:15px; font-size:13px; font-weight:600;"></p>
        </div>
    </div>

    <!-- App Screen -->
    <div id="app-screen">
        <div class="top-bar">
            <div class="user-greeting">
                <h1 id="mgr-name">...</h1>
                <p id="partner-name">...</p>
            </div>
            <div class="refresh-btn" onclick="logout()">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
            </div>
        </div>

        <div class="container">
            <!-- Main Balance Card -->
            <div class="balance-card">
                <div class="bal-label">صافي المستحقات (قابل للسحب)</div>
                <div class="bal-value" id="val-net">0 <small>ر.ي</small></div>
            </div>

            <!-- Key Metrics (Removed Commission Card) -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon" style="background:#dcfce7; color:#166534;"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" /></svg></div>
                    <div class="stat-label">إجمالي المبيعات (الصافي)</div>
                    <div class="stat-num" id="val-sales">0</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon" style="background:#fee2e2; color:#991b1b;"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg></div>
                    <div class="stat-label">إجمالي المسحوبات</div>
                    <div class="stat-num" id="val-withdraw">0</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon" style="background:#e0f2fe; color:#0369a1;"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3.75h3.75M12 7.5a2.25 2.25 0 012.25-2.25h2.25A2.25 2.25 0 0120.25 7.5v2.25m-14.25 0h2.25a2.25 2.25 0 012.25 2.25V12a2.25 2.25 0 01-2.25 2.25H3.75a2.25 2.25 0 01-2.25-2.25V9.75a2.25 2.25 0 012.25-2.25z" /></svg></div>
                    <div class="stat-label">المخزون المتوفر</div>
                    <div class="stat-num" id="val-stock-count">0</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon" style="background:#ffedd5; color:#9a3412;"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg></div>
                    <div class="stat-label">البلاغات</div>
                    <div class="stat-num" id="val-disputes">0</div>
                </div>
            </div>

            <!-- View: Stock -->
            <div id="tab-stock" class="view-content active">
                <div class="section-title"><span>حالة المخزون</span></div>
                <div class="data-list" id="list-stock"></div>
            </div>

            <!-- View: Sales -->
            <div id="tab-sales" class="view-content">
                <div class="section-title"><span>تفاصيل المبيعات (الصافي)</span></div>
                <div class="data-list" id="list-sales"></div>
            </div>

            <!-- View: Withdrawals -->
            <div id="tab-withdraw" class="view-content">
                <div class="section-title"><span>سجل المسحوبات</span></div>
                <div class="data-list" id="list-withdraw"></div>
            </div>

            <!-- View: Disputes -->
            <div id="tab-disputes" class="view-content">
                <div class="section-title"><span>الكروت المبلغ عنها</span></div>
                <div class="data-list" id="list-disputes"></div>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <nav class="bottom-nav">
            <button class="bn-item active" onclick="switchTab('stock', this)">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3.75h3.75M12 7.5a2.25 2.25 0 012.25-2.25h2.25A2.25 2.25 0 0120.25 7.5v2.25m-14.25 0h2.25a2.25 2.25 0 012.25 2.25V12a2.25 2.25 0 01-2.25 2.25H3.75a2.25 2.25 0 01-2.25-2.25V9.75a2.25 2.25 0 012.25-2.25z" /></svg>
                <span>المخزون</span>
            </button>
            <button class="bn-item" onclick="switchTab('sales', this)">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" /></svg>
                <span>المبيعات</span>
            </button>
            <button class="bn-item" onclick="switchTab('withdraw', this)">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
                <span>المسحوبات</span>
            </button>
            <button class="bn-item" onclick="switchTab('disputes', this)">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg>
                <span>البلاغات</span>
            </button>
        </nav>
    </div>

    <script>
        const API_URL = 'api.php';
        let currentPartnerId = null;
        let currentCommission = 0;

        function managerLogin() {
            const u = document.getElementById('username').value;
            const p = document.getElementById('password').value;
            const btn = document.querySelector('.btn');
            
            if(!u || !p) return;

            btn.innerText = 'جاري التحقق...';
            btn.style.opacity = '0.7';
            
            fetch(API_URL + '?action=manager_login', {
                method: 'POST', body: JSON.stringify({ username: u, password: p })
            })
            .then(res => res.json())
            .then(data => {
                if(data.success) {
                    currentPartnerId = data.manager.partner_id;
                    currentCommission = parseFloat(data.partner.commission);
                    
                    document.getElementById('mgr-name').innerText = `مرحباً، ${data.manager.name}`;
                    document.getElementById('partner-name').innerText = data.partner.name;
                    
                    document.getElementById('login-screen').style.display = 'none';
                    document.getElementById('app-screen').style.display = 'block';
                    
                    loadData();
                } else {
                    document.getElementById('login-error').innerText = data.message;
                    btn.innerText = 'دخول';
                    btn.style.opacity = '1';
                }
            })
            .catch(e => {
                console.error(e);
                btn.innerText = 'دخول';
                btn.style.opacity = '1';
                document.getElementById('login-error').innerText = 'خطأ في الاتصال بالسيرفر';
            });
        }

        function loadData() {
            fetch(API_URL + '?action=get_manager_report', {
                method: 'POST', body: JSON.stringify({ partner_id: currentPartnerId })
            })
            .then(res => res.json())
            .then(data => {
                if(!data.success) return;

                let grossSales = 0;
                let activeStockCount = 0;
                const salesMap = {};
                const stockMap = {};

                data.cards.forEach(c => {
                    if(c.status === 'sold') {
                        grossSales += parseFloat(c.price);
                        if(!salesMap[c.pkg_name]) salesMap[c.pkg_name] = { count: 0, price: c.price, total: 0 };
                        salesMap[c.pkg_name].count++;
                        salesMap[c.pkg_name].total += parseFloat(c.price);
                    } else if (c.status === 'active') {
                        activeStockCount++;
                        if(!stockMap[c.pkg_name]) stockMap[c.pkg_name] = { count: 0, price: c.price };
                        stockMap[c.pkg_name].count++;
                    }
                });

                let totalWithdrawn = 0;
                let withdrawHtml = '';
                data.withdrawals.forEach(w => {
                    totalWithdrawn += parseFloat(w.amount);
                    withdrawHtml += `
                    <div class="data-card">
                        <div class="dc-left">
                            <h4>${w.amount} ر.ي</h4>
                            <p>${w.date}</p>
                        </div>
                        <div class="dc-right">
                            <span class="dc-sub">المستلم: ${w.receiver}</span>
                        </div>
                    </div>`;
                });

                // Calculation logic: Hide commission, show "Sales" as the NET amount
                const commissionAmt = grossSales * (currentCommission / 100);
                const netSales = grossSales - commissionAmt;
                const netBalance = netSales - totalWithdrawn;

                // Update Stats
                document.getElementById('val-sales').innerText = netSales.toLocaleString(); // Showing NET sales as "Sales"
                document.getElementById('val-withdraw').innerText = totalWithdrawn.toLocaleString();
                document.getElementById('val-stock-count').innerText = activeStockCount;
                document.getElementById('val-net').innerHTML = netBalance.toLocaleString() + ' <small>ر.ي</small>';
                document.getElementById('val-disputes').innerText = data.disputes ? data.disputes.length : 0;

                // Render Stock List
                const stockList = document.getElementById('list-stock');
                stockList.innerHTML = '';
                if(Object.keys(stockMap).length === 0) stockList.innerHTML = '<div class="empty-state"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" width="40"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3.75h3.75M12 7.5a2.25 2.25 0 012.25-2.25h2.25A2.25 2.25 0 0120.25 7.5v2.25m-14.25 0h2.25a2.25 2.25 0 012.25 2.25V12a2.25 2.25 0 01-2.25 2.25H3.75a2.25 2.25 0 01-2.25-2.25V9.75a2.25 2.25 0 012.25-2.25z" /></svg><span>لا يوجد مخزون</span></div>';
                for(let [k,v] of Object.entries(stockMap)) {
                    stockList.innerHTML += `
                    <div class="data-card">
                        <div class="dc-left">
                            <h4>${k}</h4>
                            <p>سعر الفئة: ${v.price}</p>
                        </div>
                        <div class="dc-right">
                            <span class="dc-val" style="color:var(--primary)">${v.count} كرت</span>
                            <span class="dc-sub">متوفر</span>
                        </div>
                    </div>`;
                }

                // Render Sales List (Showing NET per package)
                const salesList = document.getElementById('list-sales');
                salesList.innerHTML = '';
                if(Object.keys(salesMap).length === 0) salesList.innerHTML = '<div class="empty-state"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" width="40"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg><span>لا توجد مبيعات</span></div>';
                for(let [k,v] of Object.entries(salesMap)) {
                    // Calculate net for this item group
                    const itemGross = v.total;
                    const itemNet = itemGross - (itemGross * (currentCommission / 100));
                    
                    salesList.innerHTML += `
                    <div class="data-card">
                        <div class="dc-left">
                            <h4>${k}</h4>
                            <p>${v.count} عملية بيع</p>
                        </div>
                        <div class="dc-right">
                            <span class="dc-val" style="color:var(--slate-800)">${itemNet.toLocaleString()}</span>
                            <span class="dc-sub">الصافي</span>
                        </div>
                    </div>`;
                }

                // Render Withdrawals
                const wdList = document.getElementById('list-withdraw');
                wdList.innerHTML = withdrawHtml || '<div class="empty-state"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" width="40"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg><span>لا توجد مسحوبات</span></div>';

                // Render Disputes (Read Only)
                const disputesList = document.getElementById('list-disputes');
                disputesList.innerHTML = '';
                if(!data.disputes || data.disputes.length === 0) {
                    disputesList.innerHTML = '<div class="empty-state"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" width="40"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg><span>سجل نظيف! لا توجد بلاغات</span></div>';
                } else {
                    data.disputes.forEach(d => {
                        let statusText = 'قيد المراجعة';
                        let statusClass = 'alert';
                        if(d.dispute_resolution === 'refunded') { statusText = 'تم الاسترجاع'; statusClass = 'refunded'; }
                        else if(d.dispute_resolution === 'rejected') { statusText = 'تم الرفض'; statusClass = ''; }
                        
                        disputesList.innerHTML += `
                        <div class="data-card ${statusClass}">
                            <div class="dc-left">
                                <h4>${d.pkg_name}</h4>
                                <p style="font-family:monospace; margin-bottom:4px;">${d.code}</p>
                                <p style="color:var(--slate-600)">السبب: ${d.report_reason || '-'}</p>
                            </div>
                            <div class="dc-right">
                                <span class="badge ${d.dispute_resolution === 'refunded' ? 'bg-orange' : (d.dispute_resolution === 'rejected' ? 'bg-gray' : 'bg-red')}">${statusText}</span>
                            </div>
                        </div>`;
                    });
                }
            });
        }

        function switchTab(tab, btn) {
            document.querySelectorAll('.bn-item').forEach(b => b.classList.remove('active'));
            document.querySelectorAll('.view-content').forEach(v => v.classList.remove('active'));
            
            btn.classList.add('active');
            document.getElementById('tab-' + tab).classList.add('active');
        }

        function logout() {
            if(confirm('تسجيل خروج؟')) location.reload();
        }
    </script>
</body>
</html>