{"id":727,"date":"2025-07-05T16:27:04","date_gmt":"2025-07-05T16:27:04","guid":{"rendered":"https:\/\/abatablaster.xyz\/?page_id=727"},"modified":"2025-10-16T02:41:55","modified_gmt":"2025-10-16T02:41:55","slug":"virtual-number","status":"publish","type":"page","link":"https:\/\/abatablaster.xyz\/index.php\/virtual-number\/","title":{"rendered":"Virtual Number \ud83c\udf10\ud83d\udcf1"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ms\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-app-compat.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-auth-compat.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-firestore-compat.js\"><\/script>\n\n    <script>\n        \/\/ WAJIB: Init Firebase di awal\n        const firebaseConfig = {\n            apiKey: \"AIzaSyBou8nlJ7uPZ4ioOJapzC8Dn3-K7Qs-yco\",\n            authDomain: \"whatsapp-ai-saas.firebaseapp.com\",\n            projectId: \"whatsapp-ai-saas\"\n        };\n        if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);\n        const db = firebase.firestore();\n        let currentUser = null;\n\n        \/\/ --- FORCE LOGIN & UPDATE WALLET BALANCE GLOBAL ---\n        firebase.auth().onAuthStateChanged(async function (user) {\n            if (!user) {\n                alert(\"Sila log masuk dahulu untuk gunakan pembelian nombor maya.\");\n                window.location.href = \"https:\/\/abatablaster.xyz\/index.php\/login\/\";\n                return;\n            }\n            currentUser = user;\n            \/\/ Enable beli button (boleh juga disable jika nak)\n            document.getElementById('btnBeli').disabled = false;\n\n            \/\/ Papar baki wallet\n            const snap = await db.collection(\"wallet\").doc(user.uid).get();\n            const balance = snap.exists ? (snap.data().balance ?? 0) : 0;\n            document.getElementById('walletBalance').innerText = \"RM \" + Number(balance).toFixed(2);\n\n            \/\/ Untuk virtual-number.js: expose UID (jika perlu!)\n            window.currentUser = user;\n        });\n    <\/script>\n\n    <style>\n        body {\n            font-family: 'Segoe UI', Arial, sans-serif;\n            background: #f4fafc;\n            margin: 0;\n            padding: 0;\n        }\n\n        .container {\n            background: #fff;\n            max-width: 700px;\n            \/* LEBARKAN CONTAINER *\/\n            margin: 54px auto 0 auto;\n            padding: 34px 36px 24px 36px;\n            border-radius: 22px;\n            box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);\n        }\n\n        h2 {\n            text-align: center;\n            font-size: 2.1em;\n            margin-bottom: 24px;\n            color: #16996a;\n            \/* hijau tema *\/\n            font-weight: bold;\n            letter-spacing: -1px;\n        }\n\n        label {\n            margin: 10px 0 5px 0;\n            font-weight: bold;\n            display: block;\n            font-size: 1em;\n            color: #16996a;\n        }\n\n        select,\n        button,\n        input[type=\"number\"] {\n            margin: 8px 0 14px 0;\n            width: 100%;\n            padding: 10px 8px;\n            font-size: 0.98em;\n            border: 1px solid #b1e2c2;\n            border-radius: 6px;\n            box-sizing: border-box;\n        }\n\n        button {\n            background: linear-gradient(90deg, #34e2a2 0%, #16996a 100%);\n            color: #fff;\n            font-weight: bold;\n            border: none;\n            font-size: 1.03em;\n            transition: background 0.2s;\n            cursor: pointer;\n            box-shadow: 0 2px 8px #0bc98b10;\n        }\n\n        button:disabled {\n            background: #b8e6c8;\n            cursor: not-allowed;\n        }\n\n        #status,\n        #otp {\n            margin-top: 15px;\n            font-weight: bold;\n            word-break: break-word;\n        }\n\n        \/* Table style *\/\n        .nombor-table-wrap {\n            overflow-x: auto;\n            margin-top: 22px;\n        }\n\n        table {\n            width: 100%;\n            border-collapse: collapse;\n            background: #f6fcfa;\n            font-size: 0.98em;\n            margin-bottom: 8px;\n        }\n\n        th,\n        td {\n            border: 1px solid #e3f7ed;\n            padding: 7px 4px;\n            font-size: 0.98em;\n            text-align: center;\n        }\n\n        th {\n            background: #d2fbe7;\n            color: #16996a;\n            font-size: 1em;\n            font-weight: 700;\n        }\n\n        td.status-sukses {\n            color: #12ba68;\n            font-weight: bold;\n        }\n\n        td.status-pending {\n            color: #e7a922;\n        }\n\n        td.status-gagal {\n            color: #e74c3c;\n        }\n\n        .btn-cancel {\n            background: #e74c3c;\n            color: #fff;\n            padding: 6px 13px;\n            border-radius: 4px;\n            font-size: 0.96em;\n            border: none;\n            cursor: pointer;\n            transition: background 0.2s;\n        }\n\n        .btn-cancel:disabled {\n            background: #e3f7ed;\n            color: #bbb;\n        }\n\n        #tableError {\n            color: #e74c3c;\n            font-size: 0.95em;\n            text-align: left;\n        }\n\n        @media (max-width: 900px) {\n            .container {\n                max-width: 98vw;\n                border-radius: 0;\n                padding: 14px 2vw 18px 2vw;\n            }\n\n            table {\n                font-size: 0.93em;\n            }\n\n            th,\n            td {\n                padding: 6px 2px;\n            }\n        }\n\n        \/* Responsive title *\/\n        @media (max-width: 600px) {\n            h2 {\n                font-size: 1.3em;\n                margin-bottom: 14px;\n            }\n        }\n    <\/style>\n<\/head>\n\n<body>\n    <!-- Wallet balance di atas -->\n    <div id=\"walletBalanceWrap\"\n        style=\"max-width:700px;margin:34px auto 0 auto;display:flex;align-items:center;gap:12px;padding:12px 26px 10px 26px;background:#e7ffe7;border-radius:15px;box-shadow:0 2px 8px #7adfa655;\">\n        <span style=\"font-size:1.13em;font-weight:bold;color:#1b5e20;\">Baki Wallet:<\/span>\n        <span id=\"walletBalance\" style=\"font-size:1.23em;font-weight:bold;color:#16996a;\">RM &#8212;<\/span>\n        <a href=\"https:\/\/abatablaster.xyz\/index.php\/wallet\/\"\n            style=\"margin-left:16px;font-size:13px;padding:3px 12px;border-radius:8px;background:#f5f5f5;color:#388e3c;text-decoration:none;border:1px solid #b1e2c2;\">Info\n            Wallet<\/a>\n    <\/div>\n\n    <div class=\"container\">\n        <h2>Beli Nombor Maya<\/h2>\n\n        <label>Negara:\n            <select id=\"country\">\n                <option value=\"malaysia\">Malaysia<\/option>\n                <option value=\"indonesia\">Indonesia<\/option>\n                <option value=\"india\">India<\/option>\n                <option value=\"philippines\">Philippines<\/option>\n                <option value=\"us\">USA<\/option>\n            <\/select>\n        <\/label>\n\n        <label>Servis:\n            <select id=\"service\">\n                <option value=\"whatsapp\">WhatsApp<\/option>\n                <option value=\"telegram\">Telegram<\/option>\n            <\/select>\n        <\/label>\n\n        <label>Jumlah Nombor:\n            <input type=\"number\" id=\"jumlah\" min=\"1\" max=\"5\" value=\"1\">\n        <\/label>\n\n        <button id=\"btnBeli\">Beli Nombor<\/button>\n        <div id=\"hargaAnggaran\" style=\"margin-bottom:10px;color:#1b5e20;font-weight:bold;\">\n            Anggaran Harga: RM <span id=\"hargaRM\">&#8212;<\/span> \/nombor\n        <\/div>\n\n\n        <div id=\"status\"><\/div>\n        <div id=\"otp\"><\/div>\n\n        <div class=\"nombor-table-wrap\" id=\"tableWrap\" style=\"display:none;\">\n            <table id=\"nomborTable\">\n                <thead>\n                    <tr>\n                        <th>Nombor<\/th>\n                        <th>Order ID<\/th>\n                        <th>OTP<\/th> <!-- Tambah di sini -->\n                        <th>Status<\/th>\n                        <th>Baki Saat<\/th>\n                        <th>Tindakan<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody><\/tbody>\n            <\/table>\n            <div id=\"tableError\"><\/div>\n        <\/div>\n\n        <!-- ====== Tambah progress bar DI SINI ====== -->\n        <div id=\"orderProgressWrap\" style=\"margin:12px 0 20px 0; display:none;\">\n            <span id=\"orderProgressText\" style=\"font-size:1.05em;color:#166;\">Proses pembelian nombor&#8230;<\/span>\n            <progress id=\"orderProgressBar\" max=\"5\" value=\"0\"\n                style=\"width:180px;height:15px;vertical-align:middle;\"><\/progress>\n        <\/div>\n        <!-- ====== Tamat progress bar ====== -->\n\n    <\/div>\n    <script src=\"\/js\/virtual-number.js\"><\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Baki Wallet: RM &#8212; Info Wallet Beli Nombor Maya Negara: MalaysiaIndonesiaIndiaPhilippinesUSA Servis: WhatsAppTelegram Jumlah Nombor: Beli Nombor Anggaran Harga: RM &#8212; \/nombor Nombor Order ID OTP Status Baki Saat Tindakan Proses pembelian nombor&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-727","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=727"}],"version-history":[{"count":13,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/727\/revisions"}],"predecessor-version":[{"id":1115,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/727\/revisions\/1115"}],"wp:attachment":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}