 </style>
<link rel="stylesheet" href="https://ttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
    <!-- Page content start here-->
        <div class="page-content header-clear">

    <div style="background-image:url(../../assets/img/bg/cover8.jpg); border-bottom-left-radius: 1rem !important; border-bottom-right-radius: 1rem !important;">
        <div class="card notch-clear rounded-0 mb-3 mt-0" 
        data-card-height="220" style="opacity:0.9; background-color:<?php echo $sitecolor; ?>; 
        border-bottom-left-radius: 1rem !important; border-bottom-right-radius: 1rem !important;">
            <div class="card-body pt-0 mt-4 mb-5 text-left">
                <div class="d-flex justify-content-between align-content-center">
                    <div>
                        <h2 class=" font-15 color-white mb-0">Wallet Balance</h2>
                        <h2 class="font-20 mt-0 color-white">

                            <span id="hideEyeDiv" style="display:none;">&#8358;<?php echo number_format($data->sWallet); ?></span>
                            <span id="openEyeDiv">&#8358; *********</span>

                            <span id="hideEye"><i class="fa fa-eye-slash" style="margin-left:20px;" aria-hidden="true"></i></span>
                            <span id="openEye" style="display:none; margin-left:20px;"><i class="fa fa-eye" aria-hidden="true"></i></span>

                        <!--</h2>
                         <?php $profile = $controller->getProfileInfo(); ?>
                        <h2 class=" font-15 color-white">CashBack: &#8358; <?php echo $profile->sCashBack; ?></h2>-->
                    </div>

                    <div class="mt-4">
                        <h1 class="color-white"><ion-icon name="wallet-outline" class="font-50" style="opacity: 0.9;"></ion-icon></h1>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="content card" style="margin-top:-110px; border-radius: 1rem !important;">

        <div class="mt-0">

            <div class="d-flex justify-content-center align-content-center m-2">


                <a href="fund-wallet" class="btn btn-lg d-flex justify-content-center align-item-center font-12" style="width:100%; padding:15px; border:2px solid #ffffff; border-radius:1rem; background-color:<?php echo $sitecolor; ?>;">
                    <ion-icon name="add-circle" class="font-18"></ion-icon> <b class="ps-1">Add Money</b>
                </a>


                <a href="transactions" class="btn btn-lg d-flex justify-content-center align-items-center font-12" style="width:100%; padding:15px; border:2px solid #ffffff; border-radius:1rem; background-color:<?php echo $sitecolor; ?>;">
                    <ion-icon name="history" class="fa fa-history font-18"></ion-icon> <b class="ps-1">History</b>
                </a>


            </div>


        <div class="mb-2 mt-0">
    <div class="row text-center mb-0">

        <a href="buy-airtime" class="col-4 mt-2">
            <span class="icon icon-l" style="background-color:<?php echo $sitecolor; ?>; border-radius:50%; display: inline-block; width: 50px; height: 50px; line-height: 50px;">
                <i class="fa fa-phone font-18" style="color:white;"></i>
            </span>
            <p class="mb-0 pt-1 font-12">Airtime</p>
        </a>

        <a href="buy-data" class="col-4 mt-2">
            <span class="icon icon-l" style="background-color:<?php echo $sitecolor; ?>; border-radius:50%; display: inline-block; width: 50px; height: 50px; line-height: 50px;">
                <i class="fa fa-wifi font-18" style="color:white;"></i>
            </span>
            <p class="mb-0 pt-1 font-12">Data</p>
        </a>

        <a href="cable-tv" class="col-4 mt-2">
            <span class="icon icon-l" style="background-color:<?php echo $sitecolor; ?>; border-radius:50%; display: inline-block; width: 50px; height: 50px; line-height: 50px;">
                <i class="fa fa-tv font-18" style="color:white;"></i>
            </span>
            <p class="mb-0 pt-1 font-12">TV</p>
        </a>
    </div>

    <div class="row text-center mb-0">
        <a href="electricity" class="col-4 mt-2">
            <span class="icon icon-l" style="background-color:<?php echo $sitecolor; ?>; border-radius:50%; display: inline-block; width: 50px; height: 50px; line-height: 50px;">
                <i class="fa fa-bolt font-18" style="color:white;"></i>
            </span>
            <p class="mb-0 pt-1 font-12">Bills</p>
        </a>

        <a href="exam-pins" class="col-4 mt-2">
            <span class="icon icon-l" style="background-color:<?php echo $sitecolor; ?>; border-radius:50%; display: inline-block; width: 50px; height: 50px; line-height: 50px;">
                <i class="fa fa-graduation-cap font-25" style="color:white;"></i>
            </span>
            <p class="mb-0 pt-1 font-11">Exam Pin</p>
        </a>

        <a href="recharge-pin" class="col-4 mt-2">
            <span class="icon icon-l" style="background-color:<?php echo $sitecolor; ?>; border-radius:50%; display: inline-block; width: 50px; height: 50px; line-height: 50px;">
                <i class="fa fa-print font-25" style="color:white;"></i>
            </span>
            <p class="mb-0 pt-1 font-11">Recharge Pin</p>
        </a>
    </div>

    <div class="row text-center mb-0">
        <a href="verify-bvn" class="col-4 mt-2">
            <span class="icon icon-l" style="display: inline-block; width: 50px; height: 50px; text-align: center;">
                <img src="/images/BVN.png" class="reducer" alt="Alpha Topup Icon" style="width: 60px; height: 60px;">
            </span>
            <p class="mb-0 pt-1 font-11">Print BVN Slips</p>
        </a>

        <a href="cac" class="col-4 mt-2">
            <span class="icon icon-l" style="display: inline-block; width: 50px; height: 50px; text-align: center;">
                <img src="/images/CAC.png" class="reducer" alt="Smile Data Icon" style="width: 55px; height: 55px;">
            </span>
            <p class="mb-0 pt-1 font-11"> CAC Registration</p>
        </a>

        <a href="verify-nin" class="col-4 mt-2">
            <span class="icon icon-l" style="display: inline-block; width: 50px; height: 50px; text-align: center;">
                <img src="/images/nimc.png" class="reducer" alt="Alpha Topup Icon" style="width: 50px; height: 50px;">
            </span>
            <p class="mb-0 pt-1 font-11">Print NIN Slips</p>
        </a>
    </div>

    <div class="row text-center mb-0">
        <a href="airtime-to-cash" class="col-4 mt-2">
            <span class="icon icon-l" style="background-color:<?php echo $sitecolor; ?>; border-radius:50%; display: inline-block; width: 50px; height: 50px; line-height: 50px;">
                <i class="fa fa-redo font-25" style="color:white;"></i>
            </span>
            <p class="mb-0 pt-1 font-11">Airtime Swap</p>
        </a>

        <a href="#agent-upgrade-modal" id="upgrade-agent-btn" data-menu="agent-upgrade-modal" class="col-4 mt-2">
            <span class="icon icon-l" style="background-color:<?php echo $sitecolor; ?>; border-radius:50%; display: inline-block; width: 50px; height: 50px; line-height: 50px;">
                <i class="fa fa-user-secret font-25" style="color:white;"></i>
            </span>
            <p class="mb-0 pt-1 font-11">Agent</p>
        </a>

        <a href="#vendor-upgrade-modal" id="vendor-upgrade-msg" data-menu="vendor-upgrade-modal" class="col-4 mt-2">
            <span class="icon icon-l" style="background-color:<?php echo $sitecolor; ?>; border-radius:50%; display: inline-block; width: 50px; height: 50px; line-height: 50px;">
                <i class="fa fa-store font-25" style="color:white;"></i>
            </span>
            <p class="mb-0 pt-1 font-11">Vendor</p>
        </a>
    </div>




    <div class="content">
                
                    
                

                <table class="table table-bordered table-striped">
                    <tr class="bg-blue-dark">
                        <td class="text-white"><b>Statistics</b></td>
                        <td class="text-white"><b>Totaly</b></td>
                    </tr>
                    <tr>
                        <td><b><i class="fa fa-line-chart"></i> Total Transactions </b></td>
                        <td><b><?php echo $controller->TotalTransactions();?></b></td>
                    </tr>
                    <tr>
                        <td><b><i class="fa fa-line-chart"></i> Amount Spent This Week</b></td>
                        <td><b>₦<?php echo number_format($controller->monthlySpent()); ?></b></td>
                    </tr>
                    <tr>
                        <td><b><i class="fa fa-line-chart"></i> Amount Spent This Month</b></td>
                        <td><b>₦<?php echo number_format($controller->monthlySpent()); ?></b></td>
                    </tr>
                    <tr>
                        <td><b><i class="fa fa-line-chart"></i> Total Spent</b></td>
                        <td><b>₦<?php 
                 
                 $totalFund = $controller->getTotalFund();
                 $balance = $data->sWallet;
                 $totalSpent = $totalFund - $balance;
                 
                  echo number_format($totalSpent); ?></b></td>
                    </tr>
                    <tr>
                        <td><b><i class="fa fa-money"></i> Total Funding</b></td>
                        <td><b>₦<?php echo number_format($controller->getTotalFund());?></b></td>
                    </tr>
                    <tr>
                        <?php $profile = $controller->getProfileInfo(); ?>
                        <td><b><i class="fa fa-money"></i> CashBack Bonus</b></td>
                        <td><b>₦<?php echo $profile->sCashBack; ?></b></td>
                    </tr>
                   
                </table> 

            </div>
        </div>

        

        

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>    <!-- Page content ends here-->
              

