<?php
// modules/subscriptions/widgets/subs_table.php
if (basename($_SERVER['PHP_SELF']) == 'subs_table.php') { die('Access Denied'); }
?>

<div id="subs_error_box" class="hidden py-8 text-center text-rose-500 font-bold text-sm bg-rose-50 dark:bg-rose-900/20 mb-6 rounded-3xl border border-rose-200 dark:border-rose-800/50 shadow-sm"></div>

<div id="subs_loading_overlay" class="py-20 text-center block bg-white dark:bg-slate-800 rounded-3xl shadow-sm border border-gray-100 dark:border-slate-700 mb-6">
    <div class="inline-block animate-spin w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full mb-4"></div>
    <p class="text-xs font-bold text-gray-500 dark:text-gray-400">در حال اتصال به سرور و دریافت لایو اطلاعات...</p>
</div>

<div id="subs_table_container" class="hidden bg-white dark:bg-slate-800 rounded-3xl border border-gray-100 dark:border-slate-700 overflow-hidden shadow-sm relative min-h-[300px] mb-8">
    <div class="w-full overflow-x-auto custom-scrollbar p-6">
        <table id="subsTable" class="w-full text-left" dir="ltr">
            <thead class="bg-gray-50 dark:bg-slate-700/50 text-gray-700 dark:text-gray-300 text-[11px]">
                <tr>
                    <th class="px-4 py-3 rounded-tl-xl">
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="selectAllCheckbox" onclick="toggleSelectAll()" class="rounded border-gray-300 mr-2 text-blue-600 focus:ring-blue-600 cursor-pointer"> 
                            Username
                        </div>
                    </th>
                    <th class="px-4 py-3 font-normal min-w-[120px]">Status / Expire</th>
                    <th class="px-4 py-3 font-normal min-w-[250px]">Data Usage</th>
                    <th class="px-4 py-3 font-normal text-right min-w-[170px]" dir="rtl">فروشنده و مشتری</th>
                    <th class="px-2 py-3 font-normal text-right min-w-[170px] rounded-tr-xl">Actions</th>
                    
                    <th class="hidden">UsageStatus</th>
                    <th class="hidden">RemainStatus</th>
                </tr>
            </thead>
            <tbody id="subs_table_body" class="divide-y divide-gray-100 dark:divide-slate-700/50 text-sm">
                </tbody>
        </table>
    </div>
</div>

<div id="bulk_action_bar" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-gray-900 dark:bg-slate-800 text-white px-5 py-3 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.3)] flex items-center gap-4 transition-all duration-300 translate-y-24 opacity-0 z-50 border border-gray-700 dark:border-slate-600">
    <span class="text-xs font-bold bg-gray-800 dark:bg-slate-700 px-3 py-1.5 rounded-lg flex items-center gap-2">
        <span id="bulk_count" class="bg-blue-600 px-1.5 rounded text-white">0</span> انتخاب
    </span>
    <div class="h-6 w-px bg-gray-700 dark:bg-slate-600"></div>
    <button onclick="executeBulk('active')" class="text-xs font-bold text-gray-300 hover:text-emerald-400 transition">فعال‌سازی</button>
    <button onclick="executeBulk('disabled')" class="text-xs font-bold text-gray-300 hover:text-rose-400 transition">مسدود</button>
    <button onclick="executeBulk('reset')" class="text-xs font-bold text-gray-300 hover:text-amber-400 transition">ریست حجم</button>
    <div class="h-6 w-px bg-gray-700 dark:bg-slate-600"></div>
    <button onclick="executeBulk('delete')" class="text-xs font-bold text-rose-500 hover:text-rose-400 transition">حذف از سرور</button>
</div>

