 <?php
function welcome(){
 
   if(date("H") < 12){
 
     return "Good Morning";
 
   }elseif(date("H") > 11 && date("H") < 18){
 
     return "Good Afternoon";
 
   }elseif(date("H") > 17){
 
     return "Good Evening";
 
   }
 
}  
?>
<?php
session_start();
include_once ('../include/session.php');
require_once '../include/class.user.php';
if (!isset($_SESSION['uname'])) {
    header("Location: ../login.php");
    exit();
}


$reg_user = new USER();

$stmt = $reg_user->runQuery("SELECT * FROM account WHERE uname=:uname");
$stmt->execute(array(":uname" => $_SESSION['uname']));
$row = $stmt->fetch(PDO::FETCH_ASSOC);



$email = $row['email'];

$temp = $reg_user->runQuery("SELECT * FROM transfer WHERE email = '$email' ORDER BY id DESC LIMIT 3");
$temp->execute(array(":uname" => $_SESSION['uname']));
$rows = $temp->fetch(PDO::FETCH_ASSOC);


?>
<?php include 'header.php'; ?>
<?php include 'mobmenu.php'; ?>
<?php include 'mainmenu.php'; ?>

<style>
/* Modern Mobile-First Design */
body {
    transition: background-color 0.3s ease;
}

.content-wrapper {
    background: white;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
    transition: background-color 0.3s ease;
}

/* Primary Brand Color */
:root {
    --primary-color: #114a43;
    --primary-dark: #0d3832;
    --primary-light: #1a6b5f;
    --accent-color: #d97706;
    --success-color: #10b981;
    --danger-color: #ef4444;
    
    /* Light Mode Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #2d3748;
    --text-secondary: #6c757d;
    --border-color: #e5e7eb;
    --card-bg: #ffffff;
}

/* Dark Mode Colors */
body.dark-mode {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --border-color: #374151;
    --card-bg: #2d2d2d;
}

body.dark-mode .content-wrapper {
    background: var(--bg-primary);
}

/* Dark Mode Toggle Button */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.theme-toggle svg {
    width: 28px;
    height: 28px;
    fill: white;
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

body.dark-mode .theme-toggle .sun-icon {
    display: block;
}

body.dark-mode .theme-toggle .moon-icon {
    display: none;
}

/* Page Header */
.page-header-modern {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 15px 12px;
    border-radius: 0 0 20px 20px;
    margin: -20px -15px 12px -15px;
    color: white;
}

.greeting-text {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 3px;
}

.user-name-text {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

/* Quick Action Buttons */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.quick-action-btn {
    padding: 7px 5px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    transition: all 0.3s;
}

.quick-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    color: white;
}

.quick-action-btn img {
    width: 16px;
    height: 16px;
}

@media (min-width: 576px) {
    .quick-actions {
        gap: 10px;
    }
    
    .quick-action-btn {
        padding: 10px 15px;
        font-size: 14px;
        gap: 8px;
    }
    
    .quick-action-btn img {
        width: 18px;
        height: 18px;
    }
}

/* Balance Cards */
.balance-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

body.dark-mode .balance-card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.balance-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(17, 74, 67, 0.05) 0%, rgba(13, 56, 50, 0.05) 100%);
    border-radius: 0 14px 0 100%;
    z-index: 1;
}

/* Account Balance - Primary Brand Color */
.balance-card.account-balance {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
}

.balance-card.account-balance::before {
    background: rgba(255, 255, 255, 0.1);
}

.balance-card.account-balance .balance-label {
    color: rgba(255, 255, 255, 0.9);
}

.balance-card.account-balance .balance-amount {
    color: white;
}

.balance-card.account-balance .balance-change {
    color: rgba(255, 255, 255, 0.85);
}

/* Ledger Balance - Primary Brand Color (lighter) */
.balance-card.ledger-balance {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    color: white;
    border: none;
}

.balance-card.ledger-balance::before {
    background: rgba(255, 255, 255, 0.1);
}

.balance-card.ledger-balance .balance-label {
    color: rgba(255, 255, 255, 0.9);
}

.balance-card.ledger-balance .balance-amount {
    color: white;
}

.balance-card.ledger-balance .balance-change {
    color: rgba(255, 255, 255, 0.85);
}

.balance-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

.balance-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    position: relative;
    z-index: 2;
}

