checkout.php

<?php
require_once 'includes/config.php';
require_once 'includes/db.php';
require_once 'includes/functions.php';

// Check login BEFORE any output
if (!is_logged_in()) {
    redirect(SITE_URL . '/?login=required&redirect=' . urlencode(SITE_URL . '/checkout.php'));
}

// Prevent admin from accessing checkout
if (is_admin()) {
    $_SESSION['error_message'] = 'Admin tidak dapat melakukan checkout. Fitur ini hanya untuk customer.';
    header('Location: ' . SITE_URL . '/index.php');
    exit;
}

// Handle direct buy (beli langsung)
$direct_buy_product = null;
if (isset($_GET['direct_buy']) && !empty($_GET['direct_buy'])) {
    $product_id = intval($_GET['direct_buy']);
    $stmt = $pdo->prepare("SELECT * FROM products WHERE id = ?");
    $stmt->execute([$product_id]);
    $direct_buy_product = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($direct_buy_product) {
        // Prevent Roblox products from checkout
        if ($direct_buy_product['game_category'] === 'roblox') {
            $_SESSION['error_message'] = 'Roblox items cannot be purchased through this system. Please view on Roblox catalog.';
            redirect(SITE_URL . '/product.php?slug=' . $direct_buy_product['slug']);
        }
        
        // Create temporary cart for direct buy
        $cart = [$product_id => 1];
        $products_by_id = [$product_id => $direct_buy_product];
        $total = $direct_buy_product['price'];
    } else {
        redirect(SITE_URL . '/products.php');
    }
} else {
    // Normal cart checkout
    $cart = get_cart();

    // Check cart BEFORE any output
    if (empty($cart)) {
        redirect(SITE_URL . '/cart.php');
    }

    // Get cart items
    $ids = array_keys($cart);
    $placeholders = str_repeat('?,', count($ids) - 1) . '?';
    $stmt = $pdo->prepare("SELECT * FROM products WHERE id IN ($placeholders)");
    $stmt->execute($ids);
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);

    // Convert to associative array with id as key
    $products_by_id = [];
    $has_sold_items = false;
    $has_roblox_items = false;
    
    foreach ($products as $product) {
        $products_by_id[$product['id']] = $product;
        if ($product['is_sold']) {
            $has_sold_items = true;
        }
        if ($product['game_category'] === 'roblox') {
            $has_roblox_items = true;
        }
    }
    
    // Redirect to cart if any item is sold
    if ($has_sold_items) {
        $_SESSION['error_message'] = 'Some items in your cart have been sold. Please remove them before checkout.';
        redirect(SITE_URL . '/cart.php');
    }
    
    // Redirect if Roblox items in cart
    if ($has_roblox_items) {
        $_SESSION['error_message'] = 'Roblox items cannot be purchased through this system. Please remove them from cart.';
        redirect(SITE_URL . '/cart.php');
    }

    // Calculate total (GTA SA only)
    $total = 0;
    foreach ($cart as $id => $qty) {
        if (isset($products_by_id[$id]) && !$products_by_id[$id]['is_sold']) {
            $total += $products_by_id[$id]['price'];
        }
    }
}

// Payment methods
$payment_methods = [
    'qris' => 'QRIS',
    'dana' => 'DANA',
    'gopay' => 'GoPay',
    'ovo' => 'OVO',
    'paypal' => 'PayPal'
];

