{"id":1380,"date":"2026-03-11T02:28:53","date_gmt":"2026-03-11T02:28:53","guid":{"rendered":"https:\/\/abatablaster.xyz\/?page_id=1380"},"modified":"2026-03-19T00:00:42","modified_gmt":"2026-03-19T00:00:42","slug":"smart-blast","status":"publish","type":"page","link":"https:\/\/abatablaster.xyz\/index.php\/smart-blast\/","title":{"rendered":"Smart Blast"},"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\" \/>\n    <title>Smart Blast \u2013 AbataBlaster<\/title>\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    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-storage-compat.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/xlsx@0.18.5\/dist\/xlsx.full.min.js\"><\/script>\n\n    <script src=\"https:\/\/abatablaster.xyz\/js\/shared-status.js\"><\/script>\n\n    <style>\n        @keyframes blink {\n            50% {\n                opacity: 0;\n            }\n        }\n\n        :root {\n            --page-max: 1200px;\n            --page-pad: clamp(12px, 3vw, 32px);\n            --clr-bg: #f2faf6;\n            --clr-text: #1a4321;\n            --clr-primary: #36c47c;\n            --clr-primary-d: #1a7f4a;\n            --clr-border: #b3dbc5;\n            --clr-soft: #f7fcfa;\n            --clr-accent: #cfe8dc;\n            --clr-info: #1976d2;\n            --clr-warn: #ffb300;\n            --clr-danger: #d32f2f;\n            --clr-blue: #0288d1;\n            --shadow-1: 0 3px 10px rgba(54, 196, 124, .07), 0 1.5px 5px rgba(0, 0, 0, .05);\n            --shadow-2: 0 1.5px 4px rgba(54, 196, 124, .06);\n        }\n\n        html,\n        body {\n            overflow-x: hidden;\n        }\n\n        * {\n            box-sizing: border-box;\n        }\n\n        body {\n            margin: 0;\n            padding: 0 !important;\n            font-family: 'Segoe UI', Arial, sans-serif;\n            color: var(--clr-text);\n            background: var(--clr-bg);\n        }\n\n        .page {\n            width: 100%;\n            max-width: var(--page-max);\n            margin: 0 auto;\n            padding-left: var(--page-pad);\n            padding-right: var(--page-pad);\n        }\n\n        h3 {\n            margin: 0 0 12px;\n            color: var(--clr-primary-d);\n            font-weight: 600;\n        }\n\n        label,\n        .card label {\n            display: block;\n            margin-bottom: 4px;\n            font-size: 15px;\n            color: #185734;\n        }\n\n        .card {\n            background: #fff;\n            padding: 18px 16px;\n            border-radius: 16px;\n            margin-bottom: 22px;\n            border-left: 7px solid var(--clr-primary);\n            box-shadow: var(--shadow-1);\n        }\n\n        .card.card-number {\n            padding: 12px 12px;\n            margin-bottom: 16px;\n        }\n\n        .card.card-number h3 {\n            margin: 0 0 8px;\n            font-size: 16px;\n        }\n\n        #jobStatusCard {\n            padding: 14px 16px;\n            margin-bottom: 14px;\n            border-radius: 14px;\n        }\n\n        #jobStatusCard h3 {\n            margin: 0;\n            font-size: 15px;\n            line-height: 1.2;\n        }\n\n        #progressArea {\n            font-size: 12px;\n            line-height: 1.45;\n            color: #2d6a3d;\n            margin: 0;\n        }\n\n        .compact-stack {\n            display: grid;\n            gap: 12px;\n            margin-bottom: 14px;\n        }\n\n        .compact-card {\n            background: #fff;\n            border-left: 6px solid var(--clr-primary);\n            border-radius: 14px;\n            box-shadow: var(--shadow-1);\n            padding: 14px 16px;\n        }\n\n        .compact-head {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 10px;\n            margin-bottom: 10px;\n            flex-wrap: wrap;\n        }\n\n        .compact-title {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            color: var(--clr-primary-d);\n            font-weight: 800;\n            font-size: 15px;\n        }\n\n        .compact-sub {\n            font-size: 12px;\n            color: #5f7d69;\n        }\n\n        .job-meta-grid {\n            display: grid;\n            grid-template-columns: repeat(4, minmax(0, 1fr));\n            gap: 8px;\n            margin-bottom: 10px;\n        }\n\n        .job-meta-item {\n            background: #f7fcfa;\n            border: 1px solid #e0f1e7;\n            border-radius: 10px;\n            padding: 8px 10px;\n            min-width: 0;\n        }\n\n        .job-meta-label {\n            font-size: 11px;\n            color: #678472;\n            margin-bottom: 3px;\n        }\n\n        .job-meta-value {\n            font-size: 13px;\n            font-weight: 700;\n            color: #1d4b2a;\n            overflow-wrap: anywhere;\n        }\n\n        .job-inline-list {\n            display: grid;\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n            gap: 6px 12px;\n            margin-top: 8px;\n        }\n\n        .job-inline-item {\n            font-size: 12px;\n            color: #2d6a3d;\n        }\n\n        .progress-compact-grid {\n            display: grid;\n            grid-template-columns: repeat(6, minmax(0, 1fr));\n            gap: 10px;\n        }\n\n        .progress-stat {\n            background: #f7fcfa;\n            border: 1px solid #e0f1e7;\n            border-radius: 12px;\n            padding: 10px 8px;\n            text-align: center;\n        }\n\n        .progress-stat .icon {\n            display: block;\n            font-size: 18px;\n            margin-bottom: 4px;\n        }\n\n        .progress-stat .label {\n            font-size: 11px;\n            color: #678472;\n            margin-bottom: 4px;\n        }\n\n        .progress-stat .value {\n            font-size: 22px;\n            font-weight: 800;\n            color: #19492a;\n            line-height: 1;\n        }\n\n        #senderSummaryBox.compact-card {\n            padding: 12px 14px;\n            font-size: 13px;\n        }\n\n        .sender-summary-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n            gap: 8px;\n            margin-top: 8px;\n        }\n\n        .sender-chip {\n            display: flex;\n            align-items: flex-start;\n            justify-content: space-between;\n            gap: 10px;\n            background: #f7fcfa;\n            border: 1px solid #d9eee2;\n            border-radius: 10px;\n            padding: 10px 12px;\n        }\n\n        .sender-main {\n            min-width: 0;\n            flex: 1;\n        }\n\n        .sender-chip .phone {\n            min-width: 0;\n            font-size: 12px;\n            color: #24553a;\n            line-height: 1.25;\n            overflow: hidden;\n        }\n\n        .sender-name {\n            font-size: 11px;\n            color: #6b7f73;\n            font-weight: 600;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            margin-top: 2px;\n        }\n\n        .sender-chip .count {\n            font-size: 13px;\n            font-weight: 800;\n            color: #2e7d32;\n            white-space: nowrap;\n            align-self: center;\n        }\n\n        .sender-conn-row {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            flex-wrap: wrap;\n            margin-top: 6px;\n        }\n\n        .sender-conn-badge {\n            display: inline-flex;\n            align-items: center;\n            gap: 4px;\n            padding: 4px 8px;\n            border-radius: 999px;\n            font-size: 11px;\n            font-weight: 700;\n            line-height: 1;\n            border: 1px solid transparent;\n            white-space: nowrap;\n        }\n\n        .sender-conn-badge.connected {\n            background: #e8f5e9;\n            color: #2e7d32;\n            border-color: #c8e6c9;\n        }\n\n        .sender-conn-badge.waiting {\n            background: #fff8e1;\n            color: #a46b00;\n            border-color: #ffe082;\n        }\n\n        .sender-conn-badge.disconnected {\n            background: #f5f5f5;\n            color: #616161;\n            border-color: #e0e0e0;\n        }\n\n        .sender-conn-badge.failed {\n            background: #ffebee;\n            color: #c62828;\n            border-color: #ffcdd2;\n        }\n\n        .sender-qr-btn {\n            border: 0;\n            border-radius: 999px;\n            padding: 5px 10px;\n            font-size: 11px;\n            font-weight: 700;\n            cursor: pointer;\n            background: #1565c0;\n            color: #fff;\n            white-space: nowrap;\n        }\n\n        .sender-qr-btn:hover {\n            opacity: .92;\n        }\n\n        .swal-qr-wrap {\n            text-align: center;\n        }\n\n        .swal-qr-status {\n            margin-bottom: 10px;\n            font-size: 13px;\n            font-weight: 700;\n        }\n\n        .swal-qr-image {\n            width: 100%;\n            max-width: 280px;\n            border-radius: 12px;\n            border: 1px solid #e5e7eb;\n            background: #fff;\n            padding: 10px;\n            box-sizing: border-box;\n        }\n\n        .swal-qr-note {\n            margin-top: 10px;\n            font-size: 12px;\n            color: #666;\n            line-height: 1.45;\n        }\n\n        .swal-qr-actions {\n            display: flex;\n            justify-content: center;\n            gap: 8px;\n            flex-wrap: wrap;\n            margin-top: 12px;\n        }\n\n        .swal-qr-btn {\n            border: 0;\n            border-radius: 999px;\n            padding: 8px 14px;\n            font-size: 12px;\n            font-weight: 700;\n            cursor: pointer;\n        }\n\n        .swal-qr-btn.primary {\n            background: #1565c0;\n            color: #fff;\n        }\n\n        .swal-qr-btn.secondary {\n            background: #eceff1;\n            color: #263238;\n        }\n\n        .download-actions {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n            margin-top: 10px;\n        }\n\n        @media (max-width: 900px) {\n            .job-meta-grid {\n                grid-template-columns: repeat(2, minmax(0, 1fr));\n            }\n\n            .progress-compact-grid {\n                grid-template-columns: repeat(3, minmax(0, 1fr));\n            }\n        }\n\n        @media (max-width: 700px) {\n            .compact-card {\n                padding: 12px;\n                border-radius: 12px;\n            }\n\n            .job-inline-list {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        @media (max-width: 560px) {\n            .job-meta-grid {\n                grid-template-columns: 1fr;\n            }\n\n            .progress-compact-grid {\n                grid-template-columns: repeat(2, minmax(0, 1fr));\n            }\n\n            .progress-stat .value {\n                font-size: 18px;\n            }\n\n            .sender-summary-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        .btn {\n            display: inline-block;\n            min-width: 110px;\n            padding: 8px 16px;\n            margin: 4px 4px 0 0;\n            font-size: 15px;\n            font-weight: 500;\n            color: #fff;\n            background: var(--clr-primary);\n            border: 0;\n            border-radius: 7px;\n            cursor: pointer;\n            transition: background .15s;\n            box-shadow: var(--shadow-2);\n        }\n\n        .btn:hover,\n        .btn:focus {\n            background: var(--clr-primary-d);\n        }\n\n        #stopBtn {\n            background: var(--clr-danger);\n        }\n\n        #stopBtn:hover,\n        #stopBtn:focus {\n            background: #b71c1c;\n        }\n\n        #pauseBtn {\n            background: var(--clr-warn);\n            color: #fff;\n        }\n\n        #pauseBtn:hover,\n        #pauseBtn:focus {\n            background: #c68400;\n        }\n\n        #resumeBtn {\n            background: var(--clr-blue);\n            color: #fff;\n        }\n\n        #resumeBtn:hover,\n        #resumeBtn:focus {\n            background: #01579b;\n        }\n\n        textarea,\n        input[type=\"text\"],\n        input[type=\"number\"],\n        input[type=\"file\"],\n        select {\n            width: 100%;\n            font-size: 15px;\n            padding: 7px 9px;\n            margin: 6px 0 12px;\n            border: 1.3px solid var(--clr-border);\n            border-radius: 6px;\n            background: var(--clr-soft);\n            outline: none;\n            transition: border .2s, background .2s;\n        }\n\n        textarea:focus,\n        input[type=\"text\"]:focus,\n        input[type=\"number\"]:focus,\n        select:focus {\n            border-color: var(--clr-primary);\n            background: #f2faf6;\n        }\n\n        input[type=\"file\"] {\n            padding: 0;\n            background: none;\n            border: none;\n        }\n\n        #numberList {\n            display: grid;\n            gap: 8px 10px;\n            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));\n            max-height: none;\n            overflow: unset;\n            padding-right: 0;\n        }\n\n        #numberList label {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 10px;\n            padding: 6px 10px;\n            background: var(--clr-soft);\n            border: 1px dashed var(--clr-accent);\n            border-radius: 8px;\n            max-width: 100%;\n            white-space: normal;\n            overflow-wrap: anywhere;\n            min-width: 0;\n            font-size: 13px;\n            line-height: 1.25;\n        }\n\n        .settings-wrap {\n            margin-bottom: 18px;\n        }\n\n        .settings-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: #ffffff;\n            border-left: 7px solid var(--clr-primary);\n            border-radius: 16px;\n            padding: 14px 16px;\n            box-shadow: var(--shadow-1);\n            border: 1px solid rgba(0, 0, 0, .06);\n            cursor: pointer;\n            user-select: none;\n        }\n\n        .settings-header .title {\n            font-weight: 800;\n            color: var(--clr-primary-d);\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .settings-header .meta {\n            font-size: 12px;\n            color: #2d6a3d;\n            opacity: .85;\n        }\n\n        .settings-header .chev {\n            font-size: 18px;\n            transition: transform .18s ease;\n        }\n\n        .settings-header[data-open=\"0\"] .chev {\n            transform: rotate(-90deg);\n        }\n\n        .settings-body {\n            margin-top: 10px;\n        }\n\n        .settings-body[hidden] {\n            display: none;\n        }\n\n        .settings-actions {\n            display: flex;\n            gap: 8px;\n            flex-wrap: wrap;\n            margin-top: 10px;\n        }\n\n        .btn-mini {\n            padding: 6px 10px;\n            border-radius: 10px;\n            border: 1px dashed rgba(0, 0, 0, .18);\n            background: #f7fcfa;\n            cursor: pointer;\n            font-size: 13px;\n            color: #185734;\n        }\n\n        .btn-mini:hover {\n            border-style: solid;\n        }\n\n        .timer-block-ui {\n            background: #f4fef8;\n            border: 1.4px solid #c4f1e3;\n            border-radius: 11px;\n            padding: 15px 18px 10px;\n            margin-bottom: 18px;\n            box-shadow: var(--shadow-2);\n        }\n\n        .timer-block-title {\n            font-size: 16px;\n            font-weight: 700;\n            color: #19734d;\n            margin-bottom: 7px;\n        }\n\n        .timer-block-info {\n            background: #eafbea;\n            color: #19734d;\n            font-size: 13px;\n            padding: 7px 13px;\n            border-left: 3.5px solid var(--clr-primary);\n            border-radius: 7px;\n            margin-bottom: 12px;\n        }\n\n        .grid-2 {\n            display: grid;\n            gap: 14px;\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n\n        .small-note {\n            font-size: 12px;\n            color: #666;\n            margin-top: 2px;\n        }\n\n        .status-pill {\n            display: inline-block;\n            padding: 4px 10px;\n            border-radius: 999px;\n            font-size: 12px;\n            font-weight: 700;\n        }\n\n        .pill-green {\n            background: #e8f5e9;\n            color: #2e7d32;\n        }\n\n        .pill-orange {\n            background: #fff3e0;\n            color: #ef6c00;\n        }\n\n        .pill-red {\n            background: #ffebee;\n            color: #c62828;\n        }\n\n        .pill-blue {\n            background: #e3f2fd;\n            color: #1565c0;\n        }\n\n        @media (max-width: 700px) {\n            .btn {\n                font-size: 13px;\n                min-width: 90px;\n                padding: 8px 6px;\n                margin: 3px 2px 0 0;\n            }\n\n            .card {\n                padding: 12px 7px;\n                border-radius: 10px;\n            }\n\n            .grid-2 {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        @media (max-width: 560px) {\n            #numberList {\n                grid-template-columns: 1fr;\n            }\n        }\n    <\/style>\n<\/head>\n\n<body>\n\n    <main class=\"page\">\n\n        <div id=\"statusHeader\" style=\"display: none;\">\n            <div id=\"topUserStatus\"\n                style=\"background: #f1f8e9; border: 1px solid #c5e1a5; padding: 15px; border-radius: 10px; margin-bottom: 30px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; font-size: 14px;\">\n                <div>\n                    <div>\ud83d\udce7 <strong>Email:<\/strong> <span id=\"userEmail\">\u2013<\/span><\/div>\n                    <div>\ud83d\udcbc <strong>Pakej:<\/strong> <span id=\"infoPakej\">\u2013<\/span><\/div>\n                    <div>\ud83d\udce4 <strong>Mesej Baki:<\/strong> <span id=\"infoMesej\">\u2013<\/span> (<span id=\"infoHari\">\u2013<\/span>\n                        hari)<\/div>\n                    <div>\ud83d\udcf1 <strong>WhatsApp Aktif:<\/strong> <span id=\"infoNombor\">\u2013<\/span><\/div>\n                <\/div>\n                <div style=\"margin-left: auto; align-self: center; text-align: right;\">\n                    <a href=\"https:\/\/abatablaster.xyz\/index.php\/telegram-alert\/\"\n                        style=\"display:block; margin-bottom: 8px; color: #1565c0; font-weight: bold;\">\n                        \ud83d\udd14 Sambungkan Telegram\n                    <\/a>\n                    <button onclick=\"logout()\"\n                        style=\"background: #d32f2f; color: white; padding: 6px 15px; border-radius: 6px; border: none;\">\ud83d\udeaa\n                        Log Keluar<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div id=\"amaranLangganan\"\n            style=\"display: none; background: #ffebee; border: 1px solid #f44336; color: #b71c1c; padding: 12px; border-radius: 10px; margin-bottom: 20px; font-weight: bold; text-align: center; animation: blink 1s step-end infinite;\">\n            \u26a0\ufe0f Langganan anda telah tamat atau mesej telah habis. Sila upgrade untuk terus gunakan sistem ini.\n        <\/div>\n\n        <div style=\"text-align: center; margin-bottom: 30px;\">\n            <img decoding=\"async\" style=\"max-width: 180px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);\"\n                src=\"https:\/\/abatablaster.xyz\/wp-content\/uploads\/2025\/05\/photo_2024-05-16_15-47-59.jpg\"\n                alt=\"Abata Blaster Logo\" \/>\n        <\/div>\n\n        <div class=\"card card-number\">\n            <h3>Pilih Nombor Aktif<\/h3>\n            <div id=\"numberList\"><\/div>\n        <\/div>\n\n        <div class=\"settings-wrap\" id=\"settingsWrap\">\n            <div class=\"settings-header\" id=\"settingsToggle\" data-open=\"1\">\n                <div>\n                    <div class=\"title\">\u2699\ufe0f Settings Smart Blast <span class=\"meta\">(Klik untuk buka\/tutup)<\/span><\/div>\n                    <div class=\"meta\" id=\"settingsSummary\">Mode: Blast \u2022 Quota: \u2013 \u2022 Delay: \u2013 \u2022 Media: \u2013<\/div>\n                <\/div>\n                <div class=\"chev\">\u25be<\/div>\n            <\/div>\n\n            <div class=\"settings-body\" id=\"settingsBody\">\n\n                <div class=\"card\">\n                    <h3>Maklumat Job<\/h3>\n                    <label>Nama Job \/ Kempen<\/label>\n                    <input type=\"text\" id=\"jobName\" placeholder=\"Contoh: Promo Raya Mac 2026\">\n                    <div class=\"small-note\">Nama ini untuk anda kenal job Smart Blast dalam status &#038; history.<\/div>\n                <\/div>\n\n                <div class=\"card\">\n                    <h3>Tetapan Harian Smart Blast<\/h3>\n\n                    <div class=\"timer-block-ui\">\n                        <div class=\"timer-block-title\">\ud83d\udcc5 Daily Quota<\/div>\n                        <div class=\"timer-block-info\">\n                            Setiap nombor hanya akan blast ikut limit harian. Sistem akan pause automatik selepas cycle\n                            harian selesai.\n                        <\/div>\n\n                        <div class=\"grid-2\">\n                            <div>\n                                <label>Had maksimum blast setiap nombor \/ sehari<\/label>\n                                <input type=\"number\" id=\"dailyQuotaPerSender\" value=\"40\" min=\"1\" max=\"40\">\n                                <div id=\"quotaPerBotLiveInfo\" class=\"small-note\" style=\"color:#1565c0;\">\n                                    Quota sebenar cycle hari ini akan dikira automatik ikut jumlah contact &#038; bot\n                                    dipilih. Maksimum dibenarkan ialah 40 contact bagi setiap nombor sehari.\n                                <\/div>\n                            <\/div>\n                            <div>\n                                <label>Pause selepas selesai cycle harian<\/label>\n                                <input type=\"number\" id=\"dailyPauseHours\" value=\"24\" min=\"1\" max=\"72\">\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"timer-block-ui\">\n                        <div class=\"timer-block-title\">\u23f1\ufe0f Delay Blasting<\/div>\n                        <div class=\"timer-block-info\">\n                            Delay rawak antara mesej untuk kurangkan pattern terlalu laju.\n                        <\/div>\n\n                        <div class=\"grid-2\">\n                            <div>\n                                <label>Delay minimum (saat)<\/label>\n                                <input type=\"number\" id=\"delayMinSec\" value=\"45\" min=\"5\" max=\"600\">\n                            <\/div>\n                            <div>\n                                <label>Delay maksimum (saat)<\/label>\n                                <input type=\"number\" id=\"delayMaxSec\" value=\"120\" min=\"5\" max=\"900\">\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div id=\"smartBlastEstimate\" style=\"font-size:13px;color:#1976d2;margin-top:5px;\"><\/div>\n                <\/div>\n\n                <div class=\"card\">\n                    <h3>Upload Contact List (CSV\/JSON)<\/h3>\n                    <input type=\"file\" id=\"fileInput\"\n                        accept=\".csv,.json,text\/csv,application\/json,text\/plain,application\/vnd.ms-excel\">\n                    <button id=\"downloadCsvTemplateBtn\" class=\"btn\" type=\"button\"\n                        style=\"margin-left:10px;background:#1976d2;\">Download Contoh CSV<\/button>\n                    <div class=\"small-note\">\n                        Pastikan field nombor utama ialah <b>no_tel<\/b>. Anda masih boleh guna field lain untuk\n                        personalized text seperti <b>{{nama}}<\/b>, <b>{{company}}<\/b>, dll.\n                    <\/div>\n\n                    <div id=\"uploadProgressWrap\" style=\"display:none;margin-top:10px;\">\n                        <div style=\"height:10px;background:#e0f2f1;border-radius:6px;overflow:hidden;\">\n                            <div id=\"uploadProgressBar\" style=\"height:10px;width:0%;background:#26a69a;\"><\/div>\n                        <\/div>\n                        <div id=\"uploadProgressText\" style=\"font-size:12px;color:#1565c0;margin-top:6px;\">\n                            Menunggu&#8230;\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"card\" id=\"xlsxConverterCard\"\n                    style=\"background:#f7fcfa;border-left:7px solid #00bfa5; margin-bottom:18px;\">\n                    <button id=\"toggleConverterBtn\" type=\"button\"\n                        style=\"background:#009688;color:#fff;padding:7px 16px;border-radius:7px;border:none;font-size:14px;cursor:pointer;font-weight:600;margin-bottom:8px;\">\n                        \u2b07\ufe0f Tukar Excel ke CSV? (Klik untuk buka\/tutup)\n                    <\/button>\n                    <div id=\"xlsxToCsvSection\" style=\"display:none;\">\n                        <div style=\"background:#e8f5e9;padding:14px 18px;border-radius:10px;\">\n                            <b>Convert fail Excel (.xlsx) ke CSV<\/b>\n                            <div style=\"font-size:13px;color:#333;margin-bottom:7px;\">Jika anda terima contact dalam\n                                format Excel, boleh convert di sini sebelum upload ke sistem.<\/div>\n                            <input type=\"file\" id=\"xlsxFile\" accept=\".xlsx\" style=\"margin-bottom:8px;\">\n                            <button id=\"convertBtn\" onclick=\"convertXLSXtoCSV()\"\n                                style=\"padding:6px 16px;background:#43a047;color:#fff;border-radius:6px;\">Convert<\/button>\n                            <a id=\"downloadCsvBtn\" href=\"#\"\n                                style=\"display:none;margin-left:18px;padding:6px 16px;background:#43a047;color:#fff;border-radius:5px;text-decoration:none;\">Download\n                                .csv<\/a>\n                            <div id=\"csvPreview\" style=\"margin-top:12px;font-size:13px;color:#444;\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div id=\"fieldsPreview\" style=\"margin-top:10px;color:#444;font-size:13px\"><\/div>\n                <div id=\"previewMessage\" style=\"margin:10px 0;color:#2e7d32;font-size:14px\"><\/div>\n\n                <div class=\"card\">\n                    <h3>Masukkan Mesej Blast<\/h3>\n                    <textarea id=\"blastMessage\" rows=\"5\" style=\"width:100%;\"\n                        placeholder=\"Assalamualaikum {{nama}}, ini promo terbaru kami \ud83d\ude0a\"><\/textarea>\n                    <div class=\"small-note\">\n                        Anda boleh gunakan placeholder seperti <b>{{nama}}<\/b>, <b>{{company}}<\/b>, <b>{{tempat}}<\/b>\n                        mengikut field dalam CSV\/JSON anda.\n                    <\/div>\n                <\/div>\n\n                <div class=\"card\" data-section=\"media\">\n                    <h3>Lampiran Media<\/h3>\n                    <div style=\"font-size:13px;color:#1565c0;margin-bottom:8px;\">\n                        *Smart Blast kini support text, gambar, audio, video dan dokumen. Untuk keselamatan, pilih satu\n                        jenis media sahaja bagi setiap job.\n                    <\/div>\n\n                    <div id=\"mediaUploadFields\">\n                        <div style=\"margin-bottom:8px;\" id=\"imageInputBlock\">\n                            <label>Gambar (JPG\/PNG):<\/label>\n                            <input type=\"file\" id=\"blastImageInput\" accept=\"image\/*\">\n                            <button type=\"button\" id=\"clearImageInput\"\n                                style=\"display:none;margin-left:6px;\">Clear<\/button>\n                            <span id=\"uploadedImagePreview\"><\/span>\n                        <\/div>\n\n                        <div style=\"margin-bottom:8px;\" id=\"audioInputBlock\">\n                            <label>Audio (MP3\/OGG):<\/label>\n                            <input type=\"file\" id=\"blastAudioInput\" accept=\"audio\/*\">\n                            <button type=\"button\" id=\"clearAudioInput\"\n                                style=\"display:none;margin-left:6px;\">Clear<\/button>\n                            <span id=\"uploadedAudioPreview\"><\/span>\n\n                            <label\n                                style=\"display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:#185734;\">\n                                <input type=\"checkbox\" id=\"isVoiceNote\">\n                                Hantar audio sebagai Voice Note\n                            <\/label>\n                        <\/div>\n\n                        <div style=\"margin-bottom:8px;\" id=\"videoInputBlock\">\n                            <label>Video (MP4\/MOV):<\/label>\n                            <input type=\"file\" id=\"blastVideoInput\" accept=\"video\/*\">\n                            <button type=\"button\" id=\"clearVideoInput\"\n                                style=\"display:none;margin-left:6px;\">Clear<\/button>\n                            <span id=\"uploadedVideoPreview\"><\/span>\n                            <div id=\"videoPreviewWrapper\" style=\"margin-top:8px;min-height:40px;\"><\/div>\n                        <\/div>\n\n                        <div style=\"margin-bottom:8px;\" id=\"docInputBlock\">\n                            <label>Dokumen (PDF, DOCX):<\/label>\n                            <input type=\"file\" id=\"blastDocInput\" accept=\".pdf,.doc,.docx,.txt,.xls,.xlsx,.ppt,.pptx\">\n                            <button type=\"button\" id=\"clearDocInput\"\n                                style=\"display:none;margin-left:6px;\">Clear<\/button>\n                            <span id=\"uploadedDocPreview\"><\/span>\n                        <\/div>\n                    <\/div>\n\n                    <div style=\"font-size:12px;color:#888;\">\n                        Limit saiz: Gambar\/Audio \u2264 5MB, Video \u2264 20MB, Dokumen \u2264 10MB.\n                    <\/div>\n                <\/div>\n\n                <div class=\"card\">\n                    <div style=\"display:grid;grid-template-columns:1.2fr .8fr;gap:10px;align-items:end;\">\n                        <div>\n                            <label>Schedule mula jalan<\/label>\n                            <input type=\"datetime-local\" id=\"scheduledAtInput\">\n                            <div class=\"small-note\">Kosongkan jika mahu start sekarang. Isi tarikh &#038; jam jika mahu auto\n                                jalan kemudian.<\/div>\n                        <\/div>\n                        <div>\n                            <label>&nbsp;<\/label>\n                            <button id=\"scheduleBtn\" class=\"btn\" style=\"background:#6a1b9a;width:100%;\">\ud83d\udcc5 Simpan\n                                Schedule<\/button>\n                        <\/div>\n                    <\/div>\n\n                    <div style=\"display: flex; flex-wrap: wrap; gap: 8px; margin-top:12px;\">\n                        <button id=\"startBtn\" class=\"btn\">Start Smart Blast<\/button>\n                        <button id=\"stopBtn\" class=\"btn\" style=\"background:#c62828;\">Stop<\/button>\n                        <button id=\"pauseBtn\" class=\"btn\" style=\"background:#ff9800;\">Pause<\/button>\n                        <button id=\"resumeBtn\" class=\"btn\" style=\"background:#039be5;\">Resume<\/button>\n                        <button id=\"refreshStatusBtn\" class=\"btn\" style=\"background:#1976d2;\">Refresh Status<\/button>\n                    <\/div>\n                <\/div>\n\n                <div class=\"settings-actions\">\n                    <button class=\"btn-mini\" type=\"button\"\n                        onclick=\"document.getElementById('jobStatusCard')?.scrollIntoView({behavior:'smooth',block:'start'})\">\u2b07\ufe0f\n                        Lompat ke Status<\/button>\n                    <button class=\"btn-mini\" type=\"button\"\n                        onclick=\"document.getElementById('logBlastTable')?.scrollIntoView({behavior:'smooth',block:'start'})\">\u2b07\ufe0f\n                        Lompat ke Log<\/button>\n                    <button class=\"btn-mini\" type=\"button\" onclick=\"window.scrollTo({top:0,behavior:'smooth'})\">\u2b06\ufe0f Ke\n                        Atas<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"compact-stack\">\n            <div class=\"compact-card\" id=\"jobStatusCard\">\n                <div class=\"compact-head\">\n                    <div class=\"compact-title\">\ud83d\udcca Status Smart Blast<\/div>\n                    <span id=\"statusNow\" class=\"status-pill pill-blue\">Tiada sesi aktif<\/span>\n                <\/div>\n\n                <div class=\"job-meta-grid\">\n                    <div class=\"job-meta-item\">\n                        <div class=\"job-meta-label\">Job ID<\/div>\n                        <div class=\"job-meta-value\" id=\"jobIdNow\">&#8211;<\/div>\n                    <\/div>\n                    <div class=\"job-meta-item\">\n                        <div class=\"job-meta-label\">Nama Job<\/div>\n                        <div class=\"job-meta-value\" id=\"jobNameNow\">&#8211;<\/div>\n                    <\/div>\n                    <div class=\"job-meta-item\">\n                        <div class=\"job-meta-label\">Hari \/ Cycle<\/div>\n                        <div class=\"job-meta-value\" id=\"cycleNow\">&#8211;<\/div>\n                    <\/div>\n                    <div class=\"job-meta-item\">\n                        <div class=\"job-meta-label\">Next Run<\/div>\n                        <div class=\"job-meta-value\" id=\"nextRunAt\">&#8211;<\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"job-inline-list\">\n                    <div class=\"job-inline-item\"><b>Updated:<\/b> <span id=\"updatedAt\">&#8211;<\/span><\/div>\n                    <div class=\"job-inline-item\"><b>Maklumat job:<\/b> live ringkas &#038; padat<\/div>\n                <\/div>\n\n                <div id=\"countdownWrap\" class=\"job-meta-item\" style=\"margin-top:10px; display:none;\">\n                    <div class=\"job-meta-label\">Live Countdown<\/div>\n                    <div class=\"job-meta-value\" id=\"countdownValue\">&#8211;<\/div>\n                    <div class=\"compact-sub\" id=\"countdownLabel\" style=\"margin-top:4px;\">&#8211;<\/div>\n                <\/div>\n\n                <div id=\"progressArea\" style=\"white-space: pre-line; margin-top:8px;\">Belum bermula&#8230;<\/div>\n            <\/div>\n\n            <div class=\"compact-card\">\n                <div class=\"compact-head\">\n                    <div class=\"compact-title\">\ud83d\udcc8 Ringkasan Progress<\/div>\n                    <div class=\"compact-sub\">Status target semasa<\/div>\n                <\/div>\n\n                <div class=\"progress-compact-grid\">\n                    <div class=\"progress-stat\">\n                        <span class=\"icon\">\u2705<\/span>\n                        <div class=\"label\">Sent<\/div>\n                        <div class=\"value\" id=\"sentCount\">0<\/div>\n                    <\/div>\n                    <div class=\"progress-stat\">\n                        <span class=\"icon\">\u23f3<\/span>\n                        <div class=\"label\">Pending<\/div>\n                        <div class=\"value\" id=\"pendingCount\">0<\/div>\n                    <\/div>\n                    <div class=\"progress-stat\">\n                        <span class=\"icon\">\u26a0\ufe0f<\/span>\n                        <div class=\"label\">Temp Failed<\/div>\n                        <div class=\"value\" id=\"tempFailedCount\">0<\/div>\n                    <\/div>\n                    <div class=\"progress-stat\">\n                        <span class=\"icon\">\u274c<\/span>\n                        <div class=\"label\">Perm Failed<\/div>\n                        <div class=\"value\" id=\"permFailedCount\">0<\/div>\n                    <\/div>\n                    <div class=\"progress-stat\">\n                        <span class=\"icon\">\u23ed\ufe0f<\/span>\n                        <div class=\"label\">Skipped<\/div>\n                        <div class=\"value\" id=\"skippedCount\">0<\/div>\n                    <\/div>\n                    <div class=\"progress-stat\">\n                        <span class=\"icon\">\ud83d\udce6<\/span>\n                        <div class=\"label\">Total<\/div>\n                        <div class=\"value\" id=\"totalTargets\">0<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div id=\"senderSummaryBox\" class=\"compact-card\">\n                Memuatkan summary sender&#8230;\n            <\/div>\n        <\/div>\n        <div style=\"display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;\">\n            <label style=\"margin:0;font-size:13px;font-weight:600;\">Tapis Hari\/Cycle:<\/label>\n            <select id=\"logCycleFilter\" style=\"max-width:180px;margin:0;\">\n                <option value=\"ALL\">Semua Hari<\/option>\n            <\/select>\n        <\/div>\n        <div style=\"max-height:400px;overflow:auto;\">\n            <table id=\"logBlastTable\" style=\"width:100%;font-size:13px;\">\n                <thead>\n                    <tr>\n                        <th>Bil<\/th>\n                        <th>No.Target<\/th>\n                        <th>Status<\/th>\n                        <th>Dari Nombor<\/th>\n                        <th>Attempt<\/th>\n                        <th>Hari\/Cycle<\/th>\n                        <th>Updated<\/th>\n                        <th>Error<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td colspan=\"8\">Tiada log blasting&#8230;<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/div>\n\n        <div class=\"card\" style=\"margin-top:18px;\">\n            <div class=\"compact-head\">\n                <div class=\"compact-title\">\ud83d\udcc5 Jadual Schedule Smart Blast<\/div>\n                <div class=\"compact-sub\">Maksimum 5 schedule \u2022 setiap satu simpan target, copywriting, media &#038; setting\n                    sendiri<\/div>\n            <\/div>\n\n            <div style=\"overflow:auto;\">\n                <table id=\"scheduleTable\" style=\"width:100%;font-size:13px;\">\n                    <thead>\n                        <tr>\n                            <th>Bil<\/th>\n                            <th>Nama Job<\/th>\n                            <th>Tarikh \/ Masa<\/th>\n                            <th>Status<\/th>\n                            <th>Result<\/th>\n                            <th>Tindakan<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                        <tr>\n                            <td colspan=\"6\">Belum ada schedule.<\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n            <\/div>\n        <\/div>\n\n        <div class=\"download-actions\">\n            <button id=\"downloadReportBtn\" class=\"btn\" style=\"background:#1976d2;\">Download Report CSV<\/button>\n            <button id=\"downloadFailedOnlyBtn\" class=\"btn\" style=\"background:#ef6c00;\">\u2b07\ufe0f Download Tak Berjaya\n                Sahaja<\/button>\n            <button id=\"downloadRemainingBtn\" class=\"btn\">\u2b07\ufe0f Download Baki Contact<\/button>\n        <\/div>\n        <\/div>\n    <\/main>\n\n    <script src=\"\/js\/smart-blast-frontend.js\"><\/script>\n\n    <script>\n        (function () {\n            const toggle = document.getElementById('settingsToggle');\n            const body = document.getElementById('settingsBody');\n            const summary = document.getElementById('settingsSummary');\n\n            if (!toggle || !body) return;\n\n            const saved = localStorage.getItem('smartblast_settings_open');\n            const open = (saved === null) ? true : (saved === '1');\n\n            function setOpen(v) {\n                toggle.dataset.open = v ? \"1\" : \"0\";\n                body.hidden = !v;\n                localStorage.setItem('smartblast_settings_open', v ? '1' : '0');\n            }\n\n            setOpen(open);\n\n            toggle.addEventListener('click', () => {\n                const nowOpen = toggle.dataset.open === \"1\";\n                setOpen(!nowOpen);\n            });\n\n            function updateSummary() {\n                const quota = document.getElementById('dailyQuotaPerSender')?.value || '-';\n                const dMin = document.getElementById('delayMinSec')?.value || '-';\n                const dMax = document.getElementById('delayMaxSec')?.value || '-';\n\n                const hasImg = !!document.getElementById('blastImageInput')?.files?.length;\n                const hasAud = !!document.getElementById('blastAudioInput')?.files?.length;\n                const hasVid = !!document.getElementById('blastVideoInput')?.files?.length;\n                const hasDoc = !!document.getElementById('blastDocInput')?.files?.length;\n\n                let media = 'Tiada';\n                if (hasImg) media = 'Gambar';\n                else if (hasAud) media = 'Audio';\n                else if (hasVid) media = 'Video';\n                else if (hasDoc) media = 'Dokumen';\n\n                summary.textContent = `Mode: Blast \u2022 Quota: ${quota}\/hari \u2022 Delay: ${dMin}-${dMax}s \u2022 Media: ${media}`;\n            }\n\n            document.addEventListener('change', (e) => {\n                const id = e.target?.id || '';\n                if ([\n                    'dailyQuotaPerSender',\n                    'delayMinSec',\n                    'delayMaxSec',\n                    'blastImageInput',\n                    'blastAudioInput',\n                    'blastVideoInput',\n                    'blastDocInput'\n                ].includes(id)) {\n                    updateSummary();\n                }\n            });\n\n            setTimeout(updateSummary, 300);\n\n            document.getElementById('startBtn')?.addEventListener('click', () => {\n                setOpen(false);\n            });\n\n            document.getElementById('stopBtn')?.addEventListener('click', () => {\n                setOpen(true);\n            });\n        })();\n    <\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Smart Blast \u2013 AbataBlaster \ud83d\udce7 Email: \u2013 \ud83d\udcbc Pakej: \u2013 \ud83d\udce4 Mesej Baki: \u2013 (\u2013 hari) \ud83d\udcf1 WhatsApp Aktif: \u2013 \ud83d\udd14 Sambungkan Telegram \ud83d\udeaa Log Keluar \u26a0\ufe0f Langganan anda telah tamat atau mesej telah habis. Sila upgrade untuk terus gunakan sistem ini. Pilih Nombor Aktif \u2699\ufe0f Settings Smart Blast (Klik untuk buka\/tutup) Mode: Blast \u2022 [&hellip;]<\/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-1380","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1380","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=1380"}],"version-history":[{"count":13,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1380\/revisions"}],"predecessor-version":[{"id":1395,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1380\/revisions\/1395"}],"wp:attachment":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=1380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}