
 <style>
/* General Styles */
.icon-circle {
  border-radius: 30%;
  background-color: #23233f;  /* Background color for icon circle */
  color: white;  /* Icon color */
}

.card {
  border-radius: 12px;
}

.profile-thumb-edit {
  bottom: 5px;
  right: 5px;
}

.card h4 {
  font-size: 1.5rem;
}

.btn-sm {
  font-size: 0.9rem;
  padding: 8px 12px;
}

.text-muted {
  font-size: 0.85rem;
}

.card {
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.profile-thumb {
  position: relative;
  display: inline-block;
}

.profile-thumb-edit {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  right: 0;
  font-size: 14px;
}

.card h5 {
  font-weight: 600;
  color: #333;
}

.card .btn-outline-primary {
  border-radius: 5px;
  width: 48%;
}

.card .btn-primary {
  padding: 10px 20px;
}

.card .text-muted {
  font-size: 0.9rem;
}

/* Buttons */
.btn-primary {
  background-color: #23233f;
  border: 1px solid #23233f;
  color: white;
}

.btn-primary:hover {
  background-color: #1c1c32;
}

.btn-outline-primary {
  border-color: #23233f;
  color: #23233f;
}

.btn-outline-primary:hover {
  background-color: #23233f;
  color: white;
}

/* Icon and Button Styling */
.fas {
  color: #ea6a28; /* orange for icons */
}

.card-body {
  padding: 1.5rem;
}

/* Card Styling */
.card {
  border-radius: 10px;
  background-color: #ffffff;
}

.card .btn-outline-primary {
  border-radius: 5px;
  width: 48%;
}

/* Quick Actions Section */
.card-body {
  background-color: #f8f9fa;
}

.btn-light {
  background-color: white;
  color: #23233f;  /* Dark text for readability */
  border: 1px solid #23233f; /* Border to match background */
}

.btn-light:hover {
  background-color: #23233f;
  color: white;
}

.text-muted {
  font-size: 0.9rem;
  color: #6c757d;
}

.fas {
  color: #ea6a28; /* Maintain orange for icons */
}

/* Tooltip */
[data-bs-toggle="tooltip"] {
  color: #17a2b8;
}
</style>


  <!-- Content
  ============================================= -->
  <div id="content" class="py-4">
  <div class="container">
    <div class="row">
      <!-- Left Panel -->
      <aside class="col-lg-3">

        <!-- Profile Section -->
  <?php
            if(isset($_POST['uPic'])){
                $ifile=$_FILES['file']['name'];
                $ifile_tmp=$_FILES['file']['tmp_name'];
                move_uploaded_file($ifile_tmp,"../userPic/".$ifile."");
                
                $up="update users set picture='".$ifile."' where uID='".$uid."'";
            
                $result=mysqli_query($conn,$up);
                                    
                if ($result) {
                        echo "<script>window.location='settings-profile.php';</script>";
                } else {
                    echo "<script>alert('Something went wrong, try again later...')</script>";
                }
            }
          ?>

          <div  style="background:#23233f;" class="bg shadow-sm rounded  rounded text-center p-3 mb-4">
            <form method="post" enctype="multipart/form-data">
                <div class="profile-thumb mt-3 mb-4"> <img class="rounded-circle" src="../userPic/<?php echo $pic; ?>" style="width: 100px; height: 100px; object-fit: cover; border: 4px solid #ea6a28;" alt="">
                    <div class="profile-thumb-edit bg text-white" data-bs-toggle="tooltip" title="Change Profile Picture"> <i class="fas fa-camera position-absolute"></i>
                        <input type="file" class="custom-file-input" name="file" onchange="form.submit()" id="customFile">
                        <input type="hidden" name="uPic" value="submit">
                    </div>
                </div>
            </form>
            <p  style="color:#fff;" class="text-3 fw-500 mb-2">Hello, <?php echo $fname." ".$lname; ?></p>
            <hr style="margin: auto; width: 30%;">
            <p style="color:#fff;" class="text-3 fw-500 mb-2" style="margin-top: 10px;"><span style="font-weight: 400;">Login ID:</span> <?php echo $member_id; ?></p>
            <p class="mb-2"><a href="settings-profile.php" class="text-5 text-light" data-bs-toggle="tooltip" title="Edit Profile"><i class="fas fa-edit"></i></a></p>
          </div>


          <!-- Profile Details End --> 
          
          <!-- Available Balance
          =============================== -->
  <?php
$ssl = "SELECT * FROM account WHERE memID='" . $member_id . "' ORDER BY id ASC";
$rs_t = $conn->query($ssl);

while ($row = $rs_t->fetch_assoc()) {
    $acid = $row['id'];
    $mID = $row['memID'];
    $at = $row['aType'];
    $an = $row['aName'];
    $cur = $row['currency'];
    $sym = $row['symbol'];
    $ab = $row['aBal'];
    $d_op = strtotime($row['dateOpened']);
    $do = date("jS M, Y h:ia", $d_op);
    $aNm = $row['aNum'];
    $cl = $row['cLimit'];

    echo "
        <div class='card shadow border-0 rounded mb-4'>
            <div class='card-body'>
                <div class='d-flex align-items-center mb-3'>
                    <div class='icon-circle bg text-white me-3' style='width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;'>
                        <i class='fas fa-wallet'></i>
                    </div>
                    <div>
                        <h6 class='mb-1 text-dark'>$at</h6>
                        <p class='text-muted mb-0'>$cur | $aNm</p>
                    </div>
                </div>
                <div class='details-section mb-3'>
                    <h4 class='fw-bold text-success mb-2'>
                        <span id='balance-$acid'>$sym" . number_format($ab, 2) . "</span>
                        <i class='fas fa-eye-slash text-secondary ms-2' style='cursor: pointer;' onclick=\"toggleBalance('balance-$acid', this)\"></i>
                    </h4>
                    <div class='mb-2'>
                        <p class='text-muted'>Credit Limit: $cl</p>
                        <span class='d-block text-muted'> 
                            More Details: <i class='fas fa-info-circle text-info' title='Click for details' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-html='true' title='Date Opened: $do<br>Credit Limit: $cl'></i>
                        </span>
                    </div>
                </div>
                <div class='d-grid'>
                    <button class='btn btn-primary btn-sm mb-2' onclick=\"location.href='transactions.php?account=$aNm';\">View Transactions</button>
                    <button class='btn btn-outline-primary btn-sm' onclick=\"location.href='send-money.php?account=$aNm';\">Transfer Funds</button>
                </div>
            </div>
        </div>
    ";
}
?>

<script>
function toggleBalance(balanceId, icon) {
    const balanceElement = document.getElementById(balanceId);
    if (balanceElement.textContent.includes('*')) {
        balanceElement.textContent = balanceElement.getAttribute('data-original');
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        balanceElement.setAttribute('data-original', balanceElement.textContent);
        balanceElement.textContent = '****';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}
</script>
          
          <!-- Available Balance End --> 
          
          
<div class='card shadow border-0 rounded mb-4'>
    <div class='card-body'>
        <h5 class='text-center mb-3' style="color: #23233f;">Quick Actions</h5>
        <div class='row g-2'>
            <!-- Each button now has a dead link (href='#') -->
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="#" class='btn btn-sm w-100 position-relative' style="background-color: #23233f; color: white;">
                    <i class='fas fa-mobile-alt' style="color: #ea6a28;"></i><br>Mobile Top-Up
                    <span class="coming-soon" style="position: absolute; top: 10px; right: 10px; font-size: 5px; color: white; background-color: red; padding: 2px 6px; border-radius: 4px;">Coming Soon</span>
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="#" class='btn btn-sm w-100 position-relative' style="background-color: #23233f; color: white;">
                    <i class='fas fa-file-invoice' style="color: #ea6a28;"></i><br>Bills Payment
                    <span class="coming-soon" style="position: absolute; top: 10px; right: 10px; font-size:5px; color: white; background-color: red; padding: 2px 6px; border-radius: 4px;">Coming Soon</span>
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="transactions.php?account=$aNm" class='btn btn-sm w-100' style="background-color: #23233f; color: white;">
                    <i class='fas fa-history' style="color: #ea6a28;"></i><br>Transaction History
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="#" class='btn btn-sm w-100 position-relative' style="background-color: #23233f; color: white;">
                    <i class='fas fa-gift' style="color: #ea6a28;"></i><br>Rewards
                    <span class="coming-soon" style="position: absolute; top: 10px; right: 10px; font-size: 5px; color: white; background-color:red; padding: 2px 6px; border-radius: 4px;">Coming Soon</span>
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="loan.php" class='btn btn-sm w-100' style="background-color: #23233f; color: white;">
                    <i class='fas fa-hand-holding-usd' style="color: #ea6a28;"></i><br>Loans
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="#" class='btn btn-sm w-100 position-relative' style="background-color: #23233f; color: white;">
                    <i class='fas fa-ticket-alt' style="color: #ea6a28;"></i><br>eVoucher
                    <span class="coming-soon" style="position: absolute; top: 10px; right: 10px; font-size: 5px; color: red; background-color: white; padding: 2px 6px; border-radius: 4px;">Coming Soon</span>
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="#" class='btn btn-sm w-100 position-relative' style="background-color: #23233f; color: white;">
                    <i class='fas fa-exchange-alt' style="color: #ea6a28;"></i><br>Money Exchange
                    <span class="coming-soon" style="position: absolute; top: 10px; right: 10px; font-size: 5px; color: white; background-color: red; padding: 2px 6px; border-radius: 4px;">Coming Soon</span>
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="#" class='btn btn-sm w-100 position-relative' style="background-color: #23233f; color: white;">
                    <i class='fas fa-user-friends' style="color: #ea6a28;"></i><br>Refer & Earn
                    <span class="coming-soon" style="position: absolute; top: 10px; right: 10px; font-size: 5px; color: white; background-color: red; padding: 2px 6px; border-radius: 4px;">Coming Soon</span>
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="settings-security.php" class='btn btn-sm w-100' style="background-color: #23233f; color: white;">
                    <i class='fas fa-user-shield' style="color: #ea6a28;"></i><br>Security
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="settings-payment-methods.php" class='btn btn-sm w-100' style="background-color: #23233f; color: white;">
                    <i class='fas fa-university' style="color: #ea6a28;"></i><br>Bank Services
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="deposit.php" class='btn btn-sm w-100' style="background-color: #23233f; color: white;">
                    <i class='fas fa-wallet' style="color: #ea6a28;"></i><br>Wallet
                </a>
            </div>
            <div class='col-6 col-md-3 col-lg-6'>
                <a href="kyc.php" class='btn btn-sm w-100 position-relative' style="background-color: #23233f; color: white;">
                    <i class='fas fa-question-circle' style="color: #ea6a28;"></i><br>KYC
                    <!--<span class="coming-soon" style="position: absolute; top: 10px; right: 5px; font-size: 5px; color: white; background-color: red; padding: 2px 6px; border-radius: 4px;">Coming Soon</span>-->
                </a>
            </div>
        </div>
    </div>
</div>



          <!-- Need Help?
          =============================== -->
    <!--      <div class="bg-white shadow-sm rounded text-center p-3 mb-4">-->
    <!--        <div class="text-17 text-light my-3"><i class="fas fa-comments"></i></div>-->
    <!--        <h3 class="text-5 fw-400 my-4">Need Help?</h3>-->
    <!--        <p class="text-muted opacity-8 mb-4">Have questions or concerns regarding your account?<br>-->
    <!--          Our experts are here to help!</p>-->
    <!--        <div class="d-grid"><a href="help.php" class="btn btn-primary">Request Support</a></div>-->
		  <!--</div>-->
          <!-- Need Help? End --> 
          
        </aside>