// Handle form submission BEFORE any output
$show_payment_modal = false;
$new_order_id = null;
$new_payment_method = null;
$deadline_time = null;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $payment_method = sanitize_input($_POST['payment_method']);
    
    // Check if user already has a pending order for these products
    $product_ids = array_keys($cart);
    $placeholders = str_repeat('?,', count($product_ids) - 1) . '?';
    
    $stmt = $pdo->prepare("
        SELECT o.id, o.payment_deadline 
        FROM orders o
        JOIN order_items oi ON o.id = oi.order_id
        WHERE o.user_id = ? 
        AND o.status = 'pending'
        AND oi.product_id IN ($placeholders)
        AND o.payment_deadline > NOW()
        ORDER BY o.created_at DESC
        LIMIT 1
    ");
    $params = array_merge([$_SESSION['user_id']], $product_ids);
    $stmt->execute($params);
    $existing_order = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($existing_order) {
        // Use existing order
        $order_id = $existing_order['id'];
        $deadline_time = strtotime($existing_order['payment_deadline']);
    } else {
        // Create new order with status 'pending'
        $current_time = time();
        $deadline_time = $current_time + (5 * 60);
        $payment_deadline = date('Y-m-d H:i:s', $deadline_time);
        
        $stmt = $pdo->prepare("INSERT INTO orders (user_id, total_amount, payment_method, status, payment_deadline) VALUES (?, ?, ?, 'pending', ?)");
        $stmt->execute([$_SESSION['user_id'], $total, $payment_method, $payment_deadline]);
        $order_id = $pdo->lastInsertId();
        
        // Add order items
        $stmt = $pdo->prepare("INSERT INTO order_items (order_id, product_id, price, quantity) VALUES (?, ?, ?, 1)");
        foreach ($cart as $product_id => $qty) {
            if (isset($products_by_id[$product_id])) {
                $stmt->execute([$order_id, $product_id, $products_by_id[$product_id]['price']]);
            }
        }
    }
    
    // Clear cart only if not direct buy
    if (!isset($_GET['direct_buy'])) {
        clear_cart();
    }
    
    // Set variables for modal
    $show_payment_modal = true;
    $new_order_id = $order_id;
    $new_payment_method = $payment_methods[$payment_method] ?? 'QRIS';
}

$page_title = 'Checkout';
require_once 'includes/header.php';
?>

<link rel="stylesheet" href="<?php echo SITE_URL; ?>/assets/css/payment-modal.css">

<style>
/* Shake animation for validation error */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.checkout-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.checkout-header {
    text-align: center;
    margin-bottom: 3rem;
}

.checkout-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.checkout-header p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
}

.checkout-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.checkout-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-title svg {
    width: 22px;
    height: 22px;
    color: var(--accent-primary);
}

.order-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.order-item:last-child {
    border-bottom: none;
}

.item-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-tertiary);
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-details {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.item-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.35rem 0;
}

.item-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.item-info .item-category {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.25rem 0;
}

.item-info .item-author {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.item-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.info-box {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: start;
    gap: 0.75rem;
}

.info-box svg {
    width: 20px;
    height: 20px;
    color: var(--color-info);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.info-box p {
    font-size: 0.85rem;
    color: var(--color-info);
    margin: 0;
    line-height: 1.6;
}

.checkout-sidebar {
    position: sticky;
    top: 2rem;
}

.total-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}

.total-row.final {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 2px solid var(--border-color);
}

.total-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.total-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.total-row.final .total-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.total-row.final .total-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Payment Selector */
.payment-selector {
    position: relative;
    width: 100%;
}

.payment-selected {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
}

.payment-selected:hover {
    border-color: var(--accent-primary);
    background: rgba(250, 92, 92, 0.05);
}

.payment-selector.active .payment-selected {
    border-color: var(--accent-primary);
}

.payment-selector.active #dropdownArrow {
    transform: rotate(180deg);
}

.payment-logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.payment-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.payment-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    display: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-height: 300px;
    overflow-y: auto;
}

.payment-selector.active .payment-dropdown {
    display: block;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.payment-option:hover {
    background: rgba(250, 92, 92, 0.1);
}

.payment-option.selected {
    background: rgba(250, 92, 92, 0.15);
}

.payment-option.selected .payment-check {
    display: block !important;
}

.payment-check {
    margin-left: auto;
}

@media (max-width: 968px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }
    
    .checkout-sidebar {
        position: relative;
        top: 0;
    }
}
</style>

