<?php include 'header.php'; ?>
<?php include 'customer_navbar.php'; ?>

<div id="content-area">
    <header class="top-navbar">
        <div class="d-flex align-items-center">
        
        
            <button class="btn btn-light d-lg-none mr-3" id="sidebarToggle"><i class="mdi mdi-menu"></i></button>
            <h5 class="mb-0 font-weight-bold text-dark d-none d-md-block">Account Overview</h5>
        </div>

        <div class="d-flex align-items-center">
            <div class="cointag-user mr-4 d-none d-sm-flex">
                <div class="coin-icon"></div>
                <span>$<?php echo $balance; ?></span>
            </div>

            <div class="dropdown">
                <div class="user-avatar dropdown-toggle" id="profileDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <?php echo $initials; ?>
                </div>
                <div class="dropdown-menu dropdown-menu-right border-0 shadow-lg mt-3" aria-labelledby="profileDropdown" style="border-radius: 12px; width: 220px;">
                    <div class="px-4 py-3 border-bottom">
                        <p class="mb-0 font-weight-bold text-dark small"><?php echo $fullname; ?></p>
                        <p class="mb-0 text-muted extra-small" style="font-size: 11px;"><?php echo $user['email']; ?></p>
                    </div>
                    <a class="dropdown-item py-2" href="customer_personal_details.php"><i class="mdi mdi-account-outline mr-2"></i> Profile</a>
                    <a class="dropdown-item py-2" href="customer_transfer.php"><i class="mdi mdi-send mr-2"></i> Transfer</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item py-2 text-danger" href="customer_logout.php"><i class="mdi mdi-logout mr-2"></i> Logout</a>
                </div>
            </div>
        </div>
    </header>

    <div class="container-fluid p-4">
        <div class="card border-0 shadow-sm mb-4" style="background: linear-gradient(135deg, #0052FF 0%, #003199 100%); border-radius: 20px;">
            <div class="card-body p-4 p-md-5 text-white">
                <div class="row align-items-center">
                    <div class="col-md-7">
                        <h5 class="opacity-75 font-weight-light">Portfolio Balance</h5>
                        <h1 class="display-4 font-weight-bold mb-0">$<?php echo $balance; ?></h1>
                        <p class="mt-3 mb-0"><span class="badge badge-pill badge-light text-primary px-3 py-2">Account No: <?php echo $acc_no; ?></span></p>
                    </div>
                    <div class="col-md-5 text-md-right mt-4 mt-md-0">
                        <a href="customer_transfer.php" class="btn btn-light btn-lg px-4" style="border-radius: 12px; color: #0052FF; font-weight: 700;">Transfer Funds</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card border-0 shadow-sm h-100" style="border-radius: 15px;">
                    <div class="card-body p-4">
                        <span class="text-muted small font-weight-bold text-uppercase">Security Status</span>
                        <div class="d-flex align-items-center mt-2">
                            <i class="mdi mdi-shield-check text-success mr-2" style="font-size: 24px;"></i>
                            <h4 class="mb-0 font-weight-bold">Highly Secured</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card border-0 shadow-sm h-100" style="border-radius: 15px;">
                    <div class="card-body p-4">
                        <span class="text-muted small font-weight-bold text-uppercase">Account Status</span>
                        <div class="d-flex align-items-center mt-2">
                            <i class="mdi mdi-check-decagram text-primary mr-2" style="font-size: 24px;"></i>
                            <h4 class="mb-0 font-weight-bold"><?php echo ($user['verified'] == 1) ? 'ACTIVE' : 'PENDING'; ?></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm" style="border-radius: 15px; overflow: hidden;">
            <div class="card-header bg-white border-0 py-4 px-4 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 font-weight-bold">Recent Activities</h5>
                <a href="customer_mini_statement.php" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="border-0 px-4">Details</th>
                            <th class="border-0">Date</th>
                            <th class="border-0 text-right px-4">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $t_sql = "SELECT * FROM transactions WHERE user_id = '$cust_id' ORDER BY id DESC LIMIT 5";
                        $t_res = mysqli_query($con, $t_sql);
                        if(mysqli_num_rows($t_res) > 0) {
                            while($row = mysqli_fetch_assoc($t_res)) {
                                $is_credit = ($row['type'] == 'credit');
                                echo "<tr>
                                    <td class='px-4 py-3'>
                                        <div class='font-weight-bold text-dark'>".$row['description']."</div>
                                        <small class='text-muted'>".$row['status']."</small>
                                    </td>
                                    <td class='py-3'>".date('M d, Y', strtotime($row['created_at']))."</td>
                                    <td class='text-right px-4 py-3 font-weight-bold ".($is_credit ? 'text-success' : 'text-danger')."'>
                                        ".($is_credit ? '+' : '-')." $".number_format($row['amount'], 2)."
                                    </td>
                                </tr>";
                            }
                        } else {
                            echo "<tr><td colspan='3' class='text-center py-5 text-muted'>No transactions recorded yet.</td></tr>";
                        }
                        ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

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