 </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>
                        <h1 class=" font-15 color-white mb-0">Hi, <?php echo $profileDetails->sFname . " (".$controller->formatUserType($profileDetails->sType).")"; ?></h1>
                        <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>
                        <h2 class=" font-15 color-white">Commission: &#8358;<?php echo $data->sRefWallet; ?></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>

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

                <a href="buy-airtime" class="col-3 mt-2">
                    <span class="icon icon-l  " style="color:<?php echo $sitecolor; ?>;  border-radius:50%; ">
                        <i class="fa fa-phone font-18"></i>
                    </span>
                    <p class="mb-0 pt-1 font-12">Airtime</p>
                </a>

                <a href="buy-data" class="col-3 mt-2">
                    <span class="icon icon-l  " style="color:<?php echo $sitecolor; ?>;  border-radius:50%; ">
                        <i class="fa fa-wifi font-18 "></i>
                    </span>
                    <p class="mb-0 pt-1 font-12">Data</p>
                </a>

                <a href="cable-tv" class="col-3 mt-2">
                    <span class="icon icon-l  " style="color:<?php echo $sitecolor; ?>;  border-radius:50%; ">
                        <i class="fa fa-tv font-18 "></i>
                    </span>
                    <p class="mb-0 pt-1 font-12">TV</p>
                </a>

                <a href="electricity" class="col-3 mt-2">
                    <span class="icon icon-l  " style="color:<?php echo $sitecolor; ?>;  border-radius:50%; ">
                        <i class="fa fa-bolt font-18 "></i>
                    </span>
                    <p class="mb-0 pt-1 font-12">Bills</p>
                </a>
                </div>
            
                
                <div class="row text-center mb-0">
                    <a href="exam-pins" class="col-3">
                        <span class="icon icon-l rounded-sm" style="color:<?php echo $sitecolor; ?>;">
                            <i class="fa fa-graduation-cap font-25"></i>
                        </span>
                        <p class="mb-0 pt-1 font-11">Exam Pin</p>
                    </a>
                    
                    <a href="airtime-to-cash" class="col-3">
                     <span class="icon icon-l rounded-sm" style="color:<?php echo $sitecolor; ?>;">
                        <i class="fa fa-exchange-alt font-25"></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-3">
                        <span class="icon icon-l rounded-sm" style="color:<?php echo $sitecolor; ?>;">
                            <i class="fa fa-user-secret font-25"></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-3">
                        <span class="icon icon-l rounded-sm" style="color:<?php echo $sitecolor; ?>;">
                            <i class="fa fa-store font-25"></i>
                        </span>
                        <p class="mb-0 pt-1 font-11">Vendor</p>
                    </a>
                    
                 </div>

    <div class="content">
                
                    
                

                

                    </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>