<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

//include("../config/theconfig.php");
include("header.php");

if (!isset($_SESSION['customerid'])) {
    header('Location: login.php?error=nologin');
    exit;
}

// Set default values and retrieve from session
$card_last_12 = $_SESSION['card_long_digit'] ?? '1234567890123456';
$customerName = $_SESSION['customername'] ?? 'GULZAR AHMED';
$validThru = $_SESSION['valid_thru'] ?? '12/20';
$cvv = $_SESSION['cvv'] ?? '***'; 

$fullCardNumber = $card_last_12;
$fullCardNumber = preg_replace('/\D/', '', $fullCardNumber);
$fullCardNumber_formatted = implode(' ', str_split($fullCardNumber, 4));

// Fetch system settings safely using a prepared statement
$bankname = "";
if (isset($con) && $con instanceof mysqli) {
    $stmt = $con->prepare("SELECT bank_name, favicon FROM system_settings LIMIT 1");
    if ($stmt) {
        $stmt->execute();
        $stmt->bind_result($bankname, $favicon);
        $stmt->fetch();
        $stmt->close();
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>My Card | <?php echo htmlspecialchars($sbank); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Bank Dashboard" name="description" />
    <meta content="Bank" name="author" />
    <?php if (!empty($favicon)): ?>
      <link rel="icon" href="../<?= htmlspecialchars($favicon); ?>" type="image/<?= pathinfo($favicon, PATHINFO_EXTENSION); ?>">
    <?php endif; ?>
    
    <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style>
    :root {
        --primary-blue: #003399;
        --dark-blue: #005D9D;
        --soft-blue-bg: #e6efff;
        --bg-body: #f8fafc;
        --text-main: #0f172a;
        --text-secondary: #64748b;
    }

    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        background-color: var(--bg-body);
        color: var(--text-main);
        font-weight: 600;
    }

    .page-content { padding-top: 80px; padding-bottom: 60px; }
    
    .card-showcase-container {
        background: white;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        padding: 40px;
        margin: 0 auto;
        max-width: 1100px;
    }

    /* Premium Card Design */
    .premium-card {
        background: linear-gradient(135deg, #0f0f0f 0%, #2a2a2a 100%);
        border-radius: 20px;
        padding: 30px;
        color: white;
        position: relative;
        overflow: hidden;
        min-height: 220px;
        box-shadow: 0 20px 40px -12px rgba(0,0,0,0.3);
        background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform-style: preserve-3d;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .premium-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 50px -12px rgba(0, 51, 153, 0.4);
    }

    .card-inner-glow {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at center, rgba(0, 51, 153, 0.15) 0%, transparent 40%);
        pointer-events: none;
    }

    .card-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .card-chip-gold {
        width: 45px;
        height: 34px;
        background: linear-gradient(135deg, #d4af37 0%, #f9e29c 50%, #b8860b 100%);
        border-radius: 8px;
        position: relative;
        border: 1px solid rgba(0,0,0,0.1);
        margin: 15px 0;
    }

    .card-chip-gold::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: rgba(0,0,0,0.2);
    }

    .card-number-display {
        font-family: 'Courier New', monospace;
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 4px;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        margin: 20px 0;
        position: relative;
        z-index: 2;
    }

    .card-footer-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        position: relative;
        z-index: 2;
    }

    .card-footer-row small {
        opacity: 0.75;
        font-size: 0.65rem;
        letter-spacing: 1px;
        display: block;
        margin-bottom: 3px;
    }

    .card-footer-row span {
        font-weight: 700;
        font-size: 0.9rem;
        letter-spacing: 1px;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

    /* Info Cards */
    .info-card {
        background: var(--soft-blue-bg);
        border-radius: 16px;
        padding: 20px;
        border: 1px solid #d1e3ff;
        transition: all 0.3s ease;
    }

    .info-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 51, 153, 0.1);
    }

    .info-card-icon {
        width: 50px;
        height: 50px;
        background: white;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-blue);
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .info-card h6 {
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 5px;
        font-size: 0.85rem;
    }

    .info-card p {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin: 0;
    }

    /* Card Actions */
    .card-action-btn {
        background: var(--primary-blue);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 14px 24px;
        font-weight: 700;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .card-action-btn:hover {
        background: var(--dark-blue);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 51, 153, 0.3);
    }

    .card-action-btn-outline {
        background: white;
        color: var(--primary-blue);
        border: 2px solid var(--primary-blue);
        border-radius: 12px;
        padding: 14px 24px;
        font-weight: 700;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .card-action-btn-outline:hover {
        background: var(--soft-blue-bg);
        color: var(--primary-blue);
    }

    /* Status Badge */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #d4edda;
        color: #28a745;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 700;
    }

    .status-dot {
        width: 8px;
        height: 8px;
        background: #28a745;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .page-content { padding-top: 60px; }
        .card-showcase-container { padding: 25px 20px; border-radius: 16px; }
        .premium-card { padding: 20px; min-height: 190px; }
        .card-number-display { font-size: 1.15rem; letter-spacing: 2px; }
        .card-chip-gold { width: 38px; height: 28px; }
        .info-card { padding: 16px; }
        .info-card-icon { width: 42px; height: 42px; font-size: 1.2rem; }
    }

    @media (max-width: 576px) {
        .card-showcase-container { padding: 20px 15px; }
        .premium-card { padding: 16px; min-height: 170px; }
        .card-number-display { font-size: 1rem; letter-spacing: 2px; margin: 15px 0; }
        .card-footer-row span { font-size: 0.8rem; }
    }

    h1, h2, h3, h4, h5, h6, p, span, div, a, label {
        font-weight: 600 !important;
    }

    .fw-bold, .fw-700, .fw-800 {
        font-weight: 800 !important;
    }
