<?php
session_start();
require 'includes/db.php';

if (!isset($_SESSION['user_id'])) {
    header("Location: homepage.html");
    exit;
}

$user_id = $_SESSION['user_id'];

/* =========================
   USER DATA
========================= */
$stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$user_id]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);

/* =========================
   TRANSACTIONS (LATEST 10)
========================= */
$stmt = $pdo->prepare("
    SELECT * FROM transactions 
    WHERE user_id = ? 
    ORDER BY created_at DESC 
    LIMIT 10
");
$stmt->execute([$user_id]);
$transactions = $stmt->fetchAll(PDO::FETCH_ASSOC);
$avatar = !empty($user['avatar']) 
    ? 'assets/images/avatar/' . $user['avatar']
    : 'https://i.pravatar.cc/100';

$stmt = $pdo->prepare("
    SELECT COUNT(*) 
    FROM crypto_orders 
    WHERE user_id = ? 
    AND status = 'pending'
");
$stmt->execute([$user_id]);
$pending_count = (int)$stmt->fetchColumn();
$stmt = $pdo->prepare("SELECT * FROM loans ORDER BY id DESC");
$stmt->execute();
$loans = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secured Online | Dashboard</title>
<link rel="icon" type="image/png" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* RESET */
*{ margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; }
body{ background:#eef3f9; color:#1a1a1a; overflow-x:hidden; }

/* APP LAYOUT */
.app{ display:flex; min-height:100vh; transition:0.3s; }

/* SIDEBAR */
.sidebar{
    position:fixed; width:280px; height:100vh; background:linear-gradient(180deg,#001b38,#003b73);
    padding:20px; overflow-y:auto; color:white; transition:0.3s;
    z-index:1000;
}
.sidebar .logo{ display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.sidebar .logo img{ width:150px; height:150px; object-fit:contain; }
.sidebar .logo h2{ font-size:22px; font-weight:600; }
.sidebar .menu-title{ font-size:12px; color:#9db8d8; margin:20px 0 10px; text-transform:uppercase; }
.sidebar .menu-item{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px; cursor:pointer; margin-bottom:10px; text-decoration:none; color:white; transition:0.3s;}
.sidebar .menu-item.active{ background:white; color:#003366; font-weight:600; }
.sidebar .menu-item:hover{ background:rgba(255,255,255,0.1); transform:translateX(4px);}
.sidebar .icon{ font-size:18px; }

/* MAIN CONTENT */
.main{ flex:1; margin-left:280px; padding:20px; transition:0.3s; }
.content{ margin-top:20px; }

/* TOPBAR */
.topbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; margin-bottom:20px; }
.menu-toggle{ display:none; font-size:24px; cursor:pointer; }
.topbar .search input{ padding:12px 16px; border:none; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.05); outline:none; width:300px; }
.topbar .profile{ display:flex; align-items:center; gap:12px; background:white; padding:8px 12px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.05); }
.topbar .profile img{ width:40px; height:40px; border-radius:50%; }

/* ACTION BAR */
.action-bar{ display:flex; gap:12px; overflow-x:auto; margin-bottom:20px; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
.action{ display:flex; flex-direction:column; align-items:center; padding:12px 16px; background:white; border-radius:16px; min-width:100px; box-shadow:0 5px 15px rgba(0,0,0,0.05); text-decoration:none; color:#1a1a1a; }
.action:hover{ transform:translateY(-3px);}
.action-icon{ width:50px; height:50px; border-radius:12px; background:linear-gradient(135deg,#003366,#0059b3); display:flex; align-items:center; justify-content:center; color:white; font-size:22px; margin-bottom:8px; }

/* HERO & ACCOUNTS */
.hero{ background:linear-gradient(135deg,#003366,#0059b3); border-radius:20px; padding:30px; color:white; margin-bottom:25px; position:relative; }
.hero h1{ font-size:28px; margin-bottom:8px; }
.hero p{ color:#dbe9ff; line-height:1.5; }
.accounts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:15px; margin-top:20px; }
.account-card{ background:rgba(255,255,255,0.12); border-radius:16px; padding:20px; color:#dbe9ff; transition:0.3s; }
.account-card:hover{ transform:translateY(-3px); }
.account-top{ display:flex; justify-content:space-between; margin-bottom:15px; font-size:14px; }
.account-card h2{ font-size:26px; margin-bottom:10px; }
.account-bottom{ display:flex; justify-content:space-between; font-size:14px; }
.positive{ color:#7dffb1; }

/* GRID */
.grid{ display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-top:20px; }

/* TRANSACTIONS */
.transactions{ background:white; border-radius:16px; padding:20px; box-shadow:0 5px 20px rgba(0,0,0,0.05);}
.transactions h2{ color:#003366; margin-bottom:15px; }
.transaction{ display:flex; justify-content:space-between; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid #eee; }
.transaction:last-child{ border-bottom:none; }
.transaction-left h4{ margin-bottom:4px; font-size:15px; }
.transaction-left span{ color:#777; font-size:13px; }
.credit{ color:#1db954; font-weight:600; }
.debit{ color:#dc3545; font-weight:600; }

/* RIGHT COLUMN */
.right-column{ display:flex; flex-direction:column; gap:15px; }

/* CREDIT */
.credit-box{ background:linear-gradient(135deg,#001f3f,#004d99); color:white; border-radius:16px; padding:20px; }
.credit-box h3{ margin-bottom:10px; font-size:16px; }
.credit-box h1{ font-size:32px; margin-bottom:6px; }
.credit-box p{ font-size:14px; }

/* LOAN */
.loan-box{ background:white; border-radius:16px; padding:20px; box-shadow:0 5px 20px rgba(0,0,0,0.05); }
.loan-item{ display:flex; flex-direction:column; gap:8px; background:#f5f9ff; border-radius:12px; padding:12px; }
.loan-item h4{ font-size:15px; color:#003366; }
.loan-item p{ font-size:13px; color:#555; line-height:1.4; }
.loan-item button{ padding:10px 14px; border:none; border-radius:8px; background:#003366; color:white; cursor:pointer; width:fit-content; }

/* RESPONSIVE */
@media(max-width:1024px){
    .main{ margin-left:0; padding:15px; }
    .sidebar{ transform:translateX(-100%); position:fixed; z-index:999; }
    .sidebar.active{ transform:translateX(0); }
    .menu-toggle{ display:block; margin-bottom:10px; }
}
@media(max-width:768px){
    .topbar{ flex-direction:column; align-items:stretch; }
    .search input{ width:100%; }
    .grid{ grid-template-columns:1fr; }
    .accounts{ grid-template-columns:1fr; }
    .action-bar{ overflow-x:auto; }
}

/* ================= MOBILE FIX FOR ACCOUNT CARDS ================= */
@media(max-width:768px){
    .accounts {
        grid-template-columns:1fr; /* single column */
    }

    .account-card .account-top {
        flex-direction: column; /* stack label & account number vertically */
        align-items: flex-start; /* left-align text */
        gap:4px; /* small spacing */
    }

    .account-card .account-bottom {
        flex-direction: row; /* keep balance and percentage on same row */
        justify-content: space-between;
        font-size:12px; /* smaller text for mobile */
    }

    .account-card h2{
        font-size:22px; /* smaller balance font for mobile */
    }
}
.sidebar-close{
    display:none;
    position:absolute;
    top:15px;
    right:15px;
    font-size:22px;
    cursor:pointer;
    color:white;
}
@media(max-width:768px){
    .sidebar-close{
        display:block;
    }

    .sidebar{
        transition:0.3s;
    }

    .sidebar.hidden{
        transform:translateX(-100%);
    }
}
/* TRANSACTIONS */
.transactions{
    background:white;
    padding:20px;
    border-radius:16px;
}

.transaction{
    padding:15px;
    border-bottom:1px solid #eee;
}

.transaction h3{
    color:#003366;
    margin-bottom:8px;
}

.row{
    font-size:14px;
    margin:4px 0;
}

.status{
    padding:4px 10px;
    border-radius:20px;
    background:#fff3cd;
    color:#856404;
    font-size:12px;
    display:inline-block;
}
</style>
</head>
<body>

<div class="app">

   <!-- SIDEBAR -->
<div class="sidebar">
    <div class="logo">
        <img src="assets/images/logo.png" alt="Logo">
        
    </div>
    <div class="menu-title">Main</div>
    <div class="sidebar-close" onclick="toggleSidebar()">✖</div>
    <a href="dashboard.php" class="menu-item active"><div class="icon">🏠</div><span>Dashboard</span></a>
    <a href="transfer.php" class="menu-item"><div class="icon">💸</div><span>Transfers</span></a>
    <a href="investment.php" class="menu-item"><div class="icon">📈</div><span>Investments</span></a>
    <a href="loan.php" class="menu-item"><div class="icon">💰</div><span>Loans</span></a>
    <a href="buy_crypto.php" class="menu-item"><div class="icon">💎</div><span>Buy Crypto</span></a>
    <a href="card.php" class="menu-item"><div class="icon">💳</div><span>Cards</span></a>
    <a href="check.php" class="menu-item"><div class="icon">🏦</div><span>Check</span></a>
    <a href="logout.php" class="menu-item"><div class="icon">🚪</div><span>Logout</span></a>
</div>

    <!-- MAIN -->
    <div class="main">

        <!-- TOPBAR -->
        <div class="topbar">
            <span class="menu-toggle">☰</span>
            <div class="search">
                <input type="text" placeholder="Search transactions, cards, loans...">
            </div>
            <input type="file" id="avatarInput" accept="image/*" style="display:none;">
            
            <div class="profile">
                <img src="<?= htmlspecialchars($avatar) ?>" 
     alt="User Avatar"
     onclick="document.getElementById('avatarInput').click();"
     style="cursor:pointer;">
                <div>
                    <h4><?= htmlspecialchars($user['full_name']) ?></h4>
                    <span> <?= htmlspecialchars($user['account_number']) ?></span>
                </div>
            </div>
        </div>

        <!-- ACTIONS -->
        <div class="action-bar">
            
    
<a href="transaction.php" class="action"> <div class="action-icon">📄</div> <span>Transactions</span> </a>
<a href="confirmation.php" class="action">
    <div class="action-icon" style="position:relative;">
        💎

        <?php if ($pending_count > 0): ?>
            <span class="badge"><?= $pending_count ?></span>
        <?php endif; ?>

    </div>
    <span>Crypto Transactions</span>
</a>
           
        </div>


        <!-- HERO -->
        <div class="hero">
            <h1>Premium Digital Banking</h1>
            <p>Securely manage checking, savings, transfers, loans and investments from your corporate dashboard.</p>

            <!-- ACCOUNTS -->
            <div class="accounts">
                <div class="account-card">
                    <div class="account-top"><span>Checking Account</span><span>••• 2089</span></div>
                    <h2>$<?= number_format($user['checking_balance'], 2) ?></h2>
                    <div class="account-bottom"><span>Available Balance</span><span class="positive">+2.5%</span></div>
                </div>
                <div class="account-card">
                    <div class="account-top"><span>Savings Account</span><span>••• 6671</span></div>
                    <h2>$<?= number_format($user['savings_balance'], 2) ?></h2>
                    <div class="account-bottom"><span>Annual Yield</span><span class="positive">4.8% APY</span></div>
                </div>
            </div>
        </div>

        <!-- GRID -->
        <div class="grid">

    <!-- TRANSACTIONS GRID -->
        <div class="transactions">

            <?php if (empty($transactions)): ?>
                <p>No pending transactions.</p>
            <?php endif; ?>

            <?php foreach ($transactions as $tx): ?>

                <div class="transaction">

                    <h3>
                        <?= htmlspecialchars($tx['crypto_name']) ?>
                        (<?= htmlspecialchars($tx['crypto_symbol']) ?>)
                    </h3>

                    <div class="row"><b>Amount:</b> $<?= number_format((float)$tx['amount'], 2) ?></div>

                    <div class="row"><b>Wallet:</b> <?= htmlspecialchars($tx['wallet_address']) ?></div>

                    <div class="row"><b>Payment:</b> <?= htmlspecialchars($tx['payment_method']) ?></div>

                   

                    <div class="row">
                        <b>Status:</b>
                        <span class="status"><?= htmlspecialchars($tx['status']) ?></span>
                    </div>

                    <div class="row">
                        <b>Date:</b>
                        <?= date("M d, Y h:i A", strtotime($tx['created_at'])) ?>
                    </div>

                    <?php if (!empty($tx['admin_note'])): ?>
                        <div class="row" style="color:#b58900;">
                            <b>Admin Note:</b> <?= htmlspecialchars($tx['admin_note']) ?>
                        </div>
                    <?php endif; ?>

                </div>

            <?php endforeach; ?>
<hr/>
<p>Please be advised that transaction processing may take up to 3 to 4 hours to complete. If your transaction remains unprocessed after this period, kindly contact your Account Officer for assistance and technical support.
We appreciate your patience and understanding.
<br/>
Thank you for banking with us.</p>
        </div>

    </div>

</div>
<script>
// Sidebar toggle for mobile
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');

menuToggle.addEventListener('click', () => {
    sidebar.classList.toggle('active');
});
document.getElementById("avatarInput").addEventListener("change", async function () {

    const file = this.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append("avatar", file);

    const res = await fetch("api/upload_avatar.php", {
        method: "POST",
        body: formData
    });

    const data = await res.json();

    if (data.status === "success") {
        alert("Avatar updated!");

        // instantly update UI without reload
        document.querySelectorAll("img[alt='User Avatar']").forEach(img => {
            img.src = data.path + "?t=" + new Date().getTime();
        });

    } else {
        alert(data.message);
    }
});
</script>

</body>
</html>