<div class="checkout-container">
    <div class="checkout-header">
        <h1>Checkout</h1>
        <p>Complete your purchase</p>
    </div>
    
    <div class="checkout-grid">
        <!-- Main Content -->
        <div class="checkout-main">
            <!-- Order Summary -->
            <div class="checkout-card">
                <h3 class="card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                    </svg>
                    Order Summary
                </h3>
                
                <?php foreach ($cart as $id => $qty): ?>
                    <?php if (isset($products_by_id[$id])): ?>
                        <div class="order-item">
                            <div class="item-image">
                                <?php if (!empty($products_by_id[$id]['image'])): ?>
                                    <img src="<?php echo UPLOAD_URL . htmlspecialchars($products_by_id[$id]['image']); ?>" alt="<?php echo htmlspecialchars($products_by_id[$id]['title']); ?>">
                                <?php else: ?>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 100%; height: 100%; padding: 1rem; color: var(--text-muted);">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                <?php endif; ?>
                            </div>
                            <div class="item-details">
                                <div class="item-info">
                                    <h4><?php echo htmlspecialchars($products_by_id[$id]['title']); ?></h4>
                                    <p class="item-category"><?php echo $products_by_id[$id]['game_category'] === 'gta-sa' ? 'GTA San Andreas' : 'Roblox'; ?></p>
                                    <?php if (!empty($products_by_id[$id]['author'])): ?>
                                        <p class="item-author"><?php echo htmlspecialchars($products_by_id[$id]['author']); ?></p>
                                    <?php endif; ?>
                                </div>
                                <div class="item-price"><?php echo format_price($products_by_id[$id]['price']); ?></div>
                            </div>
                        </div>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
            
            <!-- Payment Method -->
            <div class="checkout-card">
                <h3 class="card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                    </svg>
                    Payment Method
                </h3>
                
                <form id="checkoutForm" method="POST" action="" onsubmit="return validateCheckoutForm()">
                    <input type="hidden" name="payment_method" id="selectedPaymentMethod" value="" required>
                    
                    <div class="payment-selector" id="paymentSelector">
                        <div class="payment-selected" onclick="togglePaymentDropdown()">
                            <div style="display: flex; align-items: center; gap: 1rem;">
                                <div class="payment-logo" id="selectedPaymentLogo">
                                    <svg style="width: 28px; height: 28px; color: var(--text-muted);" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect x="3" y="6" width="18" height="12" rx="2" stroke="currentColor" stroke-width="1.5"/>
                                        <path d="M3 10h18" stroke="currentColor" stroke-width="1.5"/>
                                        <rect x="6" y="13" width="2" height="2" rx="0.5" fill="currentColor"/>
                                        <rect x="10" y="13" width="2" height="2" rx="0.5" fill="currentColor"/>
                                    </svg>
                                </div>
                                <div class="payment-name" id="selectedPaymentName" style="color: var(--text-muted);">Pilih metode pembayaran</div>
                            </div>
                            <svg style="width: 20px; height: 20px; color: var(--text-secondary); transition: transform 0.2s;" id="dropdownArrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </div>
                        
                        <div class="payment-dropdown" id="paymentDropdown">
                            <?php foreach ($payment_methods as $key => $label): ?>
                            <div class="payment-option" data-value="<?php echo $key; ?>" onclick="selectPaymentMethod('<?php echo $key; ?>', '<?php echo $label; ?>')">
                                <div class="payment-logo">
                                    <?php if ($key === 'qris'): ?>
                                        <svg style="width: 28px; height: 28px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect x="3" y="6" width="18" height="12" rx="2" stroke="currentColor" stroke-width="1.5"/>
                                            <path d="M3 10h18" stroke="currentColor" stroke-width="1.5"/>
                                            <rect x="6" y="13" width="2" height="2" rx="0.5" fill="currentColor"/>
                                            <rect x="10" y="13" width="2" height="2" rx="0.5" fill="currentColor"/>
                                        </svg>
                                    <?php elseif ($key === 'dana'): ?>
                                        <svg style="width: 28px; height: 28px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="12" cy="12" r="9" stroke="#118EEA" stroke-width="1.5" fill="#118EEA"/>
                                            <path d="M8 12h8M12 8v8" stroke="white" stroke-width="2" stroke-linecap="round"/>
                                        </svg>
                                    <?php elseif ($key === 'gopay'): ?>
                                        <svg style="width: 28px; height: 28px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="12" cy="12" r="9" stroke="#00AA13" stroke-width="1.5" fill="#00AA13"/>
                                            <path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    <?php elseif ($key === 'ovo'): ?>
                                        <svg style="width: 28px; height: 28px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="12" cy="12" r="9" stroke="#4C3494" stroke-width="1.5" fill="#4C3494"/>
                                            <text x="12" y="16" text-anchor="middle" fill="white" font-size="10" font-weight="bold">O</text>
                                        </svg>
                                    <?php elseif ($key === 'paypal'): ?>
                                        <svg style="width: 28px; height: 28px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8 6h6c2.2 0 4 1.8 4 4s-1.8 4-4 4h-3l-1 6H7l3-14z" stroke="#003087" stroke-width="1.5" fill="#009CDE"/>
                                        </svg>
                                    <?php endif; ?>
                                </div>
                                <div class="payment-name"><?php echo $label; ?></div>
                                <div class="payment-check" style="display: none;">
                                    <svg style="width: 20px; height: 20px; color: var(--color-success);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                    </svg>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    
                    <div class="info-box" style="margin-top: 1.5rem;">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <p>Setelah checkout, Anda memiliki <strong>5 menit</strong> untuk melakukan pembayaran. Order akan otomatis dibatalkan jika melewati batas waktu.</p>
                    </div>
                    
                    <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1.5rem; padding: 1rem; font-size: 1rem; font-weight: 600;">
                        <svg style="width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        Place Order
                    </button>
                </form>
            </div>
        </div>
        
        <!-- Sidebar -->
        <div class="checkout-sidebar">
            <div class="total-card">
                <h3 class="card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                    </svg>
                    Order Total
                </h3>
                
                <div class="total-row">
                    <span class="total-label">Subtotal</span>
                    <span class="total-value"><?php echo format_price($total); ?></span>
                </div>
                
                <div class="total-row final">
                    <span class="total-label">Total</span>
                    <span class="total-value"><?php echo format_price($total); ?></span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Payment QR Code Modal -->