</style>
</head>

<body data-sidebar="colored">
    <div id="layout-wrapper">
        <div class="main-content">
            <div class="page-content">
                <div class="container-fluid"> <br> 
                    
                    <!-- Page Header -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h2 class="mb-0 fw-800 text-dark">My Card</h2>
                            <p class="text-muted mb-0" style="font-size: 0.9rem;">Manage your virtual debit card</p>
                        </div>
                    </div>
                    
                    <!-- Main Card Section -->
                    <div class="row justify-content-center">
                        <div class="col-12">
                            <div class="card-showcase-container">
                                <div class="row g-4">
                                    
                                    <!-- Card Display -->
                                    <div class="col-lg-6">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h5 class="fw-bold text-dark mb-0">Virtual Card</h5>
                                            <span class="status-badge">
                                                <span class="status-dot"></span>
                                                Active
                                            </span>
                                        </div>
                                        
                                        <div class="premium-card" id="interactive-card">
                                            <div class="card-inner-glow"></div>
                                            
                                            <div class="card-header-row">
                                                <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" 
                                                     height="20" 
                                                     style="filter: brightness(0) invert(1); opacity: 0.9;" 
                                                     alt="Visa">
                                                <i class="bx bx-wifi fs-3" style="transform: rotate(90deg); opacity: 0.8;"></i>
                                            </div>
                                            
                                            <div class="card-chip-gold"></div>
                                            
                                            <div class="card-number-display">
                                                <?php echo $fullCardNumber_formatted; ?>
                                            </div>
                                            
                                            <div class="card-footer-row">
                                                <div>
                                                    <small>CARD HOLDER</small>
                                                    <span class="d-block text-uppercase">
                                                        <?php echo htmlspecialchars($customerName); ?>
                                                    </span>
                                                </div>
                                                <div class="text-end">
                                                    <small>EXPIRES</small>
                                                    <span class="d-block">
                                                        <?php echo htmlspecialchars($validThru); ?>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Card Actions -->
                                        <!--<div class="d-flex gap-2 mt-4">-->
                                        <!--    <button class="card-action-btn flex-fill">-->
                                        <!--        <i class="bx bx-lock"></i>-->
                                        <!--        Lock Card-->
                                        <!--    </button>-->
                                        <!--    <button class="card-action-btn-outline flex-fill">-->
                                        <!--        <i class="bx bx-cog"></i>-->
                                        <!--        Settings-->
                                        <!--    </button>-->
                                        <!--</div>-->
                                    </div>
                                    
                                    <!-- Card Info -->
                                    <div class="col-lg-6">
                                        <h5 class="fw-bold text-dark mb-3">Card Details</h5>
                                        
                                        <div class="row g-3">
                                            <div class="col-sm-6">
                                                <div class="info-card">
                                                    <div class="info-card-icon">
                                                        <i class="bx bx-credit-card"></i>
                                                    </div>
                                                    <h6>Card Type</h6>
                                                    <p>Visa Platinum</p>
                                                </div>
                                            </div>
                                            
                                            <div class="col-sm-6">
                                                <div class="info-card">
                                                    <div class="info-card-icon">
                                                        <i class="bx bx-dollar"></i>
                                                    </div>
                                                    <h6>Currency</h6>
                                                    <p>USD ($)</p>
                                                </div>
                                            </div>
                                            
                                            <div class="col-sm-6">
                                                <div class="info-card">
                                                    <div class="info-card-icon">
                                                        <i class="bx bx-shield"></i>
                                                    </div>
                                                    <h6>Security</h6>
                                                    <p>3D Secure Enabled</p>
                                                </div>
                                            </div>
                                            
                                            <div class="col-sm-6">
                                                <div class="info-card">
                                                    <div class="info-card-icon">
                                                        <i class="bx bx-world"></i>
                                                    </div>
                                                    <h6>Usage</h6>
                                                    <p>Global Transactions</p>
                                                </div>
                                            </div>
                                            
                                            <!--<div class="col-12">-->
                                            <!--    <div class="info-card">-->
                                            <!--        <div class="d-flex align-items-center gap-3">-->
                                            <!--            <div class="info-card-icon mb-0">-->
                                            <!--                <i class="bx bx-info-circle"></i>-->
                                            <!--            </div>-->
                                            <!--            <div>-->
                                            <!--                <h6 class="mb-1">Card Number</h6>-->
                                            <!--                <p class="mb-0" style="font-family: 'Courier New', monospace; font-size: 1rem; font-weight: 700; color: var(--text-main);">-->
                                            <!--                    <?php echo $fullCardNumber_formatted; ?>-->
                                            <!--                </p>-->
                                            <!--            </div>-->
                                            <!--        </div>-->
                                            <!--    </div>-->
                                            <!--</div>-->
                                            
                                            <!--<div class="col-12">-->
                                            <!--    <div class="info-card">-->
                                            <!--        <div class="d-flex align-items-center gap-3">-->
                                            <!--            <div class="info-card-icon mb-0">-->
                                            <!--                <i class="bx bx-lock-alt"></i>-->
                                            <!--            </div>-->
                                            <!--            <div class="flex-grow-1">-->
                                            <!--                <h6 class="mb-1">CVV Security Code</h6>-->
                                            <!--                <p class="mb-0" style="font-size: 1rem; font-weight: 700; color: var(--text-main);">-->
                                            <!--                    <?php echo htmlspecialchars($cvv); ?>-->
                                            <!--                </p>-->
                                            <!--            </div>-->
                                            <!--            <button class="btn btn-sm btn-light" onclick="alert('CVV: <?php echo htmlspecialchars($cvv); ?>')">-->
                                            <!--                <i class="bx bx-show"></i>-->
                                            <!--            </button>-->
                                            <!--        </div>-->
                                            <!--    </div>-->
                                            <!--</div>-->
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>

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

    <script src="assets/libs/jquery/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/simplebar/simplebar.min.js"></script>
    <script src="assets/libs/node-waves/waves.min.js"></script>
    <script src="assets/js/app.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const card = document.getElementById('interactive-card');
            if (!card || window.innerWidth < 992) return;

            // 3D Tilt Effect on Mouse Move (Desktop Only)
            card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                const centerX = rect.width / 2;
                const centerY = rect.height / 2;
                const rotateX = ((y - centerY) / centerY) * -8; 
                const rotateY = ((x - centerX) / centerX) * 8;  
                
                card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
            });

            card.addEventListener('mouseleave', () => {
                card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)';
            });
        });
    </script>
</body>
</html>