.balance-change {
    font-size: 10px;
    color: var(--success-color);
    margin-top: 4px;
    position: relative;
    z-index: 2;
}

.balance-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    opacity: 0.6;
    z-index: 3;
}

/* For colored balance cards, make icons white */
.balance-card.account-balance .balance-icon,
.balance-card.ledger-balance .balance-icon {
    filter: brightness(0) invert(1);
}

/* For white/light cards, keep original icon color */
.balance-card.transfer-card .balance-icon {
    filter: none;
    opacity: 0.3;
}

/* Transfer Mode Card */
.transfer-card {
    background: var(--card-bg);
    border: 2px solid var(--primary-color);
}

.transfer-card .balance-label {
    color: var(--primary-color);
}

.transfer-card .balance-amount {
    color: var(--primary-color);
}

.transfer-card .balance-change {
    color: var(--primary-color);
    opacity: 0.7;
}

/* Credit/Debit Cards */
.cards-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 20px 0;
    -webkit-overflow-scrolling: touch;
}

.cards-container::-webkit-scrollbar {
    display: none;
}

.bank-card-modern {
    min-width: 280px;
    height: 180px;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border-radius: 16px;
    padding: 20px;
    color: white;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.bank-card-modern.gold {
    background: linear-gradient(135deg, #d4af37 0%, #f4e5a1 100%);
}

.card-chip {
    width: 45px;
    height: 35px;
    margin-bottom: 20px;
}

.card-number {
    font-size: 18px;
    letter-spacing: 2px;
    margin: 15px 0;
    font-family: 'Courier New', monospace;
}

.card-holder {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 3px;
}

.card-name {
    font-size: 14px;
    font-weight: 600;
}

.card-expiry {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
}

/* Transaction Section */
.transaction-section {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 12px;
    margin-top: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

body.dark-mode .transaction-section {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

/* Stat Cards */
.stat-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.stat-card {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(102, 126, 234, 0.1);
    border-color: var(--primary-color);
}

body.dark-mode .stat-card:hover {
    box-shadow: 0 6px 15px rgba(17, 74, 67, 0.3);
}

.stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--primary-color);
}

.stat-icon img {
    width: 14px;
    height: 14px;
}

.stat-info {
    flex: 1;
}

.stat-label {
    font-size: 9px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    line-height: 1.2;
}

.stat-value {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

@media (min-width: 768px) {
    .stat-cards-container {
        gap: 15px;
    }
    
    .stat-card {
        flex-direction: row;
        text-align: left;
        padding: 20px;
        gap: 15px;
    }
    
    .stat-icon {
        width: 60px;
        height: 60px;
    }
    
    .stat-icon img {
        width: 24px;
        height: 24px;
    }
    
    .stat-label {
        font-size: 13px;
    }
    
    .stat-value {
        font-size: 18px;
    }
}

.security-tip {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    border: 2px solid var(--accent-color);
    transition: all 0.3s ease;
}

body.dark-mode .security-tip {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    border-color: var(--accent-color);
}

.security-tip-title {
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 5px;
    font-size: 13px;
}

body.dark-mode .security-tip-title {
    color: #fef3c7;
}

.security-tip-text {
    font-size: 11px;
    color: #4a5568;
    margin-bottom: 6px;
}

body.dark-mode .security-tip-text {
    color: #fde68a;
}

/* Text utilities for dark mode */
body.dark-mode .text-muted {
    color: var(--text-secondary) !important;
}

body.dark-mode .text-primary {
    color: var(--primary-light) !important;
}

body.dark-mode h5 {
    color: var(--text-primary);
}

/* Confirmation Modal */
.confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.confirm-modal.active {
    display: flex;
}

.confirm-modal-content {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 30px 25px;
    max-width: 400px;
    width: 100%;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.confirm-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.confirm-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.confirm-text {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 25px;
    line-height: 1.5;
}

.confirm-buttons {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.btn-confirm {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    padding: 14px 25px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(17, 74, 67, 0.3);
}

.btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    padding: 14px 25px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cancel:hover {
    background: var(--border-color);
}

@media (min-width: 576px) {
    .confirm-buttons {
        flex-direction: row;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .page-header-modern {
        margin: -15px -15px 10px -15px;
        padding: 15px 12px;
    }
    
    .user-name-text {
        font-size: 18px;
    }
    
    .balance-amount {
        font-size: 22px;
    }
    
    .bank-card-modern {
        min-width: 260px;
        height: 170px;
    }
    
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .quick-features-grid {
        margin-left: 0;
        margin-right: 0;
    }
    
    .transaction-section {
        margin-top: 8px;
    }
    
    .balance-card {
        margin-bottom: 8px;
    }
}

/* Desktop View */
@media (min-width: 992px) {
    .balance-cards-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .cards-container {
        justify-content: center;
    }
}

/* Quick Features Grid */
.quick-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.feature-card {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
    border-color: var(--primary-color);
    text-decoration: none;
}

body.dark-mode .feature-card:hover {
    box-shadow: 0 6px 20px rgba(17, 74, 67, 0.3);
}

.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: var(--primary-color);
}

.feature-icon img {
    display: block;
    width: 20px;
    height: 20px;
}

.feature-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
    width: 100%;
    line-height: 1.2;
}

.feature-desc {
    font-size: 9px;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
    width: 100%;
}

/* Accent color for important actions */
.feature-card.accent {
    border-color: var(--accent-color);
}

.feature-card.accent .feature-icon {
    background: var(--accent-color);
}

.feature-card.accent:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
}

@media (min-width: 576px) {
    .quick-features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
    
    .feature-card {
        padding: 20px 15px;
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
    }
    
    .feature-title {
        font-size: 15px;
    }
    
    .feature-desc {
        font-size: 12px;
    }
}

@media (min-width: 992px) {
    .quick-features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    
    .feature-card {
        padding: 25px 20px;
    }
}

/* Card Modal/Popup Styles */
.cards-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    overflow-y: auto;
    padding: 20px;
}

.cards-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cards-modal-content {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 30px 20px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transition: all 0.3s ease;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--bg-secondary);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    color: var(--text-primary);
}

.modal-close:hover {
    background: var(--border-color);
    transform: rotate(90deg);
}

.view-cards-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
}

