<?php

$configFile = "../config/theconfig.php";

require_once("../config/functions.php");
require_once("../config/topup_helpers.php");
require_once("../config/customer_session_guard.php");

// 1. Check if config file exists
if (!file_exists($configFile)) {
    header("Location: ../install/install.php");
    exit;
}

// 2. Include config file
include($configFile);

// 3. Validate DB connection
if (!isset($con) || !($con instanceof mysqli) || $con->connect_errno) {
    // If connection fails, send to installer
    header("Location: ../install/install.php");
    exit;
}

if((!(isset($_SESSION['customerid']))) && (!(isset($_SESSION['adminid'])))) {
    header('Location:login.php?error=plslogin');
    exit;
}


// Default values (in case no row or empty fields)
$cur        = '$';
$sbank      = 'Default Bank';
$brand_logo = 'assets/images/brand/logo_1758475458.png';
$favicon    = 'assets/images/brand/favicon_1758475458.ico';

// system settings
$query  = "SELECT * FROM system_settings LIMIT 1";
$result = mysqli_query($con, $query);
$settings = mysqli_fetch_assoc($result); 

if ($settings) {
    $cur        = !empty($settings['currency']) ? $settings['currency'] : $cur;
    $sbank      = !empty($settings['bank_name']) ? $settings['bank_name'] : $sbank;
    $brand_logo = !empty($settings['brand_logo']) ? $settings['brand_logo'] : $brand_logo;
    $favicon    = !empty($settings['favicon']) ? $settings['favicon'] : $favicon;
}


// customer info
$rowrec1 = null;
$customer_account_status_display = null;
if (isset($_SESSION['customerid'])) {
    $custIdEsc = mysqli_real_escape_string($con, (string) $_SESSION['customerid']);
    $result1 = mysqli_query($con, "SELECT * FROM customers WHERE customerid='" . $custIdEsc . "'");
    $rowrec1 = mysqli_fetch_array($result1);

    if (!$rowrec1 || (($rowrec1['accstatus'] ?? '') === 'blocked')) {
        customer_session_force_logout('redirect');
    }

    if (is_array($rowrec1)) {
        $rawAcc = strtolower(trim((string) ($rowrec1['accstatus'] ?? '')));
        if ($rawAcc === 'active') {
            $customer_account_status_display = ['text' => 'Active', 'variant' => 'active'];
        } elseif ($rawAcc === 'inactive') {
            $customer_account_status_display = ['text' => 'Inactive', 'variant' => 'inactive'];
        } elseif ($rawAcc !== '') {
            $customer_account_status_display = [
                'text' => ucfirst(str_replace('_', ' ', $rawAcc)),
                'variant' => 'other',
            ];
        }
    }
}

