Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/.cursor-server/data/User/History/-5e07f46e/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<?php
session_start();

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header('Location: /auth/login.php');
    exit;
}

// Handle AJAX requests
$is_ajax = isset($_GET['ajax']) && $_GET['ajax'] == '1';

require_once 'config/database.php';

$user = getUserById($_SESSION['user_id']);
$user_name = $user['name'] ?? 'User';
$credits = $_SESSION['credits'] ?? 0;

// Initialize cart if not exists
if (!isset($_SESSION['credit_cart'])) {
    $_SESSION['credit_cart'] = [];
}

// Set page variables for header
$page_title = 'Refill Credits - SoundStudioPro';
$page_description = 'Purchase credits to continue creating amazing AI-generated music.';
$current_page = 'credits';

// Include header only for full page loads
if (!$is_ajax) {
    include 'includes/header.php';
} else {
    // For AJAX requests, wrap content in the proper container structure
    echo '<div class="container" id="pageContainer">';
}
?>

<style>
    /* Credits page specific styles */
    .credits-hero {
        padding: 8rem 0 6rem;
        text-align: center;
        color: white;
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
        position: relative;
        overflow: hidden;
        margin-bottom: 4rem;
        margin-top: 0;
    }
    
    .credits-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(102,126,234,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        opacity: 0.3;
    }
    
    .credits-hero-content {
        max-width: 90rem;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    
    .credits-badge {
        display: inline-block;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
        color: #667eea;
        padding: 1.2rem 2.4rem;
        border-radius: 50px;
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 3rem;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(102, 126, 234, 0.3);
    }
    
    .credits-title {
        font-size: 4rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 1.5rem;
        background: linear-gradient(135deg, #ffffff, #667eea);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .credits-subtitle {
        font-size: 1.6rem;
        color: #a0aec0;
        margin-bottom: 3rem;
        max-width: 50rem;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.5;
    }
    
    .credits-packages {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 3rem;
        max-width: 120rem;
        margin: 0 auto;
        padding: 0 2rem;
    }
    
    .credit-package {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
        border: 2px solid;
        border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
        border-radius: 20px;
        padding: 3rem 2.5rem;
        text-align: center;
        backdrop-filter: blur(25px);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .credit-package::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(102,126,234,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        opacity: 0.3;
        pointer-events: none;
    }
    
    .credit-package:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
    }
    
    .credit-package.featured {
        border-image: linear-gradient(135deg, #667eea, #764ba2, #667eea) 1;
        transform: scale(1.05);
    }
    
    .credit-package.featured::after {
        content: 'Most Popular';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        padding: 0.5rem 1.5rem;
        border-radius: 20px;
        font-size: 1.2rem;
        font-weight: 600;
    }
    
    .package-icon {
        font-size: 4rem;
        color: #667eea;
        margin-bottom: 2rem;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .package-name {
        font-size: 2.2rem;
        font-weight: 700;
        color: white;
        margin-bottom: 0.8rem;
    }
    
    .package-credits {
        font-size: 2.6rem;
        font-weight: 800;
        color: #667eea;
        margin-bottom: 0.8rem;
    }
    
    .package-price {
        font-size: 2.8rem;
        font-weight: 700;
        color: white;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    .original-price {
        font-size: 1.8rem;
        color: #ff6b6b;
        text-decoration: line-through;
        font-weight: 400;
        opacity: 0.8;
    }
    
    .current-price {
        font-size: 2.8rem;
        font-weight: 800;
        color: #667eea;
    }
    
    .per-credit {
        font-size: 1.4rem;
        color: #a0aec0;
        font-weight: 500;
    }
    
    .special-badge {
        background: linear-gradient(135deg, #ff6b6b, #ee5a52);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 1.2rem;
        display: inline-block;
        box-shadow: 0 3px 10px rgba(255, 107, 107, 0.2);
        animation: pulse 3s infinite;
        letter-spacing: 0.2px;
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    .package-badge {
        position: absolute;
        top: -10px;
        right: 15px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 500;
        z-index: 3;
        box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
        letter-spacing: 0.2px;
    }
    
    .package-features {
        list-style: none;
        padding: 0;
        margin-bottom: 3rem;
    }
    
    .package-features li {
        color: #a0aec0;
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-align: center;
    }
    
    .package-features li.crossed-out {
        text-decoration: line-through;
        color: #718096;
        opacity: 0.6;
    }
    
    .purchase-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border: none;
        color: white;
        padding: 1rem 2.5rem;
        border-radius: 10px;
        font-size: 1.5rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        position: relative;
        z-index: 2;
        margin-bottom: 0.8rem;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
        letter-spacing: 0.3px;
    }
    
    .purchase-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
        background: linear-gradient(135deg, #5a67d8, #6b46c1);
    }
    
    .add-to-cart-btn {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(102, 126, 234, 0.3);
        color: #667eea;
        padding: 0.8rem 2rem;
        border-radius: 10px;
        font-size: 1.3rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        position: relative;
        z-index: 2;
    }
    
    .add-to-cart-btn:hover {
        background: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.5);
        color: #5a67d8;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    }
    
    .current-credits {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
        border: 1px solid rgba(102, 126, 234, 0.3);
        border-radius: 16px;
        padding: 2rem;
        text-align: center;
        margin-bottom: 4rem;
        max-width: 60rem;
        margin-left: auto;
        margin-right: auto;
    }
    
    .current-credits h3 {
        color: white;
        font-size: 2.4rem;
        margin-bottom: 1rem;
    }
    
    .current-credits .credits-display {
        font-size: 3.2rem;
        font-weight: 900;
        color: #667eea;
        margin-bottom: 1rem;
    }
    
    .current-credits p {
        color: #a0aec0;
        font-size: 1.6rem;
    }
    

    
    .cart-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }
    
    .cart-content {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
        border: 2px solid;
        border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
        border-radius: 20px;
        padding: 3rem;
        max-width: 600px;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        backdrop-filter: blur(25px);
    }
    
    .cart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .cart-title {
        color: white;
        font-size: 2.4rem;
        font-weight: 700;
    }
    
    .close-cart {
        background: none;
        border: none;
        color: #a0aec0;
        font-size: 2rem;
        cursor: pointer;
        padding: 0.5rem;
    }
    
    .cart-items {
        margin-bottom: 2rem;
    }
    
    .cart-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        margin-bottom: 1rem;
    }
    
    .cart-item-info {
        color: white;
    }
    
    .cart-item-name {
        font-weight: 600;
        font-size: 1.6rem;
    }
    
    .cart-item-details {
        color: #a0aec0;
        font-size: 1.2rem;
    }
    
    .cart-item-price {
        color: #667eea;
        font-weight: 700;
        font-size: 1.6rem;
    }
    
    .cart-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2rem;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 12px;
        margin-bottom: 2rem;
    }
    
    .cart-total-label {
        color: white;
        font-size: 1.8rem;
        font-weight: 600;
    }
    
    .cart-total-amount {
        color: #667eea;
        font-size: 2.4rem;
        font-weight: 700;
    }
    
    .cart-actions {
        display: flex;
        gap: 1rem;
    }
    
    .btn-clear-cart {
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid #ff6b6b;
        color: #ff6b6b;
        padding: 1rem 2rem;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn-clear-cart:hover {
        background: #ff6b6b;
        color: white;
    }
    
    .btn-checkout {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border: none;
        color: white;
        padding: 1rem 2rem;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        flex: 1;
    }
    
    .btn-checkout:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }
    
    @media (max-width: 768px) {
        .credits-title {
            font-size: 4rem;
        }
        
        .credits-subtitle {
            font-size: 1.6rem;
        }
        
        .credits-packages {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        
        .credit-package {
            padding: 2rem 1.5rem;
        }
        
        .credit-package.featured {
            transform: none;
        }
        
        .cart-content {
            padding: 2rem;
            margin: 1rem;
        }
    }
</style>

<!-- Hero Section -->
<section class="credits-hero">
    <div class="credits-hero-content">
        <div class="credits-badge">
            <i class="fas fa-coins"></i>
            Extra Credits
        </div>
        <h1 class="credits-title">Buy Extra Credits</h1>
        <p class="credits-subtitle">
            Need more tracks than your subscription allows? Purchase extra credits that never expire. 
            Perfect for supplementing your monthly plan or for one-time projects.
        </p>
    </div>
</section>

<!-- Current Credits Display -->
    <div class="current-credits">
        <h3>Your Current Credits</h3>
        <div class="credits-display">
            <i class="fas fa-coins"></i>
            <?php echo $credits; ?> Credits
        </div>
        <p>Purchase extra credits to supplement your subscription or use for one-time projects.</p>
        <div style="margin-top: 1rem; padding: 1rem; background: rgba(102, 126, 234, 0.1); border-radius: 8px; border: 1px solid rgba(102, 126, 234, 0.3);">
            <p style="color: #667eea; font-size: 1.2rem; margin: 0; text-align: center;">
                <i class="fas fa-info-circle"></i>
                <strong>Credits Never Expire:</strong> Use them whenever you need, works alongside your subscription
            </p>
        </div>
        <div style="margin-top: 1rem; text-align: center;">
            <a href="/pricing.php" style="color: #667eea; text-decoration: none; font-size: 1.1rem;">
                <i class="fas fa-sync-alt"></i> Prefer a monthly subscription? View plans →
            </a>
        </div>
    </div>

<!-- Credit Packages -->
<div class="credits-packages">
    <!-- Free Package -->
    <div class="credit-package">
        <div class="package-icon">
            <i class="fas fa-gift"></i>
        </div>
        <h3 class="package-name">Free</h3>
        <div class="package-credits">5 Credits</div>
        <div class="package-price">
            <span class="current-price">$0</span>
            <span class="per-credit">Free forever</span>
        </div>
        <div class="free-badge">Free Plan</div>
                            <ul class="package-features">
                        <li>5 music tracks</li>
                        <li>Basic AI models</li>
                        <li>Standard generation speed</li>
                        <li>Community access</li>
                        <li>Personal use only</li>
                        <li>Basic support</li>
                        <li>Standard quality audio</li>
                        <li>No commercial rights</li>
                    </ul>
        <button class="purchase-btn" onclick="window.location.href='/auth/register.php'">
            <i class="fas fa-user-plus"></i>
            Sign Up Free
        </button>
    </div>
    
    <!-- Starter Package -->
    <div class="credit-package">
        <div class="package-icon">
            <i class="fas fa-star"></i>
        </div>
        <h3 class="package-name">Starter</h3>
        <div class="package-credits">30 Credits</div>
        <div class="package-price">
            <span class="original-price">$29.99</span>
            <span class="current-price">$19.99</span>
            <span class="per-credit">$0.67 per track</span>
        </div>
        <div class="special-badge">Special Offer</div>
        <ul class="package-features">
            <li>30 music tracks</li>
            <li>Advanced AI models</li>
            <li>High-speed generation</li>
            <li>Priority queue access</li>
            <li>Ad-free experience</li>
            <li>Commercial use license (30 days)</li>
            <li>Unlimited downloads</li>
            <li>30-day subscription period</li>
        </ul>
        <button class="purchase-btn" onclick="purchaseCredits('starter', 30, 19.99)">
            <i class="fas fa-shopping-cart"></i>
            Purchase Now
        </button>
        <button class="add-to-cart-btn" onclick="addToCart('starter', 30, 19.99)">
            <i class="fas fa-plus"></i>
            Add to Cart
        </button>
    </div>
    
    <!-- Popular Package -->
    <div class="credit-package featured">
        <div class="package-badge">Most Popular</div>
        <div class="package-icon">
            <i class="fas fa-fire"></i>
        </div>
        <h3 class="package-name">Pro</h3>
        <div class="package-credits">200 Credits</div>
        <div class="package-price">
            <span class="original-price">$79</span>
            <span class="current-price">$59</span>
            <span class="per-credit">$0.30 per track</span>
        </div>
        <div class="special-badge">Special Offer</div>
        <ul class="package-features">
            <li>200 music tracks</li>
            <li>Advanced AI models</li>
            <li>High-speed generation</li>
            <li>Priority queue access</li>
            <li>Ad-free experience</li>
            <li>Commercial use license (30 days)</li>
            <li>Unlimited downloads</li>
            <li>Private mode generation</li>
            <li>Unlimited storage</li>
            <li>Song length extension</li>
            <li>30-day subscription period</li>
        </ul>
        <button class="purchase-btn" onclick="purchaseCredits('pro', 200, 59)">
            <i class="fas fa-shopping-cart"></i>
            Purchase Now
        </button>
        <button class="add-to-cart-btn" onclick="addToCart('pro', 200, 59)">
            <i class="fas fa-plus"></i>
            Add to Cart
        </button>
    </div>
    
    <!-- Premium Package -->
    <div class="credit-package">
        <div class="package-icon">
            <i class="fas fa-crown"></i>
        </div>
        <h3 class="package-name">Premium</h3>
        <div class="package-credits">500 Credits</div>
        <div class="package-price">
            <span class="original-price">$179</span>
            <span class="current-price">$129</span>
            <span class="per-credit">$0.26 per track</span>
        </div>
        <div class="special-badge">Special Offer</div>
        <ul class="package-features">
            <li>500 music tracks</li>
            <li>Advanced AI models</li>
            <li>High-speed generation</li>
            <li>Priority queue access</li>
            <li>Ad-free experience</li>
            <li>Commercial use license (30 days)</li>
            <li>Unlimited downloads</li>
            <li>Private mode generation</li>
            <li>Unlimited storage</li>
            <li>Song length extension</li>
            <li>30-day subscription period</li>
        </ul>
        <button class="purchase-btn" onclick="purchaseCredits('premium', 500, 129)">
            <i class="fas fa-shopping-cart"></i>
            Purchase Now
        </button>
        <button class="add-to-cart-btn" onclick="addToCart('premium', 500, 129)">
            <i class="fas fa-plus"></i>
            Add to Cart
        </button>
    </div>
</div>



<!-- Cart Modal -->
<div class="cart-modal" id="cartModal">
    <div class="cart-content">
        <div class="cart-header">
            <h2 class="cart-title">Shopping Cart</h2>
            <button class="close-cart" onclick="hideCart()">&times;</button>
        </div>
        
        <div class="cart-items" id="cartItems">
            <!-- Cart items will be populated here -->
        </div>
        
        <div class="cart-total">
            <span class="cart-total-label">Total:</span>
            <span class="cart-total-amount" id="cartTotal">$0.00</span>
        </div>
        
        <div class="cart-actions">
            <button class="btn-clear-cart" onclick="clearCart()">
                <i class="fas fa-trash"></i>
                Clear Cart
            </button>
            <button class="btn-checkout" onclick="checkoutCart()">
                <i class="fas fa-credit-card"></i>
                Checkout
            </button>
        </div>
    </div>
</div>

<script src="https://js.stripe.com/v3/"></script>
<script>
    // Initialize Stripe
    const stripe = Stripe('pk_live_51Rn8TtD0zXLMB4gHMCZ5OMunyo0YtN6hBR30BoXFEiQxPG9I6U2tko6Axxwl0yJS21DCCykhC9PxAMdZoEfwJI0p00KlrZUR3w');
    
    // Cart functionality
    let cart = [];
    
    // Load cart from session storage
    function loadCart() {
        const savedCart = sessionStorage.getItem('creditCart');
        if (savedCart) {
            cart = JSON.parse(savedCart);
            updateCartDisplay();
        }
    }
    
    // Save cart to session storage
    function saveCart() {
        sessionStorage.setItem('creditCart', JSON.stringify(cart));
    }
    
    // Add item to cart
    function addToCart(package, credits, price) {
        console.log('🎯 Adding credit package to cart:', { package, credits, price });
        
        // Show loading state
        const button = event.target;
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Adding...';
        button.disabled = true;
        
        fetch('/add_to_cart.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                type: 'credit',
                package: package,
                credits: credits,
                price: price,
                quantity: 1
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Show success notification
                if (typeof window.showNotification === 'function') {
                    window.showNotification(`${credits} credits added to cart! 🎵`, 'success');
                } else {
                    showSuccessMessage(`${credits} credits added to cart!`);
                }
                
                // Update cart count in header if available
                if (typeof updateCartCount === 'function') {
                    updateCartCount();
                } else {
                    // Fallback: reload page to update cart count
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                }
                
            } else {
                throw new Error(data.error || 'Failed to add credits to cart');
            }
        })
        .catch(error => {
            console.error('🎯 Error adding credits to cart:', error);
            
            // Show error notification
            if (typeof window.showNotification === 'function') {
                window.showNotification('Failed to add credits to cart: ' + error.message, 'error');
            } else {
                showSuccessMessage('Failed to add credits to cart: ' + error.message);
            }
        })
        .finally(() => {
            // Reset button state
            button.innerHTML = originalText;
            button.disabled = false;
        });
    }
    
    // Update cart display
    function updateCartDisplay() {
        const cartCount = document.getElementById('cart-count');
        const cartItems = document.getElementById('cartItems');
        const cartTotal = document.getElementById('cartTotal');
        
        // Update cart count
        const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
        cartCount.textContent = totalItems;
        
        // Update cart items
        cartItems.innerHTML = '';
        let total = 0;
        
        cart.forEach(item => {
            const itemTotal = item.price * item.quantity;
            total += itemTotal;
            
            cartItems.innerHTML += `
                <div class="cart-item">
                    <div class="cart-item-info">
                        <div class="cart-item-name">${item.package.charAt(0).toUpperCase() + item.package.slice(1)} Package</div>
                        <div class="cart-item-details">${item.credits} credits × ${item.quantity}</div>
                    </div>
                    <div class="cart-item-price">$${itemTotal.toFixed(2)}</div>
                </div>
            `;
        });
        
        cartTotal.textContent = `$${total.toFixed(2)}`;
    }
    
    // Show cart modal
    function showCart() {
        document.getElementById('cartModal').style.display = 'flex';
    }
    
    // Hide cart modal
    function hideCart() {
        document.getElementById('cartModal').style.display = 'none';
    }
    
    // Clear cart
    function clearCart() {
        cart = [];
        saveCart();
        updateCartDisplay();
        hideCart();
        showSuccessMessage('Cart cleared!');
    }
    
    // Checkout cart - redirect to checkout page
    function checkoutCart() {
        if (cart.length === 0) {
            alert('Your cart is empty!');
            return;
        }
        
        // Save cart to session and redirect to checkout page
        fetch('save_cart.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ cart: cart })
        }).then(() => {
            // Use AJAX navigation to preserve global player
        if (window.ajaxNavigation) {
            window.ajaxNavigation.navigateToPage('/checkout.php');
        } else {
            window.location.href = '/checkout.php';
        }
        });
    }
    
    // Purchase credits function - redirect to checkout page
    function purchaseCredits(package, credits, price) {
        // Add to existing cart instead of replacing it
        fetch('add_to_cart.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                type: 'credit',
                package: package,
                credits: credits,
                price: price,
                quantity: 1
            })
        }).then(() => {
            // Use AJAX navigation to preserve global player
        if (window.ajaxNavigation) {
            window.ajaxNavigation.navigateToPage('/checkout.php');
        } else {
            window.location.href = '/checkout.php';
        }
        });
    }
    
    // Confirm payment and update credits
    async function confirmPayment(paymentIntentId) {
        try {
            const response = await fetch('process_credit_payment.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    action: 'confirm_payment',
                    payment_intent_id: paymentIntentId
                })
            });
            
            const result = await response.json();
            
            if (!result.success) {
                throw new Error(result.error);
            }
            
            // Update credits display
            document.querySelector('.credits-display').innerHTML = `
                <i class="fas fa-coins"></i>
                ${result.total_credits} Credits
            `;
            
            return result;
            
        } catch (error) {
            console.error('Confirmation error:', error);
            throw error;
        }
    }
    
    // Show success message
    function showSuccessMessage(message) {
        const successDiv = document.createElement('div');
        successDiv.className = 'success-message';
        successDiv.innerHTML = `
            <div class="success-content">
                <i class="fas fa-check-circle"></i>
                <h3>Success!</h3>
                <p>${message}</p>
            </div>
        `;
        
        // Add styles
        successDiv.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
            border-radius: 16px;
            padding: 2rem;
            color: white;
            z-index: 10000;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(25px);
            max-width: 400px;
        `;
        
        document.body.appendChild(successDiv);
        
        // Remove after 5 seconds
        setTimeout(() => {
            if (successDiv.parentNode) {
                successDiv.parentNode.removeChild(successDiv);
            }
        }, 5000);
    }
    
    // Close cart when clicking outside
    document.getElementById('cartModal').addEventListener('click', function(e) {
        if (e.target === this) {
            hideCart();
        }
    });
    
    // Initialize cart on page load
    document.addEventListener('DOMContentLoaded', function() {
        loadCart();
    });
    
    // Test function for development
    window.testCreditPurchase = function() {
        purchaseCredits('test', 5, 4.99);
    };
</script>

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