.view-cards-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(17, 74, 67, 0.3);
}

.view-cards-btn img {
    filter: brightness(0) invert(1);
}

/* Old Card Design with Flip */
.cardcc, .cardcc1 {
    width: 100%;
    max-width: 350px;
    height: 220px;
    margin: 20px auto;
    perspective: 1000px;
}

.cardcc__part, .cardcc1__part {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backface-visibility: hidden;
    padding: 20px;
}

.cardcc1__part {
    background: linear-gradient(135deg, #d4af37 0%, #f4e5a1 100%);
}

.cardcc__front, .cardcc1__front {
    transform: rotateY(0deg);
    z-index: 2;
}

.cardcc__back, .cardcc1__back {
    transform: rotateY(-180deg);
    z-index: 1;
}

.cardcc:hover .cardcc__front,
.cardcc1:hover .cardcc1__front {
    transform: rotateY(180deg);
    z-index: 1;
}

.cardcc:hover .cardcc__back,
.cardcc1:hover .cardcc1__back {
    transform: rotateY(0deg);
    z-index: 2;
}

.cardcc__front-square, .cardcc1__front-square,
.cardcc__back-square, .cardcc1__back-square {
    width: 50px;
    height: 40px;
}

.cardcc__front-logo, .cardcc1__front-logo,
.cardcc__back-logo, .cardcc1__back-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 30px;
}

.cardcc_numer, .cardcc1_numer {
    font-size: 22px;
    letter-spacing: 3px;
    color: white;
    margin: 30px 0 20px 0;
    font-family: 'Courier New', monospace;
}

.cardcc__space-75, .cardcc1__space-75 {
    width: 70%;
    float: left;
}

.cardcc__space-25, .cardcc1__space-25 {
    width: 30%;
    float: right;
    text-align: right;
}

.cardcc__label, .cardcc1__label {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
}

.cardcc__info, .cardcc1__info {
    margin-top: 5px;
    font-size: 14px;
    color: white;
    font-weight: 600;
}

.cardcc__black-line, .cardcc1__black-line {
    margin-top: 10px;
    height: 38px;
    background-color: #303030;
}

.cardcc__back-content, .cardcc1__back-content {
    padding: 15px;
}

.cardcc__secret, .cardcc1__secret {
    padding: 5px 0;
    text-align: right;
    margin: 15px 0;
}

.cardcc__secret--last, .cardcc1__secret--last {
    color: white;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
}

.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>

