diff --git a/download.php b/download.php
new file mode 100644
index 0000000..13fec7a
--- /dev/null
+++ b/download.php
@@ -0,0 +1,907 @@
+<?php
+include '../../config.php';
+$mysqli = new mysqli($db_host, $db_user, $db_password, $db_name);
+
+if ($mysqli->connect_error) {
+    die("Connection failed: " . $mysqli->connect_error);
+}
+
+// Function to get a setting value
+function getSettingValue($mysqli, $setting) {
+    $query = $mysqli->prepare("SELECT value FROM tbl_appconfig WHERE setting = ?");
+    $query->bind_param("s", $setting);
+    $query->execute();
+    $result = $query->get_result();
+    if ($row = $result->fetch_assoc()) {
+        return $row['value'];
+    }
+    return '';
+}
+
+// Fetch hotspot title and description from tbl_appconfig
+$hotspotTitle = getSettingValue($mysqli, 'hotspot_title');
+$description = getSettingValue($mysqli, 'description');
+$phone = getSettingValue($mysqli, 'phone');
+$company = getSettingValue($mysqli, 'CompanyName');
+
+// Fetch router name and router ID from tbl_appconfig
+$routerName = getSettingValue($mysqli, 'router_name');
+$routerId = getSettingValue($mysqli, 'router_id');
+
+// Fetch available plans
+
+$planQuery = "SELECT id, type, name_plan, price, validity, validity_unit FROM tbl_plans WHERE routers = ? AND type = 'Hotspot'";
+$planStmt = $mysqli->prepare($planQuery);
+$planStmt->bind_param("s", $routerName);
+$planStmt->execute();
+$planResult = $planStmt->get_result();
+
+
+$htmlContent = "";
+$htmlContent .= "<!DOCTYPE html>\n";
+$htmlContent .= "<html lang=\"en\">\n";
+$htmlContent .= "<head>\n";
+$htmlContent .= "    <meta charset=\"UTF-8\">\n";
+$htmlContent .= "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n";
+$htmlContent .= "    <title>$company</title>\n";
+$htmlContent .= "    <script src=\"https://cdn.tailwindcss.com\"></script>\n";
+$htmlContent .= "    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\">\n";
+$htmlContent .= "    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/glider-js@1.7.7/glider.min.css\" />\n";
+$htmlContent .= "    <script src=\"https://cdn.jsdelivr.net/npm/glider-js@1.7.7/glider.min.js\"></script>\n";
+$htmlContent .= "    <link rel=\"preconnect\" href=\"https://cdn.jsdelivr.net\">\n";
+$htmlContent .= "    <link rel=\"preconnect\" href=\"https://cdnjs.cloudflare.com\" crossorigin>\n";
+$htmlContent .= "    <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\">\n";
+$htmlContent .= "    <style>\n";
+$htmlContent .= "        :root {\n";
+$htmlContent .= "            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n";
+$htmlContent .= "            --secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\n";
+$htmlContent .= "            --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);\n";
+$htmlContent .= "            --card-bg: rgba(255, 255, 255, 0.95);\n";
+$htmlContent .= "            --glass-bg: rgba(255, 255, 255, 0.1);\n";
+$htmlContent .= "            --backdrop-blur: blur(10px);\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .glass-card {\n";
+$htmlContent .= "            background: var(--card-bg);\n";
+$htmlContent .= "            backdrop-filter: var(--backdrop-blur);\n";
+$htmlContent .= "            border: 1px solid rgba(255, 255, 255, 0.2);\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .gradient-text {\n";
+$htmlContent .= "            background: var(--primary-gradient);\n";
+$htmlContent .= "            -webkit-background-clip: text;\n";
+$htmlContent .= "            -webkit-text-fill-color: transparent;\n";
+$htmlContent .= "            background-clip: text;\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .floating-label {\n";
+$htmlContent .= "            position: relative;\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .floating-label input:focus + label,\n";
+$htmlContent .= "        .floating-label input:not(:placeholder-shown) + label {\n";
+$htmlContent .= "            transform: translateY(-1.5rem) scale(0.85);\n";
+$htmlContent .= "            color: #1e40af;\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .floating-label label {\n";
+$htmlContent .= "            position: absolute;\n";
+$htmlContent .= "            left: 0.75rem;\n";
+$htmlContent .= "            top: 0.75rem;\n";
+$htmlContent .= "            transition: all 0.2s ease-in-out;\n";
+$htmlContent .= "            pointer-events: none;\n";
+$htmlContent .= "            color: #6b7280;\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .card-hover {\n";
+$htmlContent .= "            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .card-hover:hover {\n";
+$htmlContent .= "            transform: translateY(-4px);\n";
+$htmlContent .= "            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .btn-modern {\n";
+$htmlContent .= "            background: var(--primary-gradient);\n";
+$htmlContent .= "            transition: all 0.3s ease;\n";
+$htmlContent .= "            position: relative;\n";
+$htmlContent .= "            overflow: hidden;\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .btn-modern::before {\n";
+$htmlContent .= "            content: '';\n";
+$htmlContent .= "            position: absolute;\n";
+$htmlContent .= "            top: 0;\n";
+$htmlContent .= "            left: -100%;\n";
+$htmlContent .= "            width: 100%;\n";
+$htmlContent .= "            height: 100%;\n";
+$htmlContent .= "            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n";
+$htmlContent .= "            transition: left 0.5s;\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .btn-modern:hover::before {\n";
+$htmlContent .= "            left: 100%;\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .btn-modern:hover {\n";
+$htmlContent .= "            transform: translateY(-2px);\n";
+$htmlContent .= "            box-shadow: 0 10px 20px rgba(30, 64, 175, 0.4);\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        .pulse-animation {\n";
+$htmlContent .= "            animation: pulse 2s infinite;\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        @keyframes pulse {\n";
+$htmlContent .= "            0%, 100% { opacity: 1; }\n";
+$htmlContent .= "            50% { opacity: 0.7; }\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "    </style>\n";
+
+
+
+
+
+$htmlContent .= "</head>\n";
+$htmlContent .= "<body class=\"font-sans antialiased text-gray-900 bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 min-h-screen font-inter\">\n";
+$htmlContent .= "    <!-- Hero Section -->\n";
+$htmlContent .= "    <div class=\"relative overflow-hidden\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n";
+$htmlContent .= "        <!-- Background Pattern -->\n";
+$htmlContent .= "        <div class=\"absolute inset-0 bg-gradient-to-br from-slate-600/20 via-gray-600/20 to-slate-700/20\"></div>\n";
+$htmlContent .= "        <div class=\"absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.05\"%3E%3Ccircle cx=\"30\" cy=\"30\" r=\"2\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-30\"></div>\n";
+$htmlContent .= "        \n";
+$htmlContent .= "        <div class=\"relative mx-auto max-w-screen-2xl px-4 py-4 md:px-6\">\n";
+$htmlContent .= "            <div class=\"glass-card relative mx-auto max-w-2xl rounded-2xl p-4 shadow-xl backdrop-blur-xl\">\n";
+$htmlContent .= "                <div class=\"text-center space-y-3\">\n";
+$htmlContent .= "                    <div class=\"space-y-1\">\n";
+$htmlContent .= "                        <h1 class=\"text-2xl md:text-3xl font-black text-gray-800 mb-1\">$company</h1>\n";
+$htmlContent .= "                        <div class=\"w-16 h-0.5 bg-gray-600 mx-auto rounded-full\"></div>\n";
+$htmlContent .= "                        <p class=\"text-lg font-semibold text-gray-700\">HOTSPOT LOGIN</p>\n";
+$htmlContent .= "                    </div>\n";
+$htmlContent .= "                    \n";
+$htmlContent .= "                    <div class=\"bg-white/90 rounded-lg p-2 mb-1 shadow-sm\">\n";
+$htmlContent .= "                        <p class=\"text-xs text-gray-700 italic leading-relaxed\">\n";
+$htmlContent .= "                            Empowering businesses with reliable WiFi solutions and seamless connectivity across Kenya.\n";
+$htmlContent .= "                        </p>\n";
+$htmlContent .= "                    </div>\n";
+$htmlContent .= "                    \n";
+$htmlContent .= "                    <div class=\"bg-white/90 rounded-xl p-3 backdrop-blur-sm shadow-sm\">\n";
+$htmlContent .= "                        <h3 class=\"text-sm font-bold text-gray-800 mb-2\">How to Connect</h3>\n";
+$htmlContent .= "                        <div class=\"grid grid-cols-2 gap-2 text-gray-700\">\n";
+$htmlContent .= "                            <div class=\"flex items-center space-x-2\">\n";
+$htmlContent .= "                                <span class=\"flex-shrink-0 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">1</span>\n";
+$htmlContent .= "                                <span class=\"text-xs\">Click on your preferred package</span>\n";
+$htmlContent .= "                            </div>\n";
+$htmlContent .= "                            <div class=\"flex items-center space-x-2\">\n";
+$htmlContent .= "                                <span class=\"flex-shrink-0 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">2</span>\n";
+$htmlContent .= "                                <span class=\"text-xs\">Enter Mpesa No.</span>\n";
+$htmlContent .= "                            </div>\n";
+$htmlContent .= "                            <div class=\"flex items-center space-x-2\">\n";
+$htmlContent .= "                                <span class=\"flex-shrink-0 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">3</span>\n";
+$htmlContent .= "                                <span class=\"text-xs\">Enter pin</span>\n";
+$htmlContent .= "                            </div>\n";
+$htmlContent .= "                            <div class=\"flex items-center space-x-2\">\n";
+$htmlContent .= "                                <span class=\"flex-shrink-0 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">4</span>\n";
+$htmlContent .= "                                <span class=\"text-xs\">Wait to be connected</span>\n";
+$htmlContent .= "                            </div>\n";
+$htmlContent .= "                        </div>\n";
+$htmlContent .= "                    </div>\n";
+$htmlContent .= "                    \n";
+$htmlContent .= "                    <div class=\"bg-white/90 rounded-lg p-2 border border-gray-200/50 shadow-sm\">\n";
+$htmlContent .= "                        <p class=\"text-sm font-medium text-gray-700\">\n";
+$htmlContent .= "                            <i class=\"fas fa-phone-alt text-blue-500 mr-2\"></i>\n";
+$htmlContent .= "                            For any enquiries contact: <a href=\"tel:$phone\" class=\"font-bold text-blue-600 hover:text-blue-800 transition-colors duration-200\">$phone</a>\n";
+$htmlContent .= "                        </p>\n";
+$htmlContent .= "                    </div>\n";
+$htmlContent .= "                </div>\n";
+$htmlContent .= "            </div>\n";
+$htmlContent .= "        </div>\n";
+$htmlContent .= "    </div>\n";
+
+
+
+
+
+
+
+$htmlContent .= "    <!-- Voucher Section -->\n";
+$htmlContent .= "    <div class=\"py-3 sm:py-4 lg:py-5\">\n";
+$htmlContent .= "        <div class=\"mx-auto max-w-screen-2xl px-4 md:px-6\">\n";
+$htmlContent .= "            <div class=\"mx-auto max-w-md\">\n";
+$htmlContent .= "                <div class=\"glass-card rounded-xl p-4 shadow-lg backdrop-blur-xl\">\n";
+$htmlContent .= "                    <div class=\"text-center space-y-2\">\n";
+$htmlContent .= "                        <div class=\"w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mx-auto\">\n";
+$htmlContent .= "                            <i class=\"fas fa-ticket-alt text-white text-lg\"></i>\n";
+$htmlContent .= "                        </div>\n";
+$htmlContent .= "                        <h3 class=\"text-lg font-bold text-gray-800\">Have a Voucher Code?</h3>\n";
+$htmlContent .= "                        <p class=\"text-sm text-gray-600\">Redeem your voucher for instant access</p>\n";
+$htmlContent .= "                        <button type=\"button\" class=\"w-full flex items-center justify-center gap-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 px-8 py-4 text-center text-sm font-semibold text-white shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-purple-300 md:text-base\" onclick=\"redeemVoucher()\">\n";
+$htmlContent .= "                            <i class=\"fas fa-gift text-lg\"></i>\n";
+$htmlContent .= "                            Redeem Voucher\n";
+$htmlContent .= "                        </button>\n";
+$htmlContent .= "                    </div>\n";
+$htmlContent .= "                </div>\n";
+$htmlContent .= "            </div>\n";
+$htmlContent .= "        </div>\n";
+$htmlContent .= "    </div>\n";
+
+
+
+
+
+
+
+
+
+$htmlContent .= "    <!-- Packages Section -->\n";
+$htmlContent .= "    <div class=\"py-3 sm:py-4 lg:py-5\">\n";
+$htmlContent .= "        <div class=\"mx-auto max-w-screen-2xl px-4 md:px-6\">\n";
+$htmlContent .= "            <div class=\"text-center mb-4\">\n";
+$htmlContent .= "                <h2 class=\"text-xl font-bold text-gray-800 mb-1\">Choose Your Package</h2>\n";
+$htmlContent .= "                <p class=\"text-sm text-gray-600\">Select the perfect plan for your internet needs</p>\n";
+$htmlContent .= "            </div>\n";
+$htmlContent .= "            <div class=\"mx-auto max-w-6xl grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-3\" id=\"cards-container\">\n";
+$htmlContent .= "            </div>\n";
+$htmlContent .= "        </div>\n";
+$htmlContent .= "    </div>\n";
+
+$htmlContent .= "    <!-- Reconnection & Login Section -->\n";
+$htmlContent .= "    <div class=\"py-3 sm:py-4 lg:py-5\">\n";
+$htmlContent .= "        <div class=\"mx-auto max-w-screen-2xl px-4 md:px-6\">\n";
+$htmlContent .= "            <div class=\"max-w-2xl mx-auto space-y-4\">\n";
+$htmlContent .= "                <!-- Reconnection Card -->\n";
+$htmlContent .= "                <div class=\"glass-card rounded-xl p-4 shadow-lg backdrop-blur-xl\">\n";
+$htmlContent .= "                    <div class=\"text-center mb-3\">\n";
+$htmlContent .= "                        <div class=\"w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-2\">\n";
+$htmlContent .= "                            <i class=\"fas fa-redo text-white text-sm\"></i>\n";
+$htmlContent .= "                        </div>\n";
+$htmlContent .= "                        <h3 class=\"text-lg font-bold text-gray-800 mb-1\">Reconnect with M-Pesa Code</h3>\n";
+$htmlContent .= "                        <p class=\"text-sm text-gray-600\">Enter your M-Pesa transaction code to reconnect</p>\n";
+$htmlContent .= "                    </div>\n";
+$htmlContent .= "                    <div class=\"floating-label mb-3\">\n";
+$htmlContent .= "                        <input type=\"text\" id=\"mpesaCodeInput\" name=\"mpesa_code\" placeholder=\"\" class=\"w-full rounded-lg border-2 border-gray-200 bg-white/80 px-3 py-2 text-gray-800 outline-none ring-2 ring-transparent transition-all duration-200 focus:border-blue-500 focus:ring-blue-100 focus:bg-white text-sm\" />\n";
+$htmlContent .= "                        <label for=\"mpesaCodeInput\" class=\"text-gray-500 font-medium text-sm\">Mpesa Code or Mpesa Message</label>\n";
+$htmlContent .= "                    </div>\n";
+$htmlContent .= "                    <button id=\"reconnectBtn\" class=\"btn-modern w-full flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-white font-semibold transition-all duration-300 text-sm\">\n";
+$htmlContent .= "                        <i class=\"fas fa-wifi text-lg\"></i>\n";
+$htmlContent .= "                        Reconnect Now\n";
+$htmlContent .= "                    </button>\n";
+$htmlContent .= "                </div>\n";
+$htmlContent .= "                \n";
+$htmlContent .= "                <!-- Login Card -->\n";
+$htmlContent .= "                <div class=\"glass-card rounded-xl p-4 shadow-lg backdrop-blur-xl\">\n";
+$htmlContent .= "                    <div class=\"text-center mb-6\">\n";
+$htmlContent .= "                        <div class=\"w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4\">\n";
+$htmlContent .= "                            <i class=\"fas fa-user-check text-white text-2xl\"></i>\n";
+$htmlContent .= "                        </div>\n";
+$htmlContent .= "                        <h3 class=\"text-2xl font-bold text-gray-800 mb-2\">Already Have an Active Package?</h3>\n";
+$htmlContent .= "                        <p class=\"text-gray-600\">Login with your account details</p>\n";
+$htmlContent .= "                    </div>\n";
+$htmlContent .= "                    <form id=\"loginForm\" class=\"space-y-6\" name=\"login\" action=\"$(link-login-only)\" method=\"post\" $(if chap-id)onSubmit=\"return doLogin()\" $(endif)>\n";
+$htmlContent .= "                        <input type=\"hidden\" name=\"dst\" value=\"$(link-orig)\" />\n";
+$htmlContent .= "                        <input type=\"hidden\" name=\"popup\" value=\"true\" />\n";
+$htmlContent .= "                        <div class=\"floating-label\">\n";
+$htmlContent .= "                            <input id=\"usernameInput\" name=\"username\" type=\"text\" value=\"\" placeholder=\"\" class=\"w-full rounded-xl border-2 border-gray-200 bg-white/80 px-4 py-4 text-gray-800 outline-none ring-2 ring-transparent transition-all duration-200 focus:border-green-500 focus:ring-green-100 focus:bg-white\" />\n";
+$htmlContent .= "                            <label for=\"username\" class=\"text-gray-500 font-medium\">Username or Account Number</label>\n";
+$htmlContent .= "                        </div>\n";
+$htmlContent .= "                        <input type=\"hidden\" name=\"password\" value=\"1234\">\n";
+$htmlContent .= "                        <button id=\"submitBtn\" class=\"btn-modern w-full flex items-center justify-center gap-3 rounded-xl px-6 py-4 text-white font-semibold transition-all duration-300\" type=\"button\" onclick=\"submitLogin()\">\n";
+$htmlContent .= "                            <i class=\"fas fa-sign-in-alt text-lg\"></i>\n";
+$htmlContent .= "                            Connect Now\n";
+$htmlContent .= "                        </button>\n";
+$htmlContent .= "                    </form>\n";
+$htmlContent .= "                </div>\n";
+$htmlContent .= "            </div>\n";
+$htmlContent .= "        </div>\n";
+$htmlContent .= "    </div>\n";
+$htmlContent .= "    <!-- Footer -->\n";
+$htmlContent .= "    <div class=\"py-4 sm:py-6\">\n";
+$htmlContent .= "        <div class=\"mx-auto max-w-screen-2xl px-4 md:px-6\">\n";
+$htmlContent .= "            <div class=\"glass-card rounded-xl p-4 text-center backdrop-blur-xl\">\n";
+$htmlContent .= "                <div class=\"flex items-center justify-center space-x-2 mb-4\">\n";
+$htmlContent .= "                    <div class=\"w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center\">\n";
+$htmlContent .= "                        <i class=\"fas fa-wifi text-white text-sm\"></i>\n";
+$htmlContent .= "                    </div>\n";
+$htmlContent .= "                    <span class=\"text-lg font-bold text-gray-800\">Powered by NestICT</span>\n";
+$htmlContent .= "                </div>\n";
+$htmlContent .= "                <p class=\"text-sm text-gray-600 mb-4\">\n";
+$htmlContent .= "                    &copy; " . date("Y") . " Billing System\n";
+$htmlContent .= "                </p>\n";
+$htmlContent .= "                <div class=\"flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-6 mb-4\">\n";
+$htmlContent .= "                    <a href=\"tel:+254705042522\" class=\"inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors duration-200\">\n";
+$htmlContent .= "                        <i class=\"fas fa-phone text-blue-500 mr-2\"></i>\n";
+$htmlContent .= "                        <span>+254705042522</span>\n";
+$htmlContent .= "                    </a>\n";
+$htmlContent .= "                    <a href=\"mailto:sales@nestict.net\" class=\"inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors duration-200\">\n";
+$htmlContent .= "                        <i class=\"fas fa-envelope text-blue-500 mr-2\"></i>\n";
+$htmlContent .= "                        <span>sales@nestict.net</span>\n";
+$htmlContent .= "                    </a>\n";
+$htmlContent .= "                    <a href=\"https://wa.me/254705042522\" target=\"_blank\" class=\"inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors duration-200\">\n";
+$htmlContent .= "                        <i class=\"fab fa-whatsapp text-blue-500 mr-2\"></i>\n";
+$htmlContent .= "                        <span>WhatsApp</span>\n";
+$htmlContent .= "                    </a>\n";
+$htmlContent .= "                </div>\n";
+$htmlContent .= "                <a href=\"https://www.nestict.africa/\" target=\"_blank\" class=\"inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors duration-200\">\n";
+$htmlContent .= "                    <span class=\"mr-2\">Visit NestICT</span>\n";
+$htmlContent .= "                    <i class=\"fas fa-external-link-alt text-xs\"></i>\n";
+$htmlContent .= "                </a>\n";
+$htmlContent .= "            </div>\n";
+$htmlContent .= "        </div>\n";
+$htmlContent .= "    </div>\n";
+$htmlContent .= "</body>\n";
+
+// Add the closing script section as well, if necessary
+$htmlContent .= "<script>\n";
+// Add any required JavaScript here
+$htmlContent .= "</script>\n";
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+$htmlContent .= "<script>\n";
+$htmlContent .= "function fetchData() {\n";
+$htmlContent .= "    let domain = '" . APP_URL . "/';\n";
+$htmlContent .= "    let siteUrl = domain + \"/index.php?_route=plugin/hotspot_plan\";\n";
+$htmlContent .= "    let request = new XMLHttpRequest();\n";
+$htmlContent .= "    const routerName = encodeURIComponent(\"$routerName\");\n";
+$htmlContent .= "    const dataparams = `routername=\${routerName}`;\n";
+$htmlContent .= "    request.open(\"POST\", siteUrl, true);\n";
+$htmlContent .= "    request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');\n";
+$htmlContent .= "    request.onload = () => {\n";
+$htmlContent .= "        if (request.readyState === XMLHttpRequest.DONE) {\n";
+$htmlContent .= "            if (request.status === 200) {\n";
+$htmlContent .= "                let fetchedData = JSON.parse(request.responseText);\n";
+$htmlContent .= "                populateCards(fetchedData);\n";
+$htmlContent .= "            } else {\n";
+$htmlContent .= "                console.log(`Error \${request.status}: \${request.statusText}`);\n";
+$htmlContent .= "            }\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "    };\n";
+$htmlContent .= "    request.onerror = () => {\n";
+$htmlContent .= "        console.error(\"Network error\");\n";
+$htmlContent .= "    };\n";
+$htmlContent .= "    request.send(dataparams);\n";
+$htmlContent .= "}\n";
+
+$htmlContent .= "function populateCards(data) {\n";
+$htmlContent .= "    var cardsContainer = document.getElementById('cards-container');\n";
+$htmlContent .= "    cardsContainer.innerHTML = ''; // Clear existing content\n";
+
+$htmlContent .= "    // Sort the plans by price in ascending order\n";
+$htmlContent .= "    data.data.forEach(router => {\n";
+$htmlContent .= "        // Sort hotspot plans by price\n";
+$htmlContent .= "        router.plans_hotspot.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));\n";
+
+$htmlContent .= "        router.plans_hotspot.forEach(item => {\n";
+$htmlContent .= "            var cardDiv = document.createElement('div');\n";
+$htmlContent .= "            cardDiv.className = 'glass-card card-hover rounded-2xl shadow-xl backdrop-blur-xl overflow-hidden flex flex-col mx-auto w-full max-w-xs group';\n";
+$htmlContent .= "            cardDiv.innerHTML = `\n";
+$htmlContent .= "                <div class=\"relative bg-gradient-to-r from-blue-500 to-blue-600 text-white p-3\">\n";
+$htmlContent .= "                    <div class=\"absolute top-3 right-3 w-3 h-3 bg-white/30 rounded-full\"></div>\n";
+$htmlContent .= "                    <h2 class=\"text-base font-bold text-center mb-2\" style=\"font-size: clamp(0.875rem, 2vw, 1.125rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\n";
+$htmlContent .= "                        \${item.planname}\n";
+$htmlContent .= "                    </h2>\n";
+$htmlContent .= "                    <div class=\"w-12 h-0.5 bg-white/50 rounded-full mx-auto\"></div>\n";
+$htmlContent .= "                </div>\n";
+$htmlContent .= "                <div class=\"p-3 flex-grow flex flex-col justify-between\">\n";
+$htmlContent .= "                    <div class=\"text-center mb-3\">\n";
+$htmlContent .= "                        <div class=\"mb-2\">\n";
+$htmlContent .= "                            <span class=\"text-2xl font-black text-gray-800\">\${item.currency}</span>\n";
+$htmlContent .= "                            <span class=\"text-3xl font-black text-blue-600\">\${item.price}</span>\n";
+$htmlContent .= "                        </div>\n";
+$htmlContent .= "                        <div class=\"bg-gradient-to-r from-slate-50 to-gray-100 rounded-lg p-2\">\n";
+$htmlContent .= "                            <p class=\"text-sm font-semibold text-gray-700 flex items-center justify-center\">\n";
+$htmlContent .= "                                <i class=\"fas fa-clock text-blue-500 mr-2\"></i>\n";
+$htmlContent .= "                                Valid for \${item.validity} \${item.timelimit}\n";
+$htmlContent .= "                            </p>\n";
+$htmlContent .= "                        </div>\n";
+$htmlContent .= "                    </div>\n";
+$htmlContent .= "                </div>\n";
+$htmlContent .= "                    <button class=\"w-full bg-gradient-to-r from-gray-800 to-gray-900 text-white hover:from-gray-900 hover:to-black font-semibold py-3 px-4 rounded-xl transition-all duration-200 transform hover:-translate-y-0.5 shadow-lg hover:shadow-xl flex items-center justify-center gap-2 text-sm\"\n";
+$htmlContent .= "                        onclick=\"handlePhoneNumberSubmission('\${item.planId}', '\${item.routerId}', '\${item.price}'); return false;\"\n";
+$htmlContent .= "                        data-plan-id=\"\${item.planId}\"\n";
+$htmlContent .= "                        data-router-id=\"\${item.routerId}\">\n";
+$htmlContent .= "                            <i class=\"fas fa-shopping-cart text-base\"></i>\n";
+$htmlContent .= "                            <span>Buy Now</span>\n";
+$htmlContent .= "                    </button>\n";
+$htmlContent .= "            `;\n";
+$htmlContent .= "            cardsContainer.appendChild(cardDiv);\n";
+$htmlContent .= "        });\n";
+$htmlContent .= "    });\n";
+$htmlContent .= "}\n";
+$htmlContent .= "fetchData();\n";
+$htmlContent .= "</script>\n";
+
+
+
+
+
+
+
+
+
+
+
+$htmlContent .= "<script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11\"></script>\n";
+$htmlContent .= "<script>\n";
+$htmlContent .= "    function formatPhoneNumber(phoneNumber) {\n";
+$htmlContent .= "        if (phoneNumber.startsWith('+')) {\n";
+$htmlContent .= "            phoneNumber = phoneNumber.substring(1);\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        if (phoneNumber.startsWith('0')) {\n";
+$htmlContent .= "            phoneNumber = '254' + phoneNumber.substring(1);\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        if (phoneNumber.match(/^(7|1)/)) {\n";
+$htmlContent .= "            phoneNumber = '254' + phoneNumber;\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        return phoneNumber;\n";
+$htmlContent .= "    }\n";
+$htmlContent .= "\n";
+$htmlContent .= "    function setCookie(name, value, days) {\n";
+$htmlContent .= "        var expires = \"\";\n";
+$htmlContent .= "        if (days) {\n";
+$htmlContent .= "            var date = new Date();\n";
+$htmlContent .= "            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));\n";
+$htmlContent .= "            expires = \"; expires=\" + date.toUTCString();\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        document.cookie = name + \"=\" + (value || \"\") + expires + \"; path=/\";\n";
+$htmlContent .= "    }\n";
+$htmlContent .= "\n";
+$htmlContent .= "    function getCookie(name) {\n";
+$htmlContent .= "        var nameEQ = name + \"=\";\n";
+$htmlContent .= "        var ca = document.cookie.split(';');\n";
+$htmlContent .= "        for (var i = 0; i < ca.length; i++) {\n";
+$htmlContent .= "            var c = ca[i];\n";
+$htmlContent .= "            while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n";
+$htmlContent .= "            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "        return null;\n";
+$htmlContent .= "    }\n";
+$htmlContent .= "\n";
+$htmlContent .= "    function generateAccountId() {\n";
+$htmlContent .= "        return 'ACC' + Math.floor(10000 + Math.random() * 90000); // Generate a random number between 10000 and 99999\n";
+$htmlContent .= "    }\n";
+$htmlContent .= "\n";
+
+$htmlContent .= "var loginTimeout; // Variable to store the timeout ID\n";
+$htmlContent .= "function handlePhoneNumberSubmission(planId, routerId, price) {\n";
+
+
+
+
+
+$htmlContent .= "    var msg = \"You are about to pay Kes: \" + price + \". Enter phone number below and click pay now to initialize payment\";\n";
+
+
+
+
+
+
+
+
+
+$htmlContent .= "    const regexp = /\\\${([^{}]+)}/g;\n";
+$htmlContent .= "    let result = msg.replace(regexp, function(ignore, key) {\n";
+$htmlContent .= "        return eval(key);\n";
+$htmlContent .= "    });\n";
+$htmlContent .= "    swal.fire({\n";
+$htmlContent .= "        title: 'Enter Your Mpesa Number',\n";
+$htmlContent .= "        input: 'number',\n";
+$htmlContent .= "        inputAttributes: {\n";
+$htmlContent .= "            required: 'true'\n";
+$htmlContent .= "        },\n";
+$htmlContent .= "        inputValidator: function(value) {\n";
+$htmlContent .= "            if (value === '') {\n";
+$htmlContent .= "                return 'You need to write your phonenumber!';\n";
+$htmlContent .= "            }\n";
+$htmlContent .= "        },\n";
+$htmlContent .= "        text: result,\n";
+$htmlContent .= "        showCancelButton: true,\n";
+$htmlContent .= "        confirmButtonColor: '#3085d6',\n";
+$htmlContent .= "        cancelButtonColor: '#d33',\n";
+$htmlContent .= "        confirmButtonText: 'Pay Now',\n";
+$htmlContent .= "        showLoaderOnConfirm: true,\n";
+$htmlContent .= "        preConfirm: (phoneNumber) => {\n";
+$htmlContent .= "            var formattedPhoneNumber = formatPhoneNumber(phoneNumber);\n";
+$htmlContent .= "            var accountId = getCookie('accountId');\n";
+$htmlContent .= "            if (!accountId) {\n";
+$htmlContent .= "                accountId = generateAccountId(); // Generate a new account ID\n";
+$htmlContent .= "                setCookie('accountId', accountId, 7); // Set account ID as a cookie\n";
+$htmlContent .= "            }\n";
+$htmlContent .= "            document.getElementById('usernameInput').value = accountId; // Use account ID as the new username\n";
+$htmlContent .= "            console.log(\"Phone number for autofill:\", formattedPhoneNumber);\n";
+$htmlContent .= "\n";
+$htmlContent .= "            return fetch('" . APP_URL . "/index.php?_route=plugin/CreateHotspotuser&type=grant', {\n";
+$htmlContent .= "                method: 'POST',\n";
+$htmlContent .= "                headers: {'Content-Type': 'application/json'},\n";
+$htmlContent .= "                body: JSON.stringify({phone_number: formattedPhoneNumber, plan_id: planId, router_id: routerId, account_id: accountId}),\n";
+$htmlContent .= "            })\n";
+$htmlContent .= "            .then(response => {\n";
+$htmlContent .= "                if (!response.ok) throw new Error('Network response was not ok');\n";
+$htmlContent .= "                return response.json();\n";
+$htmlContent .= "            })\n";
+$htmlContent .= "            .then(data => {\n";
+$htmlContent .= "                if (data.status === 'error') throw new Error(data.message);\n";
+$htmlContent .= "                Swal.fire({\n";
+$htmlContent .= "                    title: 'Processing..',\n";
+$htmlContent .= "                    html: `A payment request has been sent to your phone. Please wait while we process your payment.`,\n";
+$htmlContent .= "                    showConfirmButton: false,\n";
+$htmlContent .= "                    allowOutsideClick: false,\n";
+$htmlContent .= "                    didOpen: () => {\n";
+$htmlContent .= "                        Swal.showLoading();\n";
+$htmlContent .= "                        checkPaymentStatus(formattedPhoneNumber);\n";
+$htmlContent .= "                    }\n";
+$htmlContent .= "                });\n";
+$htmlContent .= "                return formattedPhoneNumber;\n";
+$htmlContent .= "            })\n";
+$htmlContent .= "            .catch(error => {\n";
+$htmlContent .= "                Swal.fire({\n";
+$htmlContent .= "                    title: 'Oops...',\n";
+$htmlContent .= "                    text: error.message,\n";
+$htmlContent .= "                });\n";
+$htmlContent .= "            });\n";
+$htmlContent .= "        },\n";
+$htmlContent .= "        allowOutsideClick: () => !Swal.isLoading()\n";
+$htmlContent .= "    });\n";
+$htmlContent .= "}\n";
+$htmlContent .= "\n";
+$htmlContent .= "function checkPaymentStatus(phoneNumber) {\n";
+$htmlContent .= "    let checkInterval = setInterval(() => {\n";
+$htmlContent .= "        $.ajax({\n";
+$htmlContent .= "            url: '" . APP_URL . "/index.php?_route=plugin/CreateHotspotuser&type=verify',\n";
+$htmlContent .= "            method: 'POST',\n";
+$htmlContent .= "            data: JSON.stringify({account_id: document.getElementById('usernameInput').value}),\n";
+$htmlContent .= "            contentType: 'application/json',\n";
+$htmlContent .= "            dataType: 'json',\n";
+$htmlContent .= "            success: function(data) {\n";
+$htmlContent .= "                console.log('Raw Response:', data); // Debugging\n";
+$htmlContent .= "                if (data.Resultcode === '3') { // Success\n";
+$htmlContent .= "                    clearInterval(checkInterval);\n";
+$htmlContent .= "                    Swal.fire({\n";
+$htmlContent .= "                        icon: 'success',\n";
+$htmlContent .= "                        title: 'Payment Successful',\n";
+$htmlContent .= "                        text: data.Message,\n";
+$htmlContent .= "                        showConfirmButton: false\n";
+$htmlContent .= "                    });\n";
+$htmlContent .= "                    if (loginTimeout) {\n";
+$htmlContent .= "                        clearTimeout(loginTimeout);\n";
+$htmlContent .= "                    }\n";
+$htmlContent .= "                    loginTimeout = setTimeout(function() {\n";
+$htmlContent .= "                        document.getElementById('loginForm').submit();\n";
+$htmlContent .= "                    }, 2000);\n";
+$htmlContent .= "                } else if (data.Resultcode === '2') { // Error\n";
+$htmlContent .= "                    clearInterval(checkInterval);\n";
+$htmlContent .= "                    Swal.fire({\n";
+$htmlContent .= "                        title: 'Payment Issue',\n";
+$htmlContent .= "                        text: data.Message,\n";
+$htmlContent .= "                    });\n";
+$htmlContent .= "                } else if (data.Resultcode === '1') { // Primary\n";
+$htmlContent .= "                    // Continue checking\n";
+$htmlContent .= "                }\n";
+$htmlContent .= "            },\n";
+$htmlContent .= "            error: function(xhr, textStatus, errorThrown) {\n";
+$htmlContent .= "                console.log('Error: ' + errorThrown);\n";
+$htmlContent .= "            }\n";
+$htmlContent .= "        });\n";
+$htmlContent .= "    }, 2000);\n";
+$htmlContent .= "\n";
+
+
+
+
+
+
+
+$htmlContent .= "    setTimeout(() => {\n";
+$htmlContent .= "        clearInterval(checkInterval);\n";
+$htmlContent .= "        Swal.fire({\n";
+$htmlContent .= "            icon: 'warning',\n";
+$htmlContent .= "            title: 'Timeout',\n";
+$htmlContent .= "            text: 'Payment verification timed out. Please try again.',\n";
+$htmlContent .= "        });\n";
+$htmlContent .= "    }, 600000); // Stop checking after 60 seconds\n";
+$htmlContent .= "}\n";
+$htmlContent .= "</script>\n";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+$htmlContent .= "</script>\n";
+$htmlContent .= "<script>\n";
+$htmlContent .= "var loginTimeout; // Variable to store the timeout ID\n";
+$htmlContent .= "function redeemVoucher() {\n";
+$htmlContent .= "    Swal.fire({\n";
+$htmlContent .= "        title: 'Redeem Voucher',\n";
+$htmlContent .= "        input: 'text',\n";
+$htmlContent .= "        inputPlaceholder: 'Enter voucher code',\n";
+$htmlContent .= "        inputValidator: function(value) {\n";
+$htmlContent .= "            if (!value) {\n";
+$htmlContent .= "                return 'You need to enter a voucher code!';\n";
+$htmlContent .= "            }\n";
+$htmlContent .= "        },\n";
+$htmlContent .= "        confirmButtonColor: '#3085d6',\n";
+$htmlContent .= "        cancelButtonColor: '#d33',\n";
+$htmlContent .= "        confirmButtonText: 'Redeem',\n";
+$htmlContent .= "        showLoaderOnConfirm: true,\n";
+$htmlContent .= "        preConfirm: (voucherCode) => {\n";
+$htmlContent .= "            var accountId = voucherCode;\n";
+$htmlContent .= "            if (!accountId) {\n";
+$htmlContent .= "                accountId = voucherCode;\n";
+$htmlContent .= "                setCookie('accountId', accountId, 7);\n";
+$htmlContent .= "            }\n";
+$htmlContent .= "            return fetch('" . APP_URL . "/index.php?_route=plugin/CreateHotspotuser&type=voucher', {\n";
+$htmlContent .= "                method: 'POST',\n";
+$htmlContent .= "                headers: {'Content-Type': 'application/json'},\n";
+$htmlContent .= "                body: JSON.stringify({voucher_code: voucherCode, account_id: accountId}),\n";
+$htmlContent .= "            })\n";
+$htmlContent .= "            .then(response => {\n";
+$htmlContent .= "                if (!response.ok) throw new Error('Network response was not ok');\n";
+$htmlContent .= "                return response.json();\n";
+$htmlContent .= "            })\n";
+$htmlContent .= "            .then(data => {\n";
+$htmlContent .= "                if (data.status === 'error') throw new Error(data.message);\n";
+$htmlContent .= "                return data;\n";
+$htmlContent .= "            });\n";
+$htmlContent .= "        },\n";
+$htmlContent .= "        allowOutsideClick: () => !Swal.isLoading()\n";
+$htmlContent .= "    }).then((result) => {\n";
+$htmlContent .= "        if (result.isConfirmed) {\n";
+$htmlContent .= "            Swal.fire({\n";
+$htmlContent .= "                icon: 'success',\n";
+$htmlContent .= "                title: 'Voucher Redeemed',\n";
+$htmlContent .= "                text: result.value.message,\n";
+$htmlContent .= "                showConfirmButton: false,\n";
+$htmlContent .= "                allowOutsideClick: false,\n";
+$htmlContent .= "                didOpen: () => {\n";
+$htmlContent .= "                    Swal.showLoading();\n";
+$htmlContent .= "                    var username = result.value.username;\n";
+$htmlContent .= "                    console.log('Received username from server:', username);\n";
+$htmlContent .= "                    var usernameInput = document.querySelector('input[name=\"username\"]');\n";
+$htmlContent .= "                    if (usernameInput) {\n";
+$htmlContent .= "                        console.log('Found username input element.');\n";
+$htmlContent .= "                        usernameInput.value = username;\n";
+$htmlContent .= "                        loginTimeout = setTimeout(function() {\n";
+$htmlContent .= "                            var loginForm = document.getElementById('loginForm');\n";
+$htmlContent .= "                            if (loginForm) {\n";
+$htmlContent .= "                                loginForm.submit();\n";
+$htmlContent .= "                            } else {\n";
+$htmlContent .= "                                console.error('Login form not found.');\n";
+$htmlContent .= "                                Swal.fire({\n";
+$htmlContent .= "                                    title: 'Error',\n";
+$htmlContent .= "                                    text: 'Login form not found. Please try again.',\n";
+$htmlContent .= "                                });\n";
+$htmlContent .= "                            }\n";
+$htmlContent .= "                        }, 2000);\n";
+$htmlContent .= "                    } else {\n";
+$htmlContent .= "                        console.error('Username input element not found.');\n";
+$htmlContent .= "                        Swal.fire({\n";
+$htmlContent .= "                            title: 'Error',\n";
+$htmlContent .= "                            text: 'Username input not found. Please try again.',\n";
+$htmlContent .= "                        });\n";
+$htmlContent .= "                    }\n";
+$htmlContent .= "                }\n";
+$htmlContent .= "            });\n";
+$htmlContent .= "        }\n";
+$htmlContent .= "    }).catch(error => {\n";
+$htmlContent .= "        Swal.fire({\n";
+$htmlContent .= "            title: 'Oops...',\n";
+$htmlContent .= "            text: error.message,\n";
+$htmlContent .= "        });\n";
+$htmlContent .= "    });\n";
+$htmlContent .= "}\n";
+$htmlContent .= "</script>\n";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+$htmlContent .= "<script>\n";
+$htmlContent .= "var loginTimeout; // Variable to store the timeout ID\n";
+$htmlContent .= "document.addEventListener('DOMContentLoaded', function() {\n";
+$htmlContent .= "    document.getElementById('reconnectBtn').addEventListener('click', function() {\n";
+$htmlContent .= "        var mpesaCode = document.getElementById('mpesaCodeInput').value;\n";
+$htmlContent .= "        var firstWord = mpesaCode.split(' ')[0]; // Get the first word in the MPESA code\n";
+$htmlContent .= "        fetch('" . APP_URL . "/index.php?_route=plugin/CreateHotspotuser&type=reconnect', {\n";
+$htmlContent .= "            method: 'POST',\n";
+$htmlContent .= "            headers: {'Content-Type': 'application/json'},\n";
+$htmlContent .= "            body: JSON.stringify({mpesa_code: firstWord}),\n"; // Sending only the first word of the MPESA code\n";
+$htmlContent .= "        })\n";
+$htmlContent .= "        .then(response => response.json())\n";
+$htmlContent .= "        .then(data => {\n";
+$htmlContent .= "            if (data.Status === 'success') {\n";
+$htmlContent .= "                Swal.fire({\n";
+$htmlContent .= "                    icon: 'success',\n";
+$htmlContent .= "                    title: 'Reconnection Successful',\n";
+$htmlContent .= "                    text: data.Message,\n";
+$htmlContent .= "                    showConfirmButton: false,\n";
+$htmlContent .= "                    allowOutsideClick: false,\n";
+$htmlContent .= "                    didOpen: () => {\n";
+$htmlContent .= "                        Swal.showLoading();\n";
+$htmlContent .= "                        var username = data.username; // Replace with actual JSON field name\n";
+$htmlContent .= "                        console.log('Received username from server:', username);\n";
+$htmlContent .= "                        var usernameInput = document.querySelector('input[name=\"username\"]');\n";
+$htmlContent .= "                        if (usernameInput) {\n";
+$htmlContent .= "                            console.log('Found username input element.');\n";
+$htmlContent .= "                            usernameInput.value = username;\n";
+$htmlContent .= "                            loginTimeout = setTimeout(function() {\n";
+$htmlContent .= "                                var loginForm = document.getElementById('loginForm');\n";
+$htmlContent .= "                                if (loginForm) {\n";
+$htmlContent .= "                                    loginForm.submit();\n";
+$htmlContent .= "                                } else {\n";
+$htmlContent .= "                                    console.error('Login form not found.');\n";
+$htmlContent .= "                                    Swal.fire({\n";
+$htmlContent .= "                                        title: 'Error',\n";
+$htmlContent .= "                                        text: 'Login form not found. Please try again.',\n";
+$htmlContent .= "                                    });\n";
+$htmlContent .= "                                }\n";
+$htmlContent .= "                            }, 2000);\n";
+$htmlContent .= "                        } else {\n";
+$htmlContent .= "                            console.error('Username input element not found.');\n";
+$htmlContent .= "                            Swal.fire({\n";
+$htmlContent .= "                                title: 'Error',\n";
+$htmlContent .= "                                text: 'Username input not found. Please try again.',\n";
+$htmlContent .= "                            });\n";
+$htmlContent .= "                        }\n";
+$htmlContent .= "                    }\n";
+$htmlContent .= "                });\n";
+$htmlContent .= "            } else {\n";
+$htmlContent .= "                Swal.fire({\n";
+$htmlContent .= "                    title: 'Reconnection Failed',\n";
+$htmlContent .= "                    text: data.Message,\n";
+$htmlContent .= "                });\n";
+$htmlContent .= "            }\n";
+$htmlContent .= "        })\n";
+$htmlContent .= "        .catch(error => {\n";
+$htmlContent .= "            console.error('Error:', error);\n";
+$htmlContent .= "            Swal.fire({\n";
+$htmlContent .= "                title: 'Error',\n";
+$htmlContent .= "                text: 'Failed to reconnect. Please try again later.',\n";
+$htmlContent .= "            });\n";
+$htmlContent .= "        });\n";
+$htmlContent .= "    });\n";
+$htmlContent .= "});\n";
+$htmlContent .= "</script>\n";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+$htmlContent .= "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n";
+$htmlContent .= "<script>\n";
+$htmlContent .= "document.addEventListener('DOMContentLoaded', function() {\n";
+$htmlContent .= "     // Ensure the button is correctly targeted by its ID.\n";
+$htmlContent .= "     var submitBtn = document.getElementById('submitBtn');\n";
+$htmlContent .= "     \n";
+$htmlContent .= "     // Add a click event listener to the \"Login Now\" button.\n";
+$htmlContent .= "     submitBtn.addEventListener('click', function(event) {\n";
+$htmlContent .= "         event.preventDefault(); // Prevent the default button action.\n";
+$htmlContent .= "         \n";
+$htmlContent .= "         // Optional: Log to console for debugging purposes.\n";
+$htmlContent .= "         console.log(\"Login Now button clicked.\");\n";
+$htmlContent .= " \n";
+$htmlContent .= "         // Direct form submission, bypassing the doLogin function for simplicity.\n";
+$htmlContent .= "         var form = document.getElementById('loginForm');\n";
+$htmlContent .= "         form.submit(); // Submit the form directly.\n";
+$htmlContent .= "     });\n";
+$htmlContent .= "});\n";
+
+
+
+
+
+$htmlContent .= "</script>\n";
+$htmlContent .= "</html>\n";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+$planStmt->close(); 
+$mysqli->close();
+// Check if the download parameter is set
+if (isset($_GET['download']) && $_GET['download'] == '1') {
+   // Prepare the HTML content for download
+   // ... build your HTML content ...
+
+   // Specify the filename for the download
+   $filename = "login.html";
+
+   // Send headers to force download
+   header('Content-Type: application/octet-stream');
+   header('Content-Disposition: attachment; filename='.basename($filename));
+   header('Expires: 0');
+   header('Cache-Control: must-revalidate');
+   header('Pragma: public');
+   header('Content-Length: ' . strlen($htmlContent));
+
+   // Output the content
+   echo $htmlContent;
+
+   // Prevent any further output
+   exit;
+}
+
+// Regular page content goes here
+// ... HTML and PHP code to display the page ...
+
+
