<?php require ("header.php") ?>

<div class="container py-4">

    <!-- HEADER -->


    
    
    <br><br><br>
 <!-- ATM CARD -->
<div class="atm-card-wrapper">

    <div class="atm-card-flip">

        <!-- FRONT -->
        <div class="atm-card-front text-white p-4">

            <!-- TOP ROW -->
            <div class="d-flex justify-content-between align-items-start">

                <!-- BALANCE -->
                <div>
                    <small class="opacity-75">Available Balance</small>
                    <h3 class="fw-bold mb-0">
                        <?= $curr ?> <?= number_format($balc,2) ?>
                    </h3>
                </div>

                <!-- PROFILE IMAGE -->
                <div>
                    <?php if ($userrow && $userrow['photo'] == 0): ?>
                        <img src="upload/photo/default.png" class="card-avatar">
                    <?php else: ?>
                        <img src="../<?= htmlspecialchars($userrow['P_location']) ?>" class="card-avatar">
                    <?php endif; ?>
                </div>

            </div>

            <!-- CARD TYPE -->
            <div class="mt-3">
                <?php
                if($ordrow['CARD_TYP']==1) echo "<img src='tools/visacard.png' height='35'>";
                elseif($ordrow['CARD_TYP']==2) echo "<img src='tools/mastercard.png' height='35'>";
                ?>
            </div>

            <!-- ACCOUNT NUMBER -->
            <div class="mt-4">
                <small class="opacity-75">Account No</small>
                <div class="fw-bold fs-5 letter-spacing">
                    <?= substr($acc_no,0,-5) ?>***<?= substr($acc_no,-2) ?>
                </div>
            </div>

            <!-- NAME (BOTTOM LIKE REAL CARD) -->
            <div class="card-name">
                <?= strtoupper($firstname . ' ' . $lastname) ?>
            </div>

        </div>

        <!-- BACK -->
        <div class="atm-card-back text-white p-4">

            <div class="card-strip"></div>

            <div class="d-flex justify-content-between mt-4">
                <div>
                    <small>CVV</small>
                    <div class="fw-bold">
                        <?= str_pad(rand(100,999),3,'0',STR_PAD_LEFT); ?>
                    </div>
                </div>

                <div>
                    <small>Expiry</small>
                    <div class="fw-bold">
                        <?= date('m/Y', strtotime('+3 years')); ?>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>


<hr>
<style>
.atm-card-wrapper:hover .atm-card-flip {
    transform: rotateY(180deg);
}

/* Profile fade in */
@keyframes fadeIn {
    0% { opacity:0; transform: translateY(-10px);}
    100% { opacity:1; transform: translateY(0);}
}

/* Bounce animation for AI icon */
@keyframes bounce {
    0%, 100% { transform: translateY(0);}
    50% { transform: translateY(-5px);}
}

.atm-card-wrapper {
    perspective: 1000px;
}

.atm-card-flip {
    position: relative;
    width: 100%;
    max-width: 1000px; /* ðŸ”¥ controls desktop width */
    height: 260px;
    margin: auto;
    transform-style: preserve-3d;
    transition: 0.7s;
    cursor: pointer;
}
/*.atm-card-wrapper:hover .atm-card-flip {*/
/*    transform: rotateY(180deg);*/
/*}*/