<!---start here content------>
<div class="content-wrapper pb-0">
    <!-- Modern Header -->
    <div class="page-header-modern">
        <div class="greeting-text"><?php echo welcome(); ?>!</div>
        <h1 class="user-name-text"><?php echo $row['fname']; ?> <?php echo $row['mname']; ?> <?php echo $row['lname']; ?></h1>
        
        <!-- Quick Actions -->
        <div class="quick-actions">
            <a href="wire.php" class="quick-action-btn">
                <img src="icon/8.png" height="18px" width="18px" />
                Quick Transfer
            </a>
            <a href="ticket.php" class="quick-action-btn">
                <img src="icon/4.png" height="18px" width="18px" />
                Open Ticket
            </a>
            <a href="profile.php" class="quick-action-btn">
                Profile
            </a>
        </div>
    </div>

    <div class="container-fluid px-3">
        <!-- Balance Cards -->
        <div class="balance-cards-row">
            <!-- Account Balance -->
            <div class="balance-card account-balance">
                <img src="icon/7.png" class="balance-icon" alt="Money Icon" />
                <div class="balance-label">Account Balance</div>
                <h2 class="balance-amount">
                    <?php if ($row['status'] != 'CLOSED'): ?>
                        <?php echo $row['currency']; ?><?php echo number_format($row['a_bal'], 2, '.', ','); ?>
                    <?php else: ?>
                        <span style="color: #fef3c7">Inactive</span>
                    <?php endif; ?>
                </h2>
                <div class="balance-change">↑ 18.33% Since <?php echo date("M j, Y"); ?></div>
            </div>

            <!-- Ledger Balance -->
            <div class="balance-card ledger-balance">
                <img src="icon/3.png" class="balance-icon" alt="Dollar Icon" />
                <div class="balance-label">Ledger Balance</div>
                <h2 class="balance-amount">
                    <?php if ($row['status'] != 'CLOSED'): ?>
                        <?php echo $row['currency']; ?><?php echo number_format($row['a_bal'], 2, '.', ','); ?>
                    <?php else: ?>
                        <span style="color: #fef3c7">Inactive</span>
                    <?php endif; ?>
                </h2>
                <div class="balance-change">↑ 13.21% Since <?php echo date("M j, Y"); ?></div>
            </div>

            <!-- Transfer Mode -->
            <div class="balance-card transfer-card">
                <img src="icon/8.png" class="balance-icon" alt="Transfer Icon" />
                <div class="balance-label">Transfer Mode</div>
                <h2 class="balance-amount">WIRE</h2>
                <div class="balance-change">↑ 3.32% Since <?php echo date("M j, Y"); ?></div>
            </div>
        </div>

        <!-- Quick Access Features -->
        <div class="transaction-section mt-3">
            <div class="section-title">Quick Access</div>
            <div class="quick-features-grid">
                <a href="#" class="feature-card accent" onclick="confirmAction('Wire Transfer', 'wire.php'); return false;">
                    <div class="feature-icon">
                        <img src="icon/8.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="feature-title">Wire Transfer</div>
                    <div class="feature-desc">International</div>
                </a>

                <a href="#" class="feature-card accent" onclick="confirmAction('Local Transfer', 'dom.php'); return false;">
                    <div class="feature-icon">
                        <img src="icon/8.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="feature-title">Local Transfer</div>
                    <div class="feature-desc">Domestic</div>
                </a>

                <a href="#" class="feature-card" onclick="confirmAction('View Statement', 'statement.php'); return false;">
                    <div class="feature-icon">
                        <img src="icon/3.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="feature-title">Statement</div>
                    <div class="feature-desc">E-Statement</div>
                </a>

                <a href="#" class="feature-card" onclick="confirmAction('Make Deposit', 'bank-deposit.php'); return false;">
                    <div class="feature-icon">
                        <img src="icon/7.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="feature-title">Deposit</div>
                    <div class="feature-desc">Add Funds</div>
                </a>

                <a href="#" class="feature-card" onclick="confirmAction('Apply for Loan', 'loan.php'); return false;">
                    <div class="feature-icon">
                        <img src="icon/5.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="feature-title">Loan</div>
                    <div class="feature-desc">Apply Now</div>
                </a>

                <a href="#" class="feature-card" onclick="confirmAction('Request Card', 'cardapply.php'); return false;">
                    <div class="feature-icon">
                        <img src="icon/9.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="feature-title">Cards</div>
                    <div class="feature-desc">Request Card</div>
                </a>

                <a href="#" class="feature-card" onclick="confirmAction('Contact Support', 'ticket.php'); return false;">
                    <div class="feature-icon">
                        <img src="icon/4.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="feature-title">Support</div>
                    <div class="feature-desc">Get Help</div>
                </a>

                <a href="#" class="feature-card" onclick="confirmAction('View Profile', 'profile.php'); return false;">
                    <div class="feature-icon">
                        <img src="icon/10.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="feature-title">Profile</div>
                    <div class="feature-desc">My Account</div>
                </a>
            </div>
        </div>

        <!-- Cards Section - Button to View -->
        <div class="transaction-section">
            <div class="section-title">Your Cards</div>
            <p class="text-muted mb-3">View your debit cards and account details</p>
            <button class="view-cards-btn" onclick="openCardsModal()">
                <img src="icon/9.png" height="20px" width="20px" />
                View My Cards
            </button>
        </div>

        <!-- Cards Modal -->
        <div class="cards-modal" id="cardsModal">
            <div class="cards-modal-content">
                <button class="modal-close" onclick="closeCardsModal()">&times;</button>
                <h3 class="section-title">Your Cards</h3>
                
                <div class="cards-grid">
                    <!-- Debit Card -->
                    <div class="cardcc">
                        <div class="cardcc__front cardcc__part">
                            <img class="cardcc__front-square cardcc__square" src="icon/chip.png">
                            <img class="cardcc__front-logo cardcc__logo" src="icon/visa.png">
                            <p class="cardcc_numer">XXX<?php echo $row['cardno']; ?>-XXXX</p>
                            <div class="cardcc__space-75">
                                <span class="cardcc__label">card holder</span>
                                <p class="cardcc__info"><?php echo $row['fname']; ?>&nbsp;<?php echo $row['lname']; ?></p>
                            </div>
                            <div class="cardcc__space-25">
                                <span class="cardcc__label">Expires</span>
                                <p class="cardcc__info"><?php echo $row['expmonth']; ?>/<?php echo $row['expyear']; ?></p>
                            </div>
                        </div>
                        
                        <div class="cardcc__back cardcc__part">
                            <div class="cardcc__black-line"></div>
                            <div class="cardcc__back-content">
                                <div class="cardcc__secret">
                                    <p class="cardcc__secret--last"><?php echo $row['cvv']; ?></p>
                                </div>
                                <img class="cardcc__back-square cardcc__square" src="icon/chip.png">
                                <img class="cardcc__back-logo cardcc__logo" src="icon/visa.png">
                            </div>
                        </div>
                    </div>

                    <!-- Account Card -->
                    <div class="cardcc1">
                        <div class="cardcc1__front cardcc1__part">
                            <img class="cardcc1__front-square cardcc1__square" src="icon/chip.png">
                            <img class="cardcc1__front-logo cardcc1__logo" src="../assets/img/brand/white.png" alt="logo" height="60px" />
                            <p class="cardcc1_numer">A/C #: <?php echo $row['uname']; ?></p>
                            <div class="cardcc1__space-75">
                                <span class="cardcc1__label">card holder</span>
                                <p class="cardcc1__info"><?php echo $row['fname']; ?>&nbsp;<?php echo $row['lname']; ?></p>
                            </div>
                            <div class="cardcc1__space-25">
                                <span class="cardcc1__label">Type</span>
                                <p class="cardcc1__info" style="font-size:12px;"><?php echo $row['type']; ?></p>
                            </div>
                        </div>
                        
                        <div class="cardcc1__back cardcc1__part">
                            <div class="cardcc1__black-line"></div>
                            <div class="cardcc1__back-content">
                                <div class="cardcc1__secret">
                                    <p class="cardcc1__secret--last"><?php echo $row['pin']; ?></p>
                                </div>
                                <img class="cardcc1__back-square cardcc1__square" src="icon/chip.png">
                                <img class="cardcc1__back-logo cardcc1__logo" src="../assets/img/brand/white.png" alt="logo" height="40px" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card Actions -->
                <div class="mt-4 text-center">
                    <a href="cardapply.php" class="btn btn-primary mr-2">Request New Card</a>
                    <a href="card.php" class="btn btn-outline-primary">View All Cards</a>
                </div>
            </div>
        </div>

        <script>
        function openCardsModal() {
            document.getElementById('cardsModal').classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closeCardsModal() {
            document.getElementById('cardsModal').classList.remove('active');
            document.body.style.overflow = 'auto';
        }

        // Close modal when clicking outside
        document.getElementById('cardsModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeCardsModal();
            }
        });
        </script>

        <!-- Transaction Statistics -->
        <div class="transaction-section">
            <div class="section-title">Transaction Statistics</div>
            <p class="text-muted mb-3">
                Overview from <?php echo $row['reg_date']; ?> - <?php echo date("F j, Y"); ?>
                <a href="statement.php" class="text-primary ml-2"><u>See Details</u></a>
            </p>
            
            <div class="stat-cards-container">
                <div class="stat-card">
                    <div class="stat-icon">
                        <img src="icon/8.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="stat-info">
                        <div class="stat-label">Total Transfers</div>
                        <div class="stat-value">View Statement</div>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <img src="icon/7.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="stat-info">
                        <div class="stat-label">Total Deposits</div>
                        <div class="stat-value">View Statement</div>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <img src="icon/3.png" height="24px" width="24px" style="filter: brightness(0) invert(1);" />
                    </div>
                    <div class="stat-info">
                        <div class="stat-label">Account Status</div>
                        <div class="stat-value"><?php echo $row['status']; ?></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Security Tip -->
        <div class="security-tip">
            <div class="security-tip-title">🔒 Security Tips</div>
            <p class="security-tip-text">
                Change your Internet banking Password Frequently to keep your Account Safe
            </p>
            <a href="editpass.php" class="btn btn-dark btn-sm">Reset Password</a>
        </div>

        <!-- Account Info -->
        <div class="transaction-section mt-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="text-muted" style="font-size: 13px;">Account Number</div>
                    <h5 class="mb-0"><?php echo $row['uname']; ?></h5>
                </div>
                <div class="text-right">
                    <div class="text-muted" style="font-size: 13px;">Account Type</div>
                    <h5 class="mb-0 text-primary"><?php echo $row['type']; ?></h5>
                </div>
            </div>
        </div>
    </div>

    <!-- Dark Mode Toggle Button -->
    <button class="theme-toggle" onclick="toggleDarkMode()" aria-label="Toggle dark mode">
        <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"/>
        </svg>
        <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"/>
        </svg>
    </button>

    <!-- Confirmation Modal -->
    <div class="confirm-modal" id="confirmModal">
        <div class="confirm-modal-content">
            <button class="modal-close" onclick="closeConfirmModal()">&times;</button>
            <div class="confirm-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
                    <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"/>
                </svg>
            </div>
            <h3 class="confirm-title">Confirm Action</h3>
            <p class="confirm-text">Do you want to proceed to <strong id="confirmActionText"></strong>?</p>
            <div class="confirm-buttons">
                <button class="btn-confirm" id="confirmActionBtn">Yes, Proceed</button>
                <button class="btn-cancel" onclick="closeConfirmModal()">Cancel</button>
            </div>
        </div>
    </div>

    <script>
    // Dark Mode Toggle Functionality
    function toggleDarkMode() {
        document.body.classList.toggle('dark-mode');
        
        // Save preference to localStorage
        if (document.body.classList.contains('dark-mode')) {
            localStorage.setItem('theme', 'dark');
        } else {
            localStorage.setItem('theme', 'light');
        }
    }

    // Load saved theme preference on page load
    document.addEventListener('DOMContentLoaded', function() {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'dark') {
            document.body.classList.add('dark-mode');
        }
    });

    // Confirmation Action Modal
    function confirmAction(actionName, targetUrl) {
        const modal = document.getElementById('confirmModal');
        const actionText = document.getElementById('confirmActionText');
        const confirmBtn = document.getElementById('confirmActionBtn');
        
        actionText.textContent = actionName;
        confirmBtn.onclick = function() {
            window.location.href = targetUrl;
        };
        
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    function closeConfirmModal() {
        const modal = document.getElementById('confirmModal');
        modal.classList.remove('active');
        document.body.style.overflow = 'auto';
    }

    // Close modal when clicking outside
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('confirmModal');
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeConfirmModal();
                }
            });
        }
    });
    </script>
</div>
<!---ends here content------>

<?php include 'footercopyright.php'; ?>