$topupNotifications = [];
$topupUnreadCount = 0;
if (isset($_SESSION['customerid'])) {
    ensureTopupSchema($con);
    $customerIdForNotif = (int) $_SESSION['customerid'];

    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['mark_topup_notif_read'])) {
        $stmtMarkNotif = $con->prepare("
            UPDATE topup_requests
            SET notified_customer = 1
            WHERE customerid = ? AND status IN ('approved', 'rejected') AND notified_customer = 0
        ");
        $stmtMarkNotif->bind_param("i", $customerIdForNotif);
        $stmtMarkNotif->execute();
        $stmtMarkNotif->close();
        header("Location: " . $_SERVER['REQUEST_URI']);
        exit;
    }

    $stmtUnreadNotif = $con->prepare("
        SELECT COUNT(*) AS unread_count
        FROM topup_requests
        WHERE customerid = ? AND status IN ('approved', 'rejected') AND notified_customer = 0
    ");
    $stmtUnreadNotif->bind_param("i", $customerIdForNotif);
    $stmtUnreadNotif->execute();
    $topupUnreadCount = (int) ($stmtUnreadNotif->get_result()->fetch_assoc()['unread_count'] ?? 0);
    $stmtUnreadNotif->close();

    $stmtNotifList = $con->prepare("
        SELECT tr.reference, tr.amount, tr.status, tr.created_at, pm.method_name
        FROM topup_requests tr
        INNER JOIN payment_methods pm ON pm.id = tr.method_id
        WHERE tr.customerid = ? AND tr.status IN ('approved', 'rejected')
        ORDER BY tr.updated_at DESC
        LIMIT 6
    ");
    $stmtNotifList->bind_param("i", $customerIdForNotif);
    $stmtNotifList->execute();
    $notifResult = $stmtNotifList->get_result();
    while ($notifRow = $notifResult->fetch_assoc()) {
        $topupNotifications[] = $notifRow;
    }
    $stmtNotifList->close();
}
?>

<html lang="en">
   <head>
      <meta charset="utf-8" />
      
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta content="" name="description" />
      <meta content="" name="author" />
      <?php if (!empty($favicon)): ?>
      <link rel="icon" href="../<?= htmlspecialchars($favicon); ?>" type="image/<?= pathinfo($favicon, PATHINFO_EXTENSION); ?>">
      <?php endif; ?>

      <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
      <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
      
      <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
      <link href="assets/atm_card.css" rel="stylesheet" type="text/css" />
      <script src="assets/libs2/custom/sweetalert.min.js"></script>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
      
      <style>
    /* --- UPDATED BLUE THEME OVERRIDES --- */
    
    /* 1. Global Font */
    body, h1, h2, h3, h4, h5, h6, span, a, p, li, div {
        font-family: 'Poppins', sans-serif !important;
    }

    td, th {font-size:13px;}
    
    .header-profile-user {
        height: 46px;
        width: 46px;
        object-fit: cover;
        border: 2px solid #e6efff !important; /* Adjusted to light blue */
    }

    /* 2. HEADER & SIDEBAR FIXES */
    .vertical-menu {
        background: #ffffff !important;
        border-right: 1px solid #e6efff !important;
    }
    
    .navbar-brand-box {
        background: #ffffff !important;
        box-shadow: none !important;
        border-bottom: 1px solid #e6efff !important;
    }

    /* SIDEBAR LINKS */
    #sidebar-menu ul li a {
        color: #545a6d !important; 
        font-weight: 500 !important;
        transition: all 0.3s;
    }
    #sidebar-menu ul li a i {
        color: #7c8db5 !important;
        min-width: 1.5rem;
    }

    /* Menu Titles - BLUE */
    .menu-title {
        color: #003399 !important; /* Updated to Blue */
        opacity: 0.8 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;
    }

    /* HOVER STATE - BLUE */
    #sidebar-menu ul li a:hover {
        color: #003399 !important;
        background-color: #ffffff !important; 
    }
    #sidebar-menu ul li a:hover i {
        color: #003399 !important;
    }

    /* ACTIVE STATE - BLUE TEXT + LIGHT BLUE BG */
    #sidebar-menu ul li a.mm-active {
        color: #003399 !important;
        background-color: #e6efff !important; 
        border-right: 3px solid #003399 !important;
    }
    #sidebar-menu ul li a.mm-active i {
        color: #003399 !important;
    }

    /* 3. Hamburger Menu - BLUE */
    .menu-icon { width: 24px; height: 24px; position: relative; color: #003399 !important; }
    .menu-line {
        position: absolute; height: 2px; background: #003399 !important;
        border-radius: 1px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform-origin: center center;
    }
    .line1 { top: 6px; left: 3px; width: 12px; }
    .line2 { top: 11px; left: 2px; width: 20px; }
    .line3 { top: 16px; left: 7px; width: 15px; }
    
    .menu-icon.active .line1 { top: 11px; left: 3px; width: 18px; transform: rotate(45deg); }
    .menu-icon.active .line2 { opacity: 0; transform: scale(0); }
    .menu-icon.active .line3 { top: 11px; left: 3px; width: 18px; transform: rotate(-45deg); }

    /* 4. Language Selector */
    select.up2 {
        color: #003399 !important;
        padding-left: 10px;
        border-radius: 5px;
        font-weight: 600;
        width: 120px;
        appearance: none;
        background: transparent;
        outline: none;
    }

   /* --- FIXED PREMIUM BOTTOM NAV --- */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80px; /* Slightly taller for better thumb reach */
    padding-bottom: env(safe-area-inset-bottom); /* iOS support */
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.mobile-nav-item {
    flex: 1;
    text-align: center;
    text-decoration: none !important;
    color: #000000 !important; /* Changed to Black */
    font-size: 10px;
    font-weight: 800 !important; /* Changed to Extra Bold */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

.mobile-nav-item i {
    font-size: 22px;
    color: #000000 !important; /* Changed to Black */
    font-weight: bold !important;
    transition: 0.3s;
}

/* Active State */
.mobile-nav-item.active {
    color: #000000 !important;
    opacity: 1;
}

.mobile-nav-item.active i {
    color: #003399 !important; /* Kept active icon blue for visibility, but text remains black */
}

/* Floating Middle Button Fix */
.mobile-nav-item.middle-item {
    position: relative;
    top: -25px; /* Pulls it up out of the bar */
    z-index: 10000;
}

.mobile-nav-item.middle-item .nav-circle {
    background: linear-gradient(135deg, #003399 0%, #005D9D 100%) !important;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 20px rgba(0, 51, 153, 0.3) !important;
    border: 5px solid #f4f7fa !important; /* Matches your body background */
}

.mobile-nav-item.middle-item .nav-circle i {
    color: #ffffff !important;
    font-size: 26px;
}

.mobile-nav-item.middle-item span {
    position: absolute;
    bottom: -22px; /* Places text below the floating circle */
    width: 100%;
    color: #000000 !important; /* Force Black */
    font-weight: 800 !important; /* Force Bold */
}

.topup-notif-menu {
    min-width: 340px;
    max-width: 360px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.topup-notif-head {
    padding: 12px 14px;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topup-notif-list {
    max-height: 320px;
    overflow-y: auto;
}
.topup-notif-item {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.topup-notif-item:last-child {
    border-bottom: 0;
}
.topup-notif-item p {
    margin: 0;
    font-size: 12px;
    color: #334155;
}
.topup-notif-meta {
    font-size: 11px;
    color: #64748b;
}

/* Account status (Active / Inactive) — top of customer app */
.customer-account-status-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid #e6efff;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.customer-acc-status-pill {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.3;
}
.customer-acc-status-pill--active {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.customer-acc-status-pill--inactive {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.customer-acc-status-pill--other {
    background: #e2e8f0;
    color: #475569;
    border: 1px solid #cbd5e1;
}
</style>
   </head>
   <body>
      <header id="page-topbar">
         <?php if ($customer_account_status_display !== null): ?>
         <div class="customer-account-status-row" role="status" aria-live="polite">
            <span class="customer-acc-status-pill customer-acc-status-pill--<?= htmlspecialchars($customer_account_status_display['variant'], ENT_QUOTES, 'UTF-8'); ?>">
               Account: <?= htmlspecialchars($customer_account_status_display['text'], ENT_QUOTES, 'UTF-8'); ?>
            </span>
         </div>
         <?php endif; ?>
         <div class="navbar-header">
            <div class="d-flex">
               <div class="navbar-brand-box">
                  
                  <a href="dashboard.php" class="logo logo-light">
                  <span class="logo-sm">
                  <img src="../<?= htmlspecialchars($favicon); ?>" class="logo-filter" alt="" height="22" style="margin-top: 22px; width: 100%; height: 22px; object-fit: contain;">
                  </span>
                  <span class="logo-lg">
                  <img src="../<?= htmlspecialchars($favicon); ?>" class="logo-filter" style="margin-top: 24px; height:24px;"  alt="logo">
                  </span>
                  </a>
               </div>
               <button type="button" class="btn btn-sm px-3 font-size-16 header-item waves-effect" id="vertical-menu-btn">
                <div class="menu-icon" id="menu-icon">
                    <div class="menu-line line1" style="background-color: #003399 !important;"></div>
                    <div class="menu-line line2" style="background-color: #003399 !important;"></div>
                    <div class="menu-line line3" style="background-color: #003399 !important;"></div>
                </div>
            </button>
               <form class="app-search d-none d-lg-block" action="statement.php" method="post">
                  <div class="position-relative">
                     <input type="text" class="form-control" placeholder="Type credit or debit...">
                     <span class="bx bx-search-alt"></span>
                  </div>
               </form>
            </div>
            <div class="d-flex">
               <div class="dropdown d-inline-block d-lg-none ms-2">
                  <button type="button" class="btn header-item noti-icon waves-effect" id="page-header-search-dropdown"
                     data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="11" cy="11" r="8" stroke="#7c3aed" stroke-width="2" fill="none"/>
  <path d="m21 21-4.35-4.35" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
</svg>
                  </button>
                  <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
                     aria-labelledby="page-header-search-dropdown">
                     <form class="p-3" action="statement.php" method="post">
                        <div class="form-group m-0">
                           <div class="input-group">
                              <input type="text" name="query" class="form-control" placeholder="Type credit or debit..." aria-label="Recipient's Details">
                              <div class="input-group-append">
                                 <button class="btn btn-primary exp" type="submit" style="background-color: #7c3aed !important; border-color: #7c3aed !important;">
                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="11" cy="11" r="8" stroke="white" stroke-width="2" fill="none"/>
  <path d="m21 21-4.35-4.35" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
                                 
                                 
                                 
                                 </button>
                              </div>
                           </div>
                        </div>
                     </form>
                  </div>
               </div>
               
               
               <div class="dropdown d-inline-block waves-effect d-none d-lg-inline-block" style="background: #eeeeee47;">
                  <div style="" class="ift">
                     
                     <select class="up2 header-item waves-effect" data-bs-toggle="dropdown" aria-expanded="true"   id="ava" onchange="doGTranslate(this);" style="color: #7c3aed !important;">
                        <span><i class="mdi mdi-arrow-down-bold-hexagon-outline"></i>
                        <option value="">Choose Lang</option>
                        <option value="en|af">Afrikaans</option>
                        <option value="en|sq"> <img src="https://flagdownload.com/wp-content/uploads/Flag_of_Albania_Flat_Round-128x128.png" class="me-1" height="12"> Albanian</option>
                        <option value="en|ar">Arabic</option>
                        <option value="en|hy">Armenian</option>
                        <option value="en|az">Azerbaijani</option>
                        <option value="en|eu">Basque</option>
                        <option value="en|be">Belarusian</option>
                        <option value="en|bg">Bulgarian</option>
                        <option value="en|ca">Catalan</option>
                        <option value="en|zh-CN">Chinese (Simpoptionfied)</option>
                        <option value="en|zh-TW">Chinese (Traditional)</option>
                        <option value="en|hr">Croatian</option>
                        <option value="en|cs">Czech</option>
                        <option value="en|da">Danish</option>
                        <option value="en|nl">Dutch</option>
                        <option value="en|en">English</option>
                        <option value="en|et">Estonian</option>
                        <option value="en|tl">Fioptionpino</option>
                        <option value="en|fi">Finnish</option>
                        <option value="en|fr">French</option>
                        <option value="en|gl">Gaoptioncian</option>
                        <option value="en|ka">Georgian</option>
                        <option value="en|de">German</option>
                        <option value="en|el">Greek</option>
                        <option value="en|ht">Haitian Creole</option>
                        <option value="en|iw">Hebrew</option>
                        <option value="en|hi">Hindi</option>
                        <option value="en|hu">Hungarian</option>
                        <option value="en|is">Icelandic</option>
                        <option value="en|id">Indonesian</option>
                        <option value="en|ga">Irish</option>
                        <option value="en|it">Itaoptionan</option>
                        <option value="en|ja">Japanese</option>
                        <option value="en|ko">Korean</option>
                        <option value="en|lv">Latvian</option>
                        <option value="en|lt">Lithuanian</option>
                        <option value="en|mk">Macedonian</option>
                        <option value="en|ms">Malay</option>
                        <option value="en|mt">Maltese</option>
                        <option value="en|no">Norwegian</option>
                        <option value="en|fa">Persian</option>
                        <option value="en|pl">Pooptionsh</option>
                        <option value="en|pt">Portuguese</option>
                        <option value="en|ro">Romanian</option>
                        <option value="en|ru">Russian</option>
                        <option value="en|sr">Serbian</option>
                        <option value="en|sk">Slovak</option>
                        <option value="en|sl">Slovenian</option>
                        <option value="en|es">Spanish</option>
                        <option value="en|sw">Swahioption</option>
                        <option value="en|sv">Swedish</option>
                        <option value="en|th">Thai</option>
                        <option value="en|tr">Turkish</option>
                        <option value="en|uk">Ukrainian</option>
                        <option value="en|ur">Urdu</option>
                        <option value="en|vi">Vietnamese</option>
                        <option value="en|cy">Welsh</option>
                        <option value="en|yi">Yiddish</option>
                     </select>
                     <div id="google_translate_element2">
                        <div class="skiptranslate goog-te-gadget" dir="ltr" style="">
                           <div id=":0.targetLanguage">
                              </div>
                           Powered by <span style="white-space:nowrap"><a class="goog-logo-link" href="https://translate.google.com" target="_blank"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px" alt="Google Translate">Translate</a></span>
                        </div>
                        <div class="skiptranslate goog-te-gadget" dir="ltr" style="">
                           <div id=":0.targetLanguage"></div>
                           Powered by <span style="white-space:nowrap"><a class="goog-logo-link" href="https://translate.google.com" target="_blank"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px" alt="Google Google Übersetzer">Google Übersetzer</a></span>
                        </div>
                     </div>
                  </div>
                  
                  
                  <div class="gtranslate_wrapper d-lg-none"></div>
<script>window.gtranslateSettings = {"default_language":"en","languages":["en","fr","de","it","es","pl","af"],"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>

                  
               </div>
               <div class="dropdown d-none d-lg-inline-block ms-1">
                  <button type="button" class="btn header-item noti-icon waves-effect" data-toggle="fullscreen">
                  <i class="bx bx-fullscreen"></i>
                  </button>
               </div>
               <div class="dropdown d-inline-block ms-1">
                  <button type="button" class="btn header-item noti-icon waves-effect position-relative" id="topup-notif-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                     <i class="bx bx-bell"></i>
                     <?php if ($topupUnreadCount > 0): ?>
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"><?= $topupUnreadCount > 9 ? '9+' : $topupUnreadCount; ?></span>
                     <?php endif; ?>
                  </button>
                  <div class="dropdown-menu dropdown-menu-end topup-notif-menu">
                     <div class="topup-notif-head">
                        <span class="fw-bold text-dark">Top Up Updates</span>
                        <?php if ($topupUnreadCount > 0): ?>
                        <form method="post" class="m-0">
                           <button type="submit" name="mark_topup_notif_read" value="1" class="btn btn-link btn-sm p-0 text-decoration-none">Mark all read</button>
                        </form>
                        <?php endif; ?>
                     </div>
                     <div class="topup-notif-list">
                        <?php if (empty($topupNotifications)): ?>
                           <div class="topup-notif-item">
                              <p>No top up status updates yet.</p>
                           </div>
                        <?php else: ?>
                           <?php foreach ($topupNotifications as $notif): ?>
                              <?php
                              $isApproved = strtolower((string) $notif['status']) === 'approved';
                              $statusText = $isApproved ? 'approved' : 'rejected';
                              $statusColor = $isApproved ? 'text-success' : 'text-danger';
                              ?>
                              <div class="topup-notif-item">
                                 <p><strong>Ref:</strong> <?= htmlspecialchars($notif['reference']); ?> is <span class="<?= $statusColor; ?> text-capitalize fw-bold"><?= $statusText; ?></span></p>
                                 <p class="topup-notif-meta"><?= htmlspecialchars($notif['method_name']); ?> &middot; <?= htmlspecialchars($cur) . number_format((float) $notif['amount'], 2); ?> &middot; <?= date("d M, H:i", strtotime($notif['created_at'])); ?></p>
                              </div>
                           <?php endforeach; ?>
                        <?php endif; ?>
                     </div>
                     <div class="p-2 border-top text-center">
                        <a href="transferhistory.php" class="small fw-bold text-decoration-none">View full history</a>
                     </div>
                  </div>
               </div>
               <div class="dropdown d-inline-block">
                  <button type="button" class="btn header-item waves-effect" id="page-header-user-dropdown"
                     data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <?php if(empty($rowrec1['image'])) { ?>
                  <img class="rounded-circle header-profile-user au" style="object-fit:cover" src="assets/images/users/avatar-1.jpg"
                     alt="Header Avatar">
                  <?php } else {  ?>
                  <img class="rounded-circle header-profile-user au" style="object-fit:cover" src="assets/images/users/<?php echo $rowrec1['image'] ?>"
                     alt="User Profile Photo">
                  <?php } ?>    
                  <span class="d-none d-xl-inline-block ms-1"> <?php echo $_SESSION['customername']; ?></span>
                  <i class="mdi mdi-chevron-down d-none d-xl-inline-block"></i>
                  </button>
                  <div class="dropdown-menu dropdown-menu-end">
                     <a class="dropdown-item" href="myprofile.php"><i class="bx bx-user font-size-16 align-middle me-1"></i> <span key="t-profile">Profile</span></a>
                     <a class="dropdown-item" href="password.php"><i class="bx bx-wrench font-size-16 align-middle me-1"></i> <span key="t-my-wallet">My Password</span></a>
                     <a class="dropdown-item d-block" href="profileimage.php"><i class="bx bx-upload font-size-16 align-middle me-1"></i> <span key="t-settings">Upload Image</span></a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item text-danger" href="logout.php"><i class="bx bx-power-off font-size-16 align-middle me-1 text-danger"></i> <span key="t-logout">Logout</span></a>
                  </div>
               </div>

               <script>
               document.addEventListener('DOMContentLoaded', function() {
                   var userBtn = document.getElementById('page-header-user-dropdown');
                   if (userBtn) {
                       var userMenu = userBtn.nextElementSibling;
                       
                       userBtn.addEventListener('click', function(e) {
                           e.preventDefault();
                           e.stopPropagation();
                           
                           // Manually toggle the display
                           if (userMenu.classList.contains('show')) {
                               userMenu.classList.remove('show');
                               userMenu.style.display = 'none';
                           } else {
                               userMenu.classList.add('show');
                               userMenu.style.display = 'block';
                               userMenu.style.position = 'absolute';
                               userMenu.style.top = '100%';
                               userMenu.style.right = '0';
                           }
                       });

                       // Close the menu if user clicks anywhere else on the page
                       document.addEventListener('click', function(e) {
                           if (!userBtn.contains(e.target) && !userMenu.contains(e.target)) {
                               userMenu.classList.remove('show');
                               userMenu.style.display = 'none';
                           }
                       });
                   }
               });
               </script>
            </div>
         </div>
      </header>
      <div class="vertical-menu">
         <div data-simplebar class="h-100">
            <div id="sidebar-menu">
               <ul class="metismenu list-unstyled" id="side-menu">
                  <li class="menu-title" key="t-menu">Menu</li>
                  <li>
                     <a href="dashboard.php" class="waves-effect <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'mm-active' : ''; ?>">
                     <i class="bx bx-home-circle"></i>
                     <span key="t-dashboards">Dashboard</span>
                     </a>
                  </li>
                  <li>
                     <a href="myprofile.php" class="waves-effect <?php echo basename($_SERVER['PHP_SELF']) == 'myprofile.php' ? 'mm-active' : ''; ?>">
                     <i class='bx bx-user'></i>
                     <span>Account Details</span>
                     </a>
                  </li>
                  <li>
                     <a href="statement.php" class="waves-effect <?php echo basename($_SERVER['PHP_SELF']) == 'statement.php' ? 'mm-active' : ''; ?>">
                     <i class="bx bx-calendar"></i>
                     <span>Account Summary</span>
                     </a>
                  </li>
                  <li>
                     <a href="stocks.php" class="waves-effect <?php echo basename($_SERVER['PHP_SELF']) == 'stocks.php' ? 'mm-active' : ''; ?>">
                     <i class="bx bx-trending-up"></i>
                     <span>Stocks & Trading</span>
                     </a>
                  </li>
                  <li class="menu-title" key="t-components">Fund Transfer</li>
                  <li>
                     <a href="international.php" class="waves-effect <?php echo basename($_SERVER['PHP_SELF']) == 'international.php' ? 'mm-active' : ''; ?>">
                     <i class='bx bx-credit-card-alt'></i>
                     <span>Bank Transfer</span>
                     </a>
                  </li>
                  <li>
                     <a href="topup.php" class="waves-effect <?php echo basename($_SERVER['PHP_SELF']) == 'topup.php' ? 'mm-active' : ''; ?>">
                     <i class='bx bx-wallet'></i>
                     <span>Top Up</span>
                     </a>
                  </li>
                  <li>
                     <a href="transferhistory.php" class="waves-effect <?php echo basename($_SERVER['PHP_SELF']) == 'transferhistory.php' ? 'mm-active' : ''; ?>">
                     <i class='bx bx-calendar-plus'></i>
                     <span>Transfer History</span>
                     </a>
                  </li>
                  <!--<li class="menu-title" key="t-components">Messages</li>-->
                  <!--<li>-->
                  <!--   <a href="#" onclick="openChat(); return false;" class="waves-effect">-->
                  <!--   <i class="bx bx-chat"></i>-->
                  <!--   <span>Message Support</span>-->
                  <!--   </a>-->
                  <!--</li>-->
                  
                  <li class="menu-title" key="t-components">Account</li>
                  <li>
                     <a href="card.php" class="waves-effect <?php echo basename($_SERVER['PHP_SELF']) == 'card.php' ? 'mm-active' : ''; ?>">
                     <i class='bx bx-credit-card-alt'></i>
                     <span>ATM Card</span>
                     </a>
                  </li>
                  <li>
                     <a href="pin.php" class="waves-effect <?php echo basename($_SERVER['PHP_SELF']) == 'pin.php' ? 'mm-active' : ''; ?>">
                     <i class='bx bx-map-pin'></i>
                     <span>Transaction Pin</span>
                     </a>
                  </li>
                  <li>
                     <a href="password.php" class="waves-effect <?php echo basename($_SERVER['PHP_SELF']) == 'password.php' ? 'mm-active' : ''; ?>">
                     <i class='bx bx-pin' ></i>
                     <span>Account Password</span>
                     </a>
                  </li>
                  <li class="menu-title" key="t-components">Account</li>
                  <li>
                     <a href="logout.php" class="waves-effect">
                     <i class='bx bx-log-out-circle' ></i>
                     <span>Logout</span>
                     </a>
                  </li>
               </ul>
            </div>
            </div>
      </div>
      <div class="rightbar-overlay"></div>
      <script src="assets/libs/jquery/jquery.min.js"></script>
      <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
      <script src="assets/libs/metismenu/metisMenu.min.js"></script>
      <script src="assets/libs/simplebar/simplebar.min.js"></script>
      <script src="assets/libs/node-waves/waves.min.js"></script>
      <script src="assets/libs/apexcharts/apexcharts.min.js"></script>
      <script src="assets/js/pages/dashboard.init.js"></script>
      <script src="assets/js/app.js"></script>
      <script src="assets/libs2/node_modules/sweetalert2/dist/sweetalert2.js"></script>
      <script src="assets/libs2/customizer.js"></script>
      <script src="assets/libs2/script.js"></script>
      <script src="assets/libs2/custom/sweet-alert.js"></script>
      <script src="assets/validator.min.js"></script>
      <script src="assets/signup-form.js"></script>
      
      <?php if (!empty($settings) && isset($settings['live_chat_provider']) && $settings['live_chat_provider'] === 'tidio'): ?>
    <?php if (!empty($settings['live_chat_code'])): ?>
        <?= $settings['live_chat_code']; ?>
    <?php endif; ?>

    <script>
    document.addEventListener("tidioChat-ready", function () {
        window.tidioChatApi.hide(); // hide by default
    });

    function openChat() {
        if (window.tidioChatApi) {
            window.tidioChatApi.show();
            window.tidioChatApi.open();

            window.tidioChatApi.on("close", function () {
                window.tidioChatApi.hide();
            });
        }
    }
    </script>
<?php endif; ?>


<?php if (!empty($settings) && isset($settings['live_chat_provider']) && $settings['live_chat_provider'] === 'tawk'): ?>
    <?php if (!empty($settings['live_chat_code'])): ?>
        <?= $settings['live_chat_code']; ?>
    <?php endif; ?>

    <script>
    var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
    Tawk_API.onLoad = function() {
        Tawk_API.hideWidget(); // hide by default
    };

    function openChat() {
        if (typeof Tawk_API !== "undefined") {
            Tawk_API.showWidget();
            Tawk_API.maximize();

            Tawk_API.onChatMinimized = function () {
                Tawk_API.hideWidget();
            };
        }
    }
    </script>
<?php endif; ?>

<?php if (!empty($settings) && isset($settings['live_chat_provider']) && $settings['live_chat_provider'] === 'smartsupp'): ?>
    <?php if (!empty($settings['live_chat_code'])): ?>
        <?= $settings['live_chat_code']; ?>
    <?php endif; ?>
<?php endif; ?>

         
      <script type="text/javascript">
         function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'en',autoDisplay: false}, 'google_translate_element2');}
      </script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>
      <script type="text/javascript">
         /* <![CDATA[ */
         eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'),0,{}))
         /* ]]> */
      </script>
      
      
      <script>
document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('vertical-menu-btn');
    const menuIcon = document.getElementById('menu-icon');

    if (menuButton && menuIcon) {
        menuButton.addEventListener('click', function() {
            
            menuIcon.classList.toggle('active');
        });
    }
});
</script>
      
      <div class="mobile-bottom-nav d-lg-none">
          <a href="dashboard.php" class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'active' : ''; ?>">
              <i class="bx bx-home-circle"></i>
              <span>Home</span>
          </a>
          
          <a href="topup.php" class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'topup.php' ? 'active' : ''; ?>">
              <i class="bx bx-wallet"></i>
              <span>Top Up</span>
          </a>
          
          <a href="international.php" class="mobile-nav-item middle-item">
              <div class="nav-circle">
                  <i class="bx bx-transfer"></i>
              </div>
              <span>Transfer</span>
          </a>
          
          <a href="card.php" class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'card.php' ? 'active' : ''; ?>">
              <i class="bx bx-credit-card"></i>
              <span>Cards</span>
          </a>
          
          <a href="myprofile.php" class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'myprofile.php' ? 'active' : ''; ?>">
              <i class="bx bx-user"></i>
              <span>Profile</span>
          </a>
      </div>
      
   </body>
</html>