<div id="editSubModal" class="fixed inset-0 bg-black/60 hidden items-center justify-center z-[200] px-4 backdrop-blur-sm">
    <div class="bg-white dark:bg-slate-800 rounded-3xl w-full max-w-md p-6 shadow-2xl border border-gray-100 dark:border-slate-700" id="editSubModalContent">
        <h3 class="font-black text-amber-600 dark:text-amber-500 mb-5 text-center flex items-center justify-center gap-2 text-lg">✏️ ویرایش تراز مالی</h3>
        <form method="POST" action="subscriptions.php" class="space-y-4">
            <input type="hidden" name="action" value="edit_sub">
            <input type="hidden" name="account_username" id="edit_account_username">
            <input type="hidden" name="tx_id" id="edit_tx_id">
            
            <div>
                <label class="text-xs font-bold text-gray-700 dark:text-gray-300 mb-1.5 block">نام مشتری</label>
                <input type="text" name="customer_name" id="edit_customer_name" list="edit_customer_names_list" class="w-full border border-gray-200 dark:border-slate-600 p-2.5 rounded-xl text-sm bg-gray-50 dark:bg-slate-700 dark:text-white outline-none focus:border-amber-500 transition">
                <datalist id="edit_customer_names_list"></datalist>
            </div>
            
            <div>
                <label class="text-xs font-bold text-gray-700 dark:text-gray-300 mb-1.5 block">مبلغ دریافتی (تومان)</label>
                <input type="text" name="paid_amount" id="edit_paid_amount" onkeyup="formatCurrency(this)" class="w-full border border-gray-200 dark:border-slate-600 p-2.5 rounded-xl text-sm bg-gray-50 dark:bg-slate-700 dark:text-white outline-none focus:border-amber-500 transition font-mono font-black text-emerald-600" dir="ltr">
            </div>

            <div>
                <label class="text-xs font-bold text-gray-700 dark:text-gray-300 mb-1.5 block">واریز به حساب</label>
                <select name="bank_id" id="edit_bank_id" class="w-full border border-gray-200 dark:border-slate-600 p-2.5 rounded-xl text-sm bg-gray-50 dark:bg-slate-700 dark:text-white outline-none focus:border-amber-500 transition cursor-pointer">
                    <option value="">-- بدون واریز --</option>
                    <?php if(!empty($banksList)): foreach($banksList as $bank): ?>
                        <option value="<?php echo $bank['id']; ?>"><?php echo htmlspecialchars($bank['bank_name']); ?> <?php echo !empty($bank['card_number']) ? '('.substr($bank['card_number'], -4).')' : ''; ?></option>
                    <?php endforeach; endif; ?>
                </select>
            </div>

            <div class="flex gap-3 mt-6 pt-2">
                <button type="button" onclick="$('#editSubModal').addClass('hidden').removeClass('flex');" class="flex-1 bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300 p-3 rounded-xl text-sm font-bold transition hover:bg-gray-200 dark:hover:bg-slate-600">لغو</button>
                <button type="submit" class="flex-1 bg-amber-500 hover:bg-amber-600 transition text-white p-3 rounded-xl text-sm font-bold shadow-sm">ذخیره تراز</button>
            </div>
        </form>
    </div>
</div>

<div id="editDbItemModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-[110] p-4 backdrop-blur-sm">
    <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-4xl w-full shadow-2xl flex flex-col md:flex-row gap-6 max-h-[90vh]">
        <div class="w-full md:w-1/2 overflow-y-auto custom-scrollbar pr-2">
            <h2 class="text-xl font-bold mb-6 dark:text-white flex items-center gap-2">📝 ویرایش اشتراک در دیتابیس</h2>
            <form method="POST" action="subscriptions.php" class="space-y-4">
                <input type="hidden" name="action" value="edit_item"><input type="hidden" name="item_id" id="edit_db_item_id">
                <div><label class="block text-xs font-bold text-gray-500 mb-2">Username</label><input type="text" name="account_username" id="edit_db_username" required class="w-full border border-gray-200 dark:border-slate-600 p-3 rounded-xl bg-gray-50 dark:bg-slate-700 dark:text-white font-mono text-sm" dir="ltr"></div>
                <div><label class="block text-xs font-bold text-gray-500 mb-2">Sub Link</label><textarea name="config_link" id="edit_db_link" rows="4" required class="w-full border border-gray-200 dark:border-slate-600 p-3 rounded-xl bg-gray-50 dark:bg-slate-700 dark:text-white font-mono text-xs" dir="ltr" oninput="updateIframePreview(this.value)"></textarea></div>
                <div class="flex gap-2 mt-4"><button type="submit" class="flex-1 bg-blue-600 text-white py-3 rounded-xl font-bold shadow-sm hover:bg-blue-700 transition">ذخیره تغییرات</button><button type="button" onclick="$('#editDbItemModal').addClass('hidden').removeClass('flex')" class="flex-1 bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-white py-3 rounded-xl font-bold transition">لغو</button></div>
            </form>
        </div>
        <div class="w-full md:w-1/2 flex flex-col"><h3 class="text-sm font-bold text-blue-600 mb-4">🔍 پیش‌نمایش لینک</h3><div class="bg-gray-100 dark:bg-slate-900 rounded-2xl flex-1 border border-gray-200 dark:border-slate-700"><iframe id="sub_link_preview" class="w-full h-full min-h-[300px] rounded-2xl"></iframe></div></div>
    </div>
</div>

