<?php
//Developer: core tech web designTechnology
//Whatsapp: +2349162671360
//Telegram: @jeditech
?>
</main>

<!-- ── Bottom Navigation ─────────────────────────────────────────── -->
<?php
$bn_home    = ($current_page === 'dashboard') ? 'nav-active' : 'text-gray-400';
$bn_history = in_array($current_page, ['vtu-history','my-number','my-orders','giftcard-orders','sell-giftcard-orders']) ? 'nav-active' : 'text-gray-400';
$bn_wallet  = in_array($current_page, ['fund-wallet']) ? 'nav-active' : 'text-gray-400';
$bn_support = false;
$bn_profile = in_array($current_page, ['profile','referral']) ? 'nav-active' : 'text-gray-400';
?>
<nav class="fixed bottom-0 left-0 right-0 glass-effect bottom-nav flex justify-around items-center py-3 px-2 border-t border-gray-100 z-50">
    <a href="dashboard" class="flex flex-col items-center gap-1 <?php echo $bn_home; ?> transition-all">
        <i class="fa-solid fa-house-chimney text-xl"></i>
        <span class="text-[10px] font-bold">Home</span>
    </a>
    <a href="vtu-history" class="flex flex-col items-center gap-1 <?php echo $bn_history; ?> hover:text-primary transition-all">
        <i class="fa-solid fa-clock-rotate-left text-xl"></i>
        <span class="text-[10px] font-bold">History</span>
    </a>
    <a href="fund-wallet" class="flex flex-col items-center gap-1 <?php echo $bn_wallet; ?> hover:text-primary transition-all">
        <i class="fa-solid fa-wallet text-xl"></i>
        <span class="text-[10px] font-bold">Wallet</span>
    </a>
    <button onclick="openSupportModal()" class="flex flex-col items-center gap-1 text-gray-400 hover:text-primary transition-all">
        <i class="fa-solid fa-headset text-xl"></i>
        <span class="text-[10px] font-bold">Support</span>
    </button>
    <a href="profile" class="flex flex-col items-center gap-1 <?php echo $bn_profile; ?> hover:text-primary transition-all">
        <i class="fa-solid fa-user-gear text-xl"></i>
        <span class="text-[10px] font-bold">Profile</span>
    </a>
</nav>

