<style>
    :root {
        --card-w: 380px;
        --card-h: 230px;
        --radius: 14px;
    }

    .vcard-wrap {
        display: flex;
        justify-content: center;
        padding: 12px 0;
    }

    .vcard {
        width: var(--card-w);
        height: var(--card-h);
        border-radius: var(--radius);
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0,0,0,0.18);
        cursor: default;
        font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
        transition: transform 0.3s ease;
    }

    .vcard:hover {
        transform: translateY(-2px);
    }

    /* Brand backgrounds */
    .vcard.visa {
        background: linear-gradient(135deg, #0a1f44 0%, #003d8f 40%, #005bb5 100%);
    }
    .vcard.mastercard {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 30%, #c0392b 100%);
    }
    .vcard.discover {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 40%, #f47920 100%);
    }

    .vcard-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px 4px;
    }

    .vcard-debit {
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: rgba(255,255,255,0.55);
        text-transform: uppercase;
    }

    .vcard-bank-logo {
        height: 22px;
        opacity: 0.9;
    }

    .vcard-balance-section {
        padding: 6px 20px 10px;
    }

    .vcard-balance-label {
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        color: rgba(255,255,255,0.45);
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .vcard-balance {
        display: flex;
        align-items: baseline;
        gap: 3px;
    }

    .vcard-currency {
        font-size: 0.7rem;
        font-weight: 500;
        color: rgba(255,255,255,0.55);
    }

    .vcard-balance-amount {
        font-size: 1.15rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.02em;
    }

    .vcard-number-row {
        padding: 12px 20px 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .vcard-number {
        font-family: 'SFMono-Regular', 'Consolas', monospace;
        font-size: 1.05rem;
        letter-spacing: 2px;
        color: rgba(255,255,255,0.85);
        font-weight: 500;
    }

    .vcard-eye {
        color: rgba(255,255,255,0.4);
        font-size: 0.85rem;
        cursor: pointer;
        padding: 2px;
        transition: color 0.2s;
        text-decoration: none;
    }
    .vcard-eye:hover { color: rgba(255,255,255,0.8); }

    .vcard-bottom {
        display: flex;
        padding: 8px 20px 0;
        gap: 24px;
    }

    .vcard-label {
        font-size: 0.5rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        color: rgba(255,255,255,0.45);
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .vcard-value {
        font-size: 0.7rem;
        font-weight: 500;
        color: rgba(255,255,255,0.85);
        text-transform: uppercase;
    }

    .vcard-network {
        position: absolute;
        bottom: 16px;
        right: 20px;
    }

    .vcard-network img,
    .vcard-network svg {
        height: 28px;
        opacity: 0.9;
    }

    .vcard-network-text {
        font-size: 0.75rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.04em;
    }

    @media (max-width: 420px) {
        :root { --card-w: 320px; --card-h: 195px; }
        .vcard-number { font-size: 0.9rem; letter-spacing: 1.5px; }
        .vcard-bottom { gap: 14px; }
        .vcard-balance-amount { font-size: 1rem; }
    }
</style>

<div class="nk-content-body">
    <h5>Your Virtual Card</h5>
    <div class="vcard-wrap">

<?php
$sqlcard = mysqli_query($mysqli, "SELECT * FROM virtualcard WHERE email = '$chap' ORDER BY id DESC");
$cards = [];
while ($r = mysqli_fetch_assoc($sqlcard)) { $cards[] = $r; }

// No cards at all - show apply prompt
if (empty($cards)):
?>
    <div class="card card-bordered" style="width:100%;max-width:420px;">
        <div class="card-inner text-center py-4">
            <p class="sub-text mb-2">No virtual card yet.</p>
            <a href="card_application" class="btn btn-primary btn-sm">Apply for a Virtual Card</a>
        </div>
    </div>
<?php
else:
    foreach ($cards as $cardrow):
        // Pending
        if ($cardrow['status'] == 'pending'):
?>
    <div class="card card-bordered" style="width:100%;max-width:420px;">
        <div class="card-inner text-center py-4">
            <div class="mb-3"><span class="badge badge-warning badge-pill" style="font-size:0.8rem;padding:6px 16px;">Pending</span></div>
            <h6 class="title mb-2">Virtual Card Application</h6>
            <p class="sub-text mb-1">Your <?=htmlspecialchars($cardrow['card_type'])?> card application is awaiting administrator approval.</p>
            <p class="sub-text mb-2">Your card details will appear here once your application is approved.</p>
            <div class="nk-data data-list mt-3">
                <div class="data-item"><div class="data-col"><span class="data-label">Card Network</span><span class="data-value text-uppercase"><?=htmlspecialchars($cardrow['card_type'])?></span></div></div>
                <div class="data-item"><div class="data-col"><span class="data-label">Applied On</span><span class="data-value"><?=$cardrow['application_date'] ?? $cardrow['created_at'] ?? '—'?></span></div></div>
            </div>
        </div>
    </div>
<?php
        // Rejected
        elseif ($cardrow['status'] == 'rejected'):
?>
    <div class="card card-bordered" style="width:100%;max-width:420px;">
        <div class="card-inner text-center py-4">
            <div class="mb-3"><span class="badge badge-danger badge-pill" style="font-size:0.8rem;padding:6px 16px;">Not Approved</span></div>
            <h6 class="title mb-2"><?=htmlspecialchars($cardrow['card_type'])?> Application Not Approved</h6>
            <p class="sub-text mb-2"><?=htmlspecialchars($cardrow['rejection_reason'] ?? 'Your application was not approved.')?></p>
            <a href="card_application" class="btn btn-primary btn-sm mt-2">Apply Again</a>
        </div>
    </div>
<?php
        // Approved
        elseif ($cardrow['status'] == 'approved' || $cardrow['status'] == 'Completed'):
            $network = strtolower($cardrow['card_type']);
            $masked  = '•••• •••• •••• ' . substr($cardrow['card_number'] ?? '0000', -4);
            $expiry  = $cardrow['expiration_date'] ?? '—/—';
            $balance = formatCurrency($row['checking_balance'] ?? 0, $row['usercurrency'] ?? 'USD');
            $currency = $row['usercurrency'] ?? 'USD';
            $cvv     = $cardrow['cvv'] ?: str_pad(mt_rand(0, 999), 3, '0', STR_PAD_LEFT);
            $name    = $cardrow['fullname'] ?: ($row['firstname'] . ' ' . $row['lastname']);
?>
    <div class="vcard <?=$network?>">
        <div class="vcard-top"><span class="vcard-debit">DEBIT</span><img src="../logo.png" class="vcard-bank-logo" alt="Bank"></div>
        <div class="vcard-balance-section">
            <div class="vcard-balance-label">Available Balance</div>
            <div class="vcard-balance"><span class="vcard-balance-amount"><?=$balance?></span></div>
        </div>
        <div class="vcard-number-row">
            <span class="vcard-number" id="cardNum_<?=$cardrow['id']?>"><?=$masked?></span>
            <a href="#" class="vcard-eye" onclick="toggleCardNum(event, 'cardNum_<?=$cardrow['id']?>', '<?=$cardrow['card_number']?>', '<?=$masked?>')" title="Show number"><em class="icon ni ni-eye" id="eye_<?=$cardrow['id']?>"></em></a>
        </div>
        <div class="vcard-bottom">
            <div><div class="vcard-label">Cardholder Name</div><div class="vcard-value"><?=htmlspecialchars($name)?></div></div>
            <div><div class="vcard-label">Expires</div><div class="vcard-value"><?=$expiry?></div></div>
            <div><div class="vcard-label">CVV</div><div class="vcard-value" style="display:flex;align-items:center;gap:4px;"><span id="cvv_<?=$cardrow['id']?>">•••</span><a href="#" class="vcard-eye" onclick="toggleCVV(event, 'cvv_<?=$cardrow['id']?>', '<?=$cvv?>')" title="Show CVV"><em class="icon ni ni-eye" id="cvvEye_<?=$cardrow['id']?>"></em></a></div></div>
        </div>
        <div class="vcard-network"><span class="vcard-network-text"><?=strtoupper($network)?></span></div>
    </div>
<?php
        endif;
    endforeach;
endif;
?>

    </div>
</div>

<script>
function toggleCardNum(e, elId, fullNum, masked) {
    e.preventDefault();
    var el = document.getElementById(elId);
    var eye = document.getElementById('eye_' + elId.replace('cardNum_', ''));
    var icon = eye.querySelector('.icon');
    if (el.textContent === masked) {
        el.textContent = fullNum;
        icon.classList.remove('ni-eye');
        icon.classList.add('ni-eye-off');
        eye.title = 'Hide number';
    } else {
        el.textContent = masked;
        icon.classList.remove('ni-eye-off');
        icon.classList.add('ni-eye');
        eye.title = 'Show number';
    }
}

function toggleCVV(e, elId, cvv) {
    e.preventDefault();
    var el = document.getElementById(elId);
    var eye = document.getElementById('cvvEye_' + elId.replace('cvv_', ''));
    var icon = eye.querySelector('.icon');
    if (el.textContent === '•••') {
        el.textContent = cvv;
        icon.classList.remove('ni-eye');
        icon.classList.add('ni-eye-off');
        eye.title = 'Hide CVV';
    } else {
        el.textContent = '•••';
        icon.classList.remove('ni-eye-off');
        icon.classList.add('ni-eye');
        eye.title = 'Show CVV';
    }
}
</script>