<div id="qrModal" class="fixed inset-0 bg-black/60 hidden items-center justify-center z-[110] p-4 backdrop-blur-sm">
    <div class="bg-[#f8f9fa] dark:bg-slate-800 rounded-2xl max-w-4xl w-full shadow-2xl relative flex flex-col md:flex-row min-h-[400px] overflow-hidden">
        <button onclick="$('#qrModal').removeClass('flex').addClass('hidden');" class="absolute top-4 right-4 text-gray-400 hover:text-gray-700 dark:hover:text-white z-20">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        <div class="w-full md:w-5/12 bg-[#f8f9fa] dark:bg-slate-800 p-8 flex flex-col items-center justify-center border-b md:border-b-0 md:border-r border-gray-200 dark:border-slate-700 relative">
            <h3 class="absolute top-6 left-6 text-sm font-bold text-gray-800 dark:text-gray-200 flex items-center gap-2" dir="ltr">
                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm14 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg>
                <span id="qr_modal_title" class="truncate max-w-[200px]"></span>
            </h3>
            <div id="qrcode_wrapper" class="bg-white p-3 rounded-xl shadow-sm mt-8 flex items-center justify-center min-w-[180px] min-h-[180px]"></div>
        </div>
        <div class="w-full md:w-7/12 bg-[#f4f5f7] dark:bg-slate-900/50 p-6 flex flex-col">
            <div class="flex justify-between items-center mb-4 mt-2">
                <h4 class="text-sm font-bold text-gray-700 dark:text-gray-300" dir="ltr">Configurations</h4>
                <button onclick="copyAllConfigsModal()" class="text-xs font-bold text-gray-600 dark:text-gray-400 hover:text-blue-600 transition flex items-center gap-1" dir="ltr">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg> Copy All
                </button>
            </div>
            <div id="qr_configs_list" class="flex-1 overflow-y-auto custom-scrollbar space-y-2 pr-2" dir="ltr"></div>
            <div id="qr_pagination" class="hidden mt-4 pt-4 border-t border-gray-200 dark:border-slate-700 items-center justify-center gap-3">
                <button onclick="qrPrevPage()" id="qr_btn_prev" class="p-1.5 bg-white dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded disabled:opacity-50 transition hover:bg-gray-50"><svg class="w-4 h-4 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg></button>
                <span id="qr_page_info" class="text-xs font-bold text-gray-600 dark:text-gray-400 font-mono">1 / 1</span>
                <button onclick="qrNextPage()" id="qr_btn_next" class="p-1.5 bg-white dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded disabled:opacity-50 transition hover:bg-gray-50"><svg class="w-4 h-4 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></button>
            </div>
        </div>
    </div>
</div>