<!-- ── Side Menu ─────────────────────────────────────────────────── -->
<div id="sideMenu" class="fixed inset-0 bg-black/50 z-[60] hidden transition-opacity">
    <div class="w-80 h-full bg-white flex flex-col transform translate-x-[-100%] transition-transform duration-300" id="menuContent">
        <!-- Menu Header -->
        <div class="p-6 bg-primary text-white">
            <div class="flex justify-between items-start mb-6">
                <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center text-2xl font-bold">
                    <?php echo strtoupper(substr($user['username'], 0, 1)); ?>
                </div>
                <button onclick="toggleMenu()" class="text-white opacity-80 hover:opacity-100">
                    <i class="fa-solid fa-xmark text-2xl"></i>
                </button>
            </div>
            <h2 class="font-bold text-lg"><?php echo htmlspecialchars($user['full_name'] ?: $user['username']); ?></h2>
            <p class="text-xs opacity-70"><?php echo htmlspecialchars($user['email']); ?></p>
            <div class="mt-4 inline-block bg-accent px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider">Verified User</div>
        </div>

        <!-- Menu Items -->
        <div class="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-1">
            <p class="text-[10px] font-bold text-gray-400 uppercase px-3 py-2 mt-2">Services</p>
            <a href="dashboard" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-house-chimney w-5 text-primary"></i>
                <span class="text-sm font-semibold">Dashboard</span>
            </a>
            <a href="fund-wallet" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-wallet w-5 text-primary"></i>
                <span class="text-sm font-semibold">Fund Wallet</span>
            </a>
            <?php if (!empty($site_data['module_withdraw'] ?? 1)): ?>
            <a href="withdraw" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-money-bill-transfer w-5 text-primary"></i>
                <span class="text-sm font-semibold">Withdraw</span>
            </a>
            <a href="withdrawal-history" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-receipt w-5 text-primary"></i>
                <span class="text-sm font-semibold">Withdrawal History</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_virtual_numbers'] ?? 1)): ?>
            <a href="virtual-numbers" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-hashtag w-5 text-primary"></i>
                <span class="text-sm font-semibold">Virtual Numbers</span>
                <span class="ml-auto badge-hot text-[8px] text-white px-1.5 py-0.5 rounded-full font-bold">HOT</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_smm'] ?? 1)): ?>
            <a href="boost" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-rocket w-5 text-primary"></i>
                <span class="text-sm font-semibold">Boost Social</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_buy_giftcard'] ?? 1)): ?>
            <a href="buy-giftcard" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-gift w-5 text-primary"></i>
                <span class="text-sm font-semibold">Buy Gift Cards</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_sell_giftcard'] ?? 1)): ?>
            <a href="sell-giftcard" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-tags w-5 text-primary"></i>
                <span class="text-sm font-semibold">Sell Gift Cards</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_virtual_cards'] ?? 1)): ?>
            <a href="virtual-cards" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-credit-card w-5 text-primary"></i>
                <span class="text-sm font-semibold">Virtual Cards</span>
                <span class="ml-auto badge-new text-[8px] text-white px-1.5 py-0.5 rounded-full font-bold uppercase">NEW</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_buy_data'] ?? 1)): ?>
            <a href="buy-data" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-wifi w-5 text-primary"></i>
                <span class="text-sm font-semibold">Buy Data</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_buy_airtime'] ?? 1)): ?>
            <a href="buy-airtime" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-phone w-5 text-primary"></i>
                <span class="text-sm font-semibold">Buy Airtime</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_cable_tv'] ?? 1)): ?>
            <a href="cable-tv" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-tv w-5 text-primary"></i>
                <span class="text-sm font-semibold">Cable TV</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_electricity'] ?? 1)): ?>
            <a href="electricity" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-bolt w-5 text-primary"></i>
                <span class="text-sm font-semibold">Electricity</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_marketplace'] ?? 1)): ?>
            <a href="marketplace" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-store w-5 text-primary"></i>
                <span class="text-sm font-semibold">Marketplace</span>
                <span class="ml-auto badge-new text-[8px] text-white px-1.5 py-0.5 rounded-full font-bold uppercase">NEW</span>
            </a>
            <a href="my-accounts" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-box w-5 text-primary"></i>
                <span class="text-sm font-semibold">My Accounts</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_sell_account'] ?? 1)): ?>
            <a href="sell-account" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-upload w-5 text-primary"></i>
                <span class="text-sm font-semibold">Seller Dashboard</span>
            </a>
            <a href="become-seller" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-user-tie w-5 text-primary"></i>
                <span class="text-sm font-semibold">Become Seller</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_buy_logs'] ?? 1)): ?>
            <a href="buy-logs" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-file-lines w-5 text-primary"></i>
                <span class="text-sm font-semibold">Buy Logs</span>
            </a>
            <?php endif; ?>
            <a href="api-docs" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-code w-5 text-primary"></i>
                <span class="text-sm font-semibold">API Integration</span>
                <span class="ml-auto badge-new text-[8px] text-white px-1.5 py-0.5 rounded-full font-bold uppercase">API</span>
            </a>

            <p class="text-[10px] font-bold text-gray-400 uppercase px-3 py-2 mt-4">Management</p>
            <?php if (!empty($site_data['module_virtual_numbers'] ?? 1)): ?>
            <a href="my-number" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-sim-card w-5 text-primary"></i>
                <span class="text-sm font-semibold">Number History</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_smm'] ?? 1)): ?>
            <a href="my-orders" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-list-check w-5 text-primary"></i>
                <span class="text-sm font-semibold">SMM Orders</span>
            </a>
            <?php endif; ?>
            <a href="vtu-history" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-file-invoice-dollar w-5 text-primary"></i>
                <span class="text-sm font-semibold">VTU History</span>
            </a>
            <?php if (!empty($site_data['module_buy_giftcard'] ?? 1) || !empty($site_data['module_sell_giftcard'] ?? 1)): ?>
            <a href="giftcard-orders" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-gift w-5 text-primary"></i>
                <span class="text-sm font-semibold">Gift Card Orders</span>
            </a>
            <?php endif; ?>
            <?php if (!empty($site_data['module_virtual_cards'] ?? 1)): ?>
            <a href="virtual-cards" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-credit-card w-5 text-primary"></i>
                <span class="text-sm font-semibold">Card Transactions</span>
            </a>
            <?php endif; ?>

            <p class="text-[10px] font-bold text-gray-400 uppercase px-3 py-2 mt-4">Account</p>
            <a href="profile" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-user-pen w-5 text-primary"></i>
                <span class="text-sm font-semibold">Profile Settings</span>
            </a>
            <?php if (!empty($site_data['module_referral'] ?? 1)): ?>
            <a href="referral" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-solid fa-users-viewfinder w-5 text-primary"></i>
                <span class="text-sm font-semibold">Referral Program</span>
            </a>
            <?php endif; ?>
            <button onclick="toggleMenu();openSupportModal();" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700 w-full text-left">
                <i class="fa-solid fa-headset w-5 text-primary"></i>
                <span class="text-sm font-semibold">24/7 Support</span>
            </button>
            <?php $tg_group = trim($site_data['telegram_group_url'] ?? ''); if (!empty($tg_group)): ?>
            <a href="<?php echo htmlspecialchars($tg_group); ?>" target="_blank" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700">
                <i class="fa-brands fa-telegram w-5" style="color:#0088cc;"></i>
                <span class="text-sm font-semibold">Join Telegram Group</span>
            </a>
            <?php endif; ?>
            <button onclick="toggleMenu();triggerPwaInstall();" class="flex items-center gap-4 px-3 py-3 rounded-xl hover:bg-gray-50 text-slate-700 w-full text-left" id="userInstallBtn" style="display:none;">
                <i class="fa-solid fa-download w-5 text-primary"></i>
                <span class="text-sm font-semibold">Download App</span>
            </button>
        </div>

        <!-- Logout -->
        <div class="p-4 border-t border-gray-100">
            <a href="<?php echo $site_data['web_url']; ?>/logout" class="w-full flex items-center gap-4 px-3 py-3 rounded-xl bg-red-50 text-red-600 hover:bg-red-100 transition-colors">
                <i class="fa-solid fa-right-from-bracket w-5"></i>
                <span class="text-sm font-bold uppercase">Logout</span>
            </a>
        </div>
    </div>