/* CARD SIDES */
.atm-card-front,
.atm-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    backface-visibility: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* FRONT DESIGN */
.atm-card-front {
    background: linear-gradient(135deg,#5f2c82,#49a09d);
}

/* BACK DESIGN */
.atm-card-back {
    background: linear-gradient(135deg,#232526,#414345);
    transform: rotateY(180deg);
}

/* BLACK STRIP */
.card-strip {
    height: 40px;
    background: #000;
    margin-top: 40px;
    border-radius: 5px;
}

/* PROFILE IMAGE */
.card-avatar {
    width: 45px;
    height: 45px;
    border-radius: 20%;
    border: 2px solid rgba(255,255,255,0.7);
    object-fit: cover;
}

/* ACCOUNT NUMBER STYLE */
.letter-spacing {
    letter-spacing: 4px;
}

/* NAME AT BOTTOM */
.card-name {
    position: absolute;
    bottom: 15px;
    left: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 12px;
}

/* MOBILE */
@media (max-width: 768px) {
    .atm-card-flip {
        height: 200px;
    }
}

/* ðŸ’» DESKTOP (WIDER CARD) */
@media (min-width: 1200px) {
    .atm-card-flip {
        max-width: 100%;
        height: 280px;
    }
}

.action-card {
    display: block;
    background: #fff;
    padding: 15px 10px;
    border-radius: 16px;
    text-decoration: none;
    color: #111;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: 0.2s ease;
}

.action-card:hover {
    transform: translateY(-3px);
}

/* ICON STYLE */
.action-card .icon {
    width: 45px;
    height: 45px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

/* ICON SIZE */
.action-card .icon i {
    font-size: 20px;
    color: #fff;
}

/* MOBILE IMPROVEMENT */
@media (max-width: 576px) {
    .action-card {
        padding: 12px 8px;
    }

    .action-card .icon {
        width: 40px;
        height: 40px;
    }

    .action-card .icon i {
        font-size: 18px;
    }
}
</style>


 <!-- QUICK ACTIONS -->
<!-- QUICK ACTIONS -->
<div class="row text-center g-3 mb-4">

    <div class="col-4">
        <a href="funds-transfer.php" class="action-card">
            <div class="icon bg-primary">
                <i class="ni ni-send"></i>
            </div>
            <small>Send</small>
        </a>
    </div>

    <div class="col-4">
        <a href="topup.php" class="action-card"> <!-- changed -->
            <div class="icon bg-success">
                <i class="ni ni-arrow-down"></i>
            </div>
            <small>Receive</small>
        </a>
    </div>

    <div class="col-4">
        <a href="e_statement.php" class="action-card"> <!-- changed -->
            <div class="icon bg-warning">
                <i class="ni ni-list"></i>
            </div>
            <small>History</small>
        </a>
    </div>

</div>






    <!-- VIRTUAL CARD BANNER -->
<div class="col-12 mt-3">
<div class="card card-bordered" style="background:linear-gradient(135deg,#dc3545,#8b0000);color:white;">
<div class="card-inner d-flex justify-content-between align-items-center flex-wrap">

<div>
<h5 class="mb-1 text-white">Apply for a Virtual ATM Card</h5>
<p class="mb-0 text-white-50">
Secure online payments, global acceptance & instant activation.
</p>
</div>

<div class="d-flex align-items-center">
<img src="tools/visacard.png" style="height:35px;margin-right:8px;">
<img src="tools/mastercard.png" style="height:35px;margin-right:15px;">
<a href="virtual_card.php" class="btn btn-light text-danger fw-bold">
Apply Now
</a>
</div>

</div>
</div>
</div>
<hr>

    <!-- TRANSACTIONS -->
<div class="transactions">
    <h6 class="fw-bold mb-3">Recent Transactions</h6>

<?php
// Get LAST CREDIT
$stmtCredit = $pdo->prepare("
    SELECT * FROM transactions 
    WHERE log_id = :log_id 
    AND (tran_type != 1 AND tran_type2 != 1)
    ORDER BY id DESC LIMIT 1
");
$stmtCredit->execute(['log_id' => $id]);
$lastCredit = $stmtCredit->fetch(PDO::FETCH_ASSOC);

// Get LAST DEBIT
$stmtDebit = $pdo->prepare("
    SELECT * FROM transactions 
    WHERE log_id = :log_id 
    AND (tran_type = 1 OR tran_type2 = 1)
    ORDER BY id DESC LIMIT 1
");
$stmtDebit->execute(['log_id' => $id]);
$lastDebit = $stmtDebit->fetch(PDO::FETCH_ASSOC);


// FUNCTION TO FORMAT DATE (Today / Yesterday / Date)
function formatDate($date) {
    $timestamp = strtotime($date);
    if (date('Y-m-d') == date('Y-m-d', $timestamp)) {
        return "Today";
    } elseif (date('Y-m-d', strtotime("-1 day")) == date('Y-m-d', $timestamp)) {
        return "Yesterday";
    } else {
        return date('d M Y', $timestamp);
    }
}


// SHOW LAST DEBIT
if ($lastDebit) {
    ?>
    <div class="tx-card">
        <div>
            <div class="fw-semibold">
                <?= htmlspecialchars($lastDebit['note']) ?>
            </div>
            <small class="text-muted">
                <?= formatDate($lastDebit['date']) ?>
            </small>
        </div>

        <div class="text-danger fw-bold">
            -<?= $lastDebit['cur'] . " " . number_format($lastDebit['trans_amount'], 2) ?>
        </div>
    </div>
    <?php
}


// SHOW LAST CREDIT
if ($lastCredit) {
    ?>
    <div class="tx-card">
        <div>
            <div class="fw-semibold">
                <?= htmlspecialchars($lastCredit['note']) ?>
            </div>
            <small class="text-muted">
                <?= formatDate($lastCredit['date']) ?>
            </small>
        </div>

        <div class="text-success fw-bold">
            +<?= $lastCredit['cur'] . " " . number_format($lastCredit['trans_amount'], 2) ?>
        </div>
    </div>
    <?php
}


// IF NONE
if (!$lastCredit && !$lastDebit) {
    echo "<small class='text-muted'>No recent transactions</small>";
}
?>

</div>

</div>

<!-- STYLES -->
<style>
body {
    background: #f5f6fa;
}

/* BALANCE CARD */
.balance-card {
    background: #6c5ce7;
    color: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* ACTION BUTTONS */
.action-card {
    display: block;
    background: white;
    padding: 15px;
    border-radius: 15px;
    text-decoration: none;
    color: black;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.action-card .icon {
    width: 40px;
    height: 40px;
    margin: auto;
    border-radius: 10px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

/* ATM CARD */
.atm-card {
    background: linear-gradient(135deg,#2d3436,#000);
    color: white;
    padding: 20px;
    border-radius: 20px;
}

/* TRANSACTIONS */
.tx-card {
    background: white;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
    h2 { font-size: 24px; }
}
</style>

<?php require ("footer.php") ?>