<div id="vpnUserModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-[100] p-4 backdrop-blur-sm">
    <div class="bg-white dark:bg-slate-800 rounded-2xl max-w-4xl w-full shadow-2xl relative flex flex-col max-h-[90vh]">
        <div class="p-5 border-b border-gray-100 dark:border-slate-700 flex justify-between items-center">
            <h2 class="text-base font-black text-gray-800 dark:text-slate-100 flex items-center gap-2">
                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                <span id="vpn_modal_title">ویرایش کاربر در سرور VPN</span>
            </h2>
            <button onclick="closeVpnUserModal()" class="text-gray-400 hover:text-gray-700 dark:hover:text-white">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
        </div>
        <div id="vpn_modal_loading" class="absolute inset-0 bg-white/80 dark:bg-slate-800/80 z-10 flex items-center justify-center hidden rounded-b-2xl">
            <div class="animate-spin w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full"></div>
        </div>
        <div class="flex-1 overflow-y-auto p-5 grid grid-cols-1 md:grid-cols-3 gap-6 custom-scrollbar" dir="rtl">
            <div class="md:col-span-2 space-y-5">
                <div class="grid grid-cols-2 gap-4">
                    <div><label class="block text-[11px] font-bold text-gray-500 dark:text-gray-400 mb-1.5">نام کاربری</label><input type="text" id="vpn_modal_username" dir="ltr" readonly class="w-full bg-gray-100 dark:bg-slate-900 border border-gray-200 dark:border-slate-600 p-2.5 rounded-lg text-sm text-gray-500 cursor-not-allowed font-mono"></div>
                    <div><label class="block text-[11px] font-bold text-gray-500 dark:text-gray-400 mb-1.5">وضعیت اکانت</label><select id="vpn_modal_status" class="w-full border border-gray-200 dark:border-slate-600 p-2.5 rounded-lg bg-white dark:bg-slate-700 dark:text-white text-sm"><option value="active">فعال</option><option value="disabled">مسدود</option><option value="on_hold">در انتظار</option></select></div>
                </div>
                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="block text-[11px] font-bold text-gray-500 dark:text-gray-400 mb-1.5">سقف حجم</label>
                        <div class="flex" dir="ltr">
                            <select id="vpn_modal_limit_unit" class="border border-r-0 border-gray-200 dark:border-slate-600 p-2.5 rounded-l-lg bg-gray-100 dark:bg-slate-600 text-sm dark:text-white font-bold outline-none focus:border-blue-500">
                                <option value="GB">GB</option>
                                <option value="MB">MB</option>
                            </select>
                            <input type="number" id="vpn_modal_limit" step="0.01" min="0" dir="ltr" class="w-full border border-gray-200 dark:border-slate-600 p-2.5 rounded-r-lg bg-gray-50 dark:bg-slate-700 dark:text-white text-sm outline-none focus:border-blue-500">
                        </div>
                    </div>
                    <div><label class="block text-[11px] font-bold text-gray-500 dark:text-gray-400 mb-1.5">ریست دوره‌ای</label><select id="vpn_modal_reset" class="w-full border border-gray-200 dark:border-slate-600 p-2.5 rounded-lg bg-white dark:bg-slate-700 dark:text-white text-sm"><option value="no_reset">بدون ریست</option><option value="day">روزانه</option><option value="week">هفتگی</option><option value="month">ماهانه</option></select></div>
                    <div><label class="block text-[11px] font-bold text-gray-500 dark:text-gray-400 mb-1.5">تاریخ انقضا</label><input type="datetime-local" id="vpn_modal_expire" dir="ltr" class="w-full border border-gray-200 dark:border-slate-600 p-2.5 rounded-lg bg-gray-50 dark:bg-slate-700 dark:text-white text-[11px]"></div>
                </div>
                <div><label class="block text-[11px] font-bold text-gray-500 dark:text-gray-400 mb-1.5">یادداشت سرور</label><textarea id="vpn_modal_note" rows="2" class="w-full border border-gray-200 dark:border-slate-600 p-2.5 rounded-lg bg-gray-50 dark:bg-slate-700 dark:text-white text-sm"></textarea></div>
                <div class="border border-gray-200 dark:border-slate-600 rounded-lg overflow-hidden">
                    <div class="px-4 py-3 bg-gray-50 dark:bg-slate-700/50 rounded-t-lg border-b border-gray-200 dark:border-slate-600"><span class="text-xs font-bold text-gray-700 dark:text-gray-200">🔒 پروتکل‌ها</span></div>
                    <div class="p-4 flex flex-wrap gap-4 bg-white dark:bg-slate-800" dir="ltr">
                        <label class="flex items-center gap-1.5"><input type="checkbox" name="vpn_modal_proxies[]" value="vless" class="text-blue-600 rounded border-gray-300 focus:ring-blue-600"> <span class="text-xs font-mono text-gray-600 dark:text-gray-300">VLESS</span></label>
                        <label class="flex items-center gap-1.5"><input type="checkbox" name="vpn_modal_proxies[]" value="vmess" class="text-blue-600 rounded border-gray-300 focus:ring-blue-600"> <span class="text-xs font-mono text-gray-600 dark:text-gray-300">VMESS</span></label>
                        <label class="flex items-center gap-1.5"><input type="checkbox" name="vpn_modal_proxies[]" value="trojan" class="text-blue-600 rounded border-gray-300 focus:ring-blue-600"> <span class="text-xs font-mono text-gray-600 dark:text-gray-300">TROJAN</span></label>
                        <label class="flex items-center gap-1.5"><input type="checkbox" name="vpn_modal_proxies[]" value="shadowsocks" class="text-blue-600 rounded border-gray-300 focus:ring-blue-600"> <span class="text-xs font-mono text-gray-600 dark:text-gray-300">SHADOWSOCKS</span></label>
                    </div>
                </div>
            </div>
            <div class="md:col-span-1 border-r md:border-r-0 md:border-l border-gray-100 dark:border-slate-700 md:pr-6 pr-0 h-full flex flex-col">
                <div class="flex border-b border-gray-200 dark:border-slate-700 mb-3" dir="ltr"><button class="flex-1 pb-2 text-xs font-bold text-blue-600 border-b-2 border-blue-600">Groups</button></div>
                <div class="flex-1 overflow-y-auto custom-scrollbar pl-1" id="vpn_modal_groups_list" dir="ltr"></div>
            </div>
        </div>
        <div class="p-4 border-t border-gray-100 dark:border-slate-700 flex justify-end gap-2 bg-gray-50 dark:bg-slate-800/80 rounded-b-2xl">
            <button onclick="closeVpnUserModal()" class="px-5 py-2 text-xs font-bold text-gray-600 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 dark:text-gray-200 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-600 transition">انصراف</button>
            <button onclick="submitVpnUserModal()" id="btn_save_vpn_modal" class="px-6 py-2 text-xs font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition shadow-sm">ذخیره اطلاعات در سرور</button>
        </div>
    </div>
</div>