</div>

<!-- ── Support Modal ─────────────────────────────────────────────── -->
<div id="supportModal" class="hidden fixed inset-0 z-[70] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
    <div class="bg-white rounded-2xl max-w-md w-full p-6 relative shadow-2xl">
        <button onclick="closeSupportModal()" class="absolute top-4 right-4 w-8 h-8 rounded-lg flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition-colors">
            <i class="fa-solid fa-xmark text-gray-500"></i>
        </button>
        <div class="text-center mb-6">
            <div class="w-14 h-14 rounded-2xl bg-purple-50 flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-headset text-primary text-2xl"></i>
            </div>
            <h2 class="text-xl font-bold mb-1">Support Channels</h2>
            <p class="text-sm text-gray-500">Get help from our team — available 24/7</p>
        </div>
        <div class="space-y-3 mb-4">
            <a href="https://wa.me/ +234 9162671360
" target="_blank"
               class="flex items-center justify-center gap-3 py-3.5 px-5 rounded-xl font-semibold text-sm text-white transition-all hover:-translate-y-0.5"
               style="background:linear-gradient(135deg,#25d366,#128c7e);box-shadow:0 4px 16px rgba(37,211,102,.25);">
                <i class="fab fa-whatsapp text-lg"></i> WhatsApp Support
            </a>
            <?php if (!empty($site_data['web_telegram'])): ?>
            <a href="<?php echo htmlspecialchars($site_data['web_telegram']); ?>" target="_blank"
               class="flex items-center justify-center gap-3 py-3.5 px-5 rounded-xl font-semibold text-sm text-white transition-all hover:-translate-y-0.5"
               style="background:linear-gradient(135deg,#0088cc,#229ed9);box-shadow:0 4px 16px rgba(0,136,204,.25);">
                <i class="fab fa-telegram text-lg"></i> Telegram Support
            </a>
            <?php endif; ?>
        </div>
        <button onclick="closeSupportModal()" class="w-full py-2.5 px-4 rounded-xl text-sm font-medium bg-gray-100 hover:bg-gray-200 text-gray-600 transition-colors">
            Maybe Later
        </button>
    </div>
</div>