<?php if ($show_payment_modal): ?>
<div class="payment-modal-overlay active" id="paymentQRModal">
    <div class="payment-modal">
        <div class="payment-modal-header">
            <div class="header-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
                </svg>
            </div>
            <h3>Scan QR Code</h3>
            <p class="subtitle">Scan this code to complete payment</p>
        </div>
        
        <div class="payment-modal-body">
            <!-- QR Code Section -->
            <div class="qr-section">
                <div class="qr-code-container">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
                    </svg>
                </div>
                
                <p class="code-hint">or enter the code manually</p>
                
                <div class="code-display">
                    <span class="code-text" id="paymentCode">HLA8G4L1B9ZX4</span>
                    <button type="button" class="copy-btn" onclick="copyPaymentCode()" title="Copy code">
                        <svg style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Info Cards -->
            <div class="info-cards">
                <div class="info-card-compact timer">
                    <div class="label">Waktu Tersisa</div>
                    <div class="value" id="countdown">05:00</div>
                </div>
                <div class="info-card-compact amount">
                    <div class="label">Total Pembayaran</div>
                    <div class="value"><?php echo format_price($total); ?></div>
                </div>
            </div>
            
            <!-- Payment Method -->
            <div class="payment-method-badge">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                    </svg>
                </div>
                <div class="text">
                    <div class="label">Metode Pembayaran</div>
                    <div class="method-name"><?php echo htmlspecialchars($new_payment_method); ?></div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="modal-actions">
                <button type="button" class="btn btn-primary" onclick="proceedToOrders('<?php echo $new_order_id; ?>')">
                    Lanjut ke My Orders
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                </button>
                <button type="button" class="btn btn-outline" onclick="closePaymentModal()">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Kembali
                </button>
            </div>
        </div>
    </div>
</div>

<script>
const orderId = '<?php echo $new_order_id; ?>';
const deadlineTimestamp = <?php echo $deadline_time; ?>; // Unix timestamp
let countdownInterval;

function getTimeLeft() {
    const currentTime = Math.floor(Date.now() / 1000); // Current time in seconds
    const remaining = deadlineTimestamp - currentTime;
    return remaining > 0 ? remaining : 0;
}

function startCountdown() {
    let timeLeft = getTimeLeft();
    updateCountdownDisplay(timeLeft);
    
    if (timeLeft <= 0) {
        handleTimeout();
        return;
    }
    
    countdownInterval = setInterval(function() {
        timeLeft = getTimeLeft();
        updateCountdownDisplay(timeLeft);
        
        if (timeLeft <= 0) {
            clearInterval(countdownInterval);
            handleTimeout();
        }
    }, 1000);
}

function updateCountdownDisplay(seconds) {
    const minutes = Math.floor(seconds / 60);
    const secs = seconds % 60;
    const display = String(minutes).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
    document.getElementById('countdown').textContent = display;
    
    if (seconds < 60) {
        document.getElementById('countdown').style.color = 'var(--color-error)';
    }
}

function handleTimeout() {
    if (typeof showToast === 'function') {
        showToast('Waktu habis! Order dibatalkan.', 'Warning', 'warning');
    }
    
    setTimeout(() => {
        window.location.href = '<?php echo SITE_URL; ?>/my-orders.php';
    }, 2000);
}