<div id="network-status-box" class="menu menu-box-bottom rounded-l" data-menu-effect="menu-over" style="display: block; height: 90vh; background:#ffffff;">
    <div class="menu-title">
        <h1 class="font-24 mb-0 pb-0">Data Status</h1>
        <a href="#" class="close-menu font-25"><i class="fa fa-times-circle"></i></a>
    </div>
    <hr />
    <div class="mb-0 mt-0 row">
        
        <?php 
            // Fetch status from controller
            $networks = [
                'MTN' => $controller->mtnStatus(),
                'AIRTEL' => $controller->airtelStatus(),
                'GLO' => $controller->gloStatus(),
                '9MOBILE' => $controller->mobileStatus()
            ];

            // Loop through networks to generate progress bars
            foreach ($networks as $network => $status) {
                // Set progress color and percentage based on status
                if ($status == 20) {
                    $progressStatus = 100;
                    $progressColor = 'bg-success';
                } elseif ($status >= 16 && $status <= 19) {
                    $progressStatus = 85;
                    $progressColor = 'bg-success';
                } elseif ($status >= 11 && $status <= 15) {
                    $progressStatus = 50;
                    $progressColor = 'bg-warning text-dark';
                } elseif ($status >= 6 && $status <= 10) {
                    $progressStatus = 40;
                    $progressColor = 'bg-warning text-dark';
                } elseif ($status >= 2 && $status <= 5) {
                    $progressStatus = 20;
                    $progressColor = 'bg-danger';
                } else {
                    $progressStatus = 5;
                    $progressColor = 'bg-danger';
                }
        ?>

        <div class="col-6">
            <div class="card card-style me-0 mb-1 mt-1">
                <div class="content">
                    <h4>
                        <span class="icon icon-l rounded-l py-1 px-1" style="background:#f2f2f2;">
                            <img src="../../assets/images/icons/<?php echo strtolower(str_replace(' ', '', $network)); ?>.png" width="25" height="25" class="rounded-l" />
                        </span>
                    </h4>

                    <h6 class="font-12"><?php echo $network; ?></h6>

                    <div class="progress mb-4" style="height:18px;">
                        <div class="progress-bar border-0 <?php echo $progressColor; ?> text-start ps-2" role="progressbar" style="width: <?php echo $progressStatus; ?>%" aria-valuenow="<?php echo $progressStatus; ?>" aria-valuemin="0" aria-valuemax="100">
                            <span class="position-absolute color-white"><?php echo $progressStatus; ?>% Stable</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <?php } ?>
     </div>
     </div>
   </div>
  </div>
  </div>
</div>
</div>