<!-- Live Chat Widget -->
<div id="userChatWidget" style="position:fixed;bottom:90px;right:16px;z-index:999;">
  <div id="userChatBubbles" style="display:none;flex-direction:column;gap:8px;margin-bottom:12px;">
    <?php if (!empty($site_data['whatsapp_number'])): ?>
    <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $site_data['whatsapp_number']); ?>" target="_blank" style="display:flex;align-items:center;gap:8px;background:#25d366;color:#fff;padding:9px 14px;border-radius:10px;font-size:.75rem;font-weight:600;box-shadow:0 3px 10px rgba(37,211,102,.25);text-decoration:none;"><i class="fab fa-whatsapp"></i> WhatsApp</a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_telegram'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_telegram']); ?>" target="_blank" style="display:flex;align-items:center;gap:8px;background:#0088cc;color:#fff;padding:9px 14px;border-radius:10px;font-size:.75rem;font-weight:600;box-shadow:0 3px 10px rgba(0,136,204,.25);text-decoration:none;"><i class="fab fa-telegram"></i> Telegram</a>
    <?php endif; ?>
    <?php if (!empty($site_data['channel_url'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['channel_url']); ?>" target="_blank" style="display:flex;align-items:center;gap:8px;background:#0088cc;color:#fff;padding:9px 14px;border-radius:10px;font-size:.75rem;font-weight:600;box-shadow:0 3px 10px rgba(0,136,204,.2);text-decoration:none;"><i class="fab fa-telegram"></i> Channel</a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_facebook'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_facebook']); ?>" target="_blank" style="display:flex;align-items:center;gap:8px;background:#1877f2;color:#fff;padding:9px 14px;border-radius:10px;font-size:.75rem;font-weight:600;box-shadow:0 3px 10px rgba(24,119,242,.25);text-decoration:none;"><i class="fab fa-facebook"></i> Facebook</a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_x'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_x']); ?>" target="_blank" style="display:flex;align-items:center;gap:8px;background:#000;color:#fff;padding:9px 14px;border-radius:10px;font-size:.75rem;font-weight:600;box-shadow:0 3px 10px rgba(0,0,0,.2);text-decoration:none;"><i class="fab fa-x-twitter"></i> X</a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_instagram'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_instagram']); ?>" target="_blank" style="display:flex;align-items:center;gap:8px;background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff;padding:9px 14px;border-radius:10px;font-size:.75rem;font-weight:600;box-shadow:0 3px 10px rgba(225,48,108,.25);text-decoration:none;"><i class="fab fa-instagram"></i> Instagram</a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_tiktok'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_tiktok']); ?>" target="_blank" style="display:flex;align-items:center;gap:8px;background:#000;color:#fff;padding:9px 14px;border-radius:10px;font-size:.75rem;font-weight:600;box-shadow:0 3px 10px rgba(0,0,0,.2);text-decoration:none;"><i class="fab fa-tiktok"></i> TikTok</a>
    <?php endif; ?>
    <?php if (!empty($site_data['web_youtube'])): ?>
    <a href="<?php echo htmlspecialchars($site_data['web_youtube']); ?>" target="_blank" style="display:flex;align-items:center;gap:8px;background:#ff0000;color:#fff;padding:9px 14px;border-radius:10px;font-size:.75rem;font-weight:600;box-shadow:0 3px 10px rgba(255,0,0,.25);text-decoration:none;"><i class="fab fa-youtube"></i> YouTube</a>
    <?php endif; ?>
  </div>
  <button onclick="toggleUserChat()" style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#4D148C,#6b23c2);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(77,20,140,.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .3s;" id="userChatBtn">
    <i class="fa-solid fa-headset" id="userChatIcon"></i>
  </button>
</div>

<script>
var userChatOpen=false;
function toggleUserChat(){
  userChatOpen=!userChatOpen;
  document.getElementById('userChatBubbles').style.display=userChatOpen?'flex':'none';
  document.getElementById('userChatIcon').className=userChatOpen?'fa-solid fa-xmark':'fa-solid fa-headset';
}
</script>

<script>
// Side Menu Toggle
function toggleMenu() {
    const sideMenu = document.getElementById('sideMenu');
    const menuContent = document.getElementById('menuContent');
    if (sideMenu.classList.contains('hidden')) {
        sideMenu.classList.remove('hidden');
        setTimeout(() => {
            menuContent.style.transform = 'translateX(0)';
        }, 10);
    } else {
        menuContent.style.transform = 'translateX(-100%)';
        setTimeout(() => {
            sideMenu.classList.add('hidden');
        }, 300);
    }
}
// Close menu on backdrop click
document.getElementById('sideMenu').addEventListener('click', function(e) {
    if (e.target === this) toggleMenu();
});

// Support Modal
function openSupportModal() { document.getElementById('supportModal')?.classList.remove('hidden'); }
function closeSupportModal() { document.getElementById('supportModal')?.classList.add('hidden'); }
document.getElementById('supportModal')?.addEventListener('click', function(e) {
    if (e.target === this) closeSupportModal();
});
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeSupportModal(); });
</script>
<?php include __DIR__ . '/../include/pwa-install.php'; ?>

</body>
</html>