function proceedToOrders(orderId) {
    clearInterval(countdownInterval);
    
    // Close QR modal
    document.getElementById('paymentQRModal').classList.remove('active');
    document.body.style.overflow = '';
    
    // Open order detail modal
    openOrderDetailModal(orderId);
}

function closePaymentModal() {
    clearInterval(countdownInterval);
    
    // Show notification
    if (typeof showToast === 'function') {
        showToast('Order #' + orderId + ' telah dibuat dengan status pending. Silakan upload bukti pembayaran dalam waktu yang ditentukan.', 'Info', 'info');
    }
    
    setTimeout(() => {
        window.location.href = '<?php echo SITE_URL; ?>/my-orders.php';
    }, 1500);
}

function copyPaymentCode() {
    const code = document.getElementById('paymentCode').textContent;
    navigator.clipboard.writeText(code).then(() => {
        if (typeof showToast === 'function') {
            showToast('Kode berhasil disalin!', 'Success', 'success');
        }
    });
}

// Start countdown when modal is shown
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('paymentQRModal');
    if (modal && modal.classList.contains('active')) {
        document.body.style.overflow = 'hidden';
        startCountdown();
    }
});
</script>
<?php endif; ?>

<script>
// Payment selector functions
function togglePaymentDropdown() {
    const selector = document.getElementById('paymentSelector');
    selector.classList.toggle('active');
}

function selectPaymentMethod(value, label) {
    document.getElementById('selectedPaymentMethod').value = value;
    const nameElement = document.getElementById('selectedPaymentName');
    nameElement.textContent = label;
    nameElement.style.color = 'var(--text-primary)'; // Change color to show it's selected
    
    const logoContainer = document.getElementById('selectedPaymentLogo');
    const logos = {
        'qris': '<svg style="width: 28px; height: 28px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="6" width="18" height="12" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3 10h18" stroke="currentColor" stroke-width="1.5"/><rect x="6" y="13" width="2" height="2" rx="0.5" fill="currentColor"/><rect x="10" y="13" width="2" height="2" rx="0.5" fill="currentColor"/></svg>',
        'dana': '<svg style="width: 28px; height: 28px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="9" stroke="#118EEA" stroke-width="1.5" fill="#118EEA"/><path d="M8 12h8M12 8v8" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>',
        'gopay': '<svg style="width: 28px; height: 28px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="9" stroke="#00AA13" stroke-width="1.5" fill="#00AA13"/><path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
        'ovo': '<svg style="width: 28px; height: 28px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="9" stroke="#4C3494" stroke-width="1.5" fill="#4C3494"/><text x="12" y="16" text-anchor="middle" fill="white" font-size="10" font-weight="bold">O</text></svg>',
        'paypal': '<svg style="width: 28px; height: 28px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 6h6c2.2 0 4 1.8 4 4s-1.8 4-4 4h-3l-1 6H7l3-14z" stroke="#003087" stroke-width="1.5" fill="#009CDE"/></svg>'
    };
    logoContainer.innerHTML = logos[value] || logos['qris'];
    
    document.querySelectorAll('.payment-option').forEach(opt => {
        opt.classList.remove('selected');
    });
    document.querySelector(`.payment-option[data-value="${value}"]`).classList.add('selected');
    
    document.getElementById('paymentSelector').classList.remove('active');
}

// Validate checkout form
function validateCheckoutForm() {
    const paymentMethod = document.getElementById('selectedPaymentMethod').value;
    
    if (!paymentMethod || paymentMethod === '') {
        // Show toast notification
        if (typeof showToast === 'function') {
            showToast('Silakan pilih metode pembayaran terlebih dahulu!', 'Peringatan', 'warning');
        } else {
            alert('Silakan pilih metode pembayaran terlebih dahulu!');
        }
        
        // Highlight payment selector
        const selector = document.getElementById('paymentSelector');
        selector.style.border = '2px solid var(--color-error)';
        selector.style.animation = 'shake 0.5s';
        
        setTimeout(() => {
            selector.style.border = '';
            selector.style.animation = '';
        }, 1000);
        
        return false;
    }
    
    return true;
}

// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
    const selector = document.getElementById('paymentSelector');
    if (selector && !selector.contains(e.target)) {
        selector.classList.remove('active');
    }
});

// Ensure dropdown is closed on page load
document.addEventListener('DOMContentLoaded', function() {
    const selector = document.getElementById('paymentSelector');
    if (selector) {
        selector.classList.remove('active');
    }
});
</script>

<?php require_once 'includes/footer.php'; ?>