 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/ |
<?php
session_start();
// Include translation system
require_once 'includes/translations.php';
// 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">Choose Your Plan</h1>
<p class="credits-subtitle">
Subscribe to a monthly plan for predictable costs with monthly track limits that reset each billing period.
Or buy extra credits (one-time purchases that never expire) to supplement your subscription when you need more tracks.
</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>Subscriptions provide monthly track limits that reset each billing period. Extra credits are one-time purchases that never expire and can be used anytime.</p>
</div>
<!-- Subscription Plans Section -->
<div style="margin-bottom: 60px;">
<div class="section-header" style="text-align: center; margin-bottom: 40px;">
<h2 style="color: white; font-size: 2.5rem; margin-bottom: 15px;">Monthly Subscriptions</h2>
<p style="color: #a0aec0; font-size: 1.2rem;">Predictable monthly plans - cancel anytime</p>
</div>
<?php
// Load subscription plans config
$plans_config = require __DIR__ . '/config/subscription_plans.php';
$plan_order = ['essential', 'starter', 'pro', 'premium', 'enterprise'];
?>
<div class="credits-packages">
<?php foreach ($plan_order as $index => $plan_key):
$plan = $plans_config[$plan_key];
$is_featured = $plan_key === 'pro'; // Pro is featured
?>
<div class="credit-package <?= $is_featured ? 'featured' : '' ?>">
<?php if ($is_featured): ?>
<div class="package-badge">Most Popular</div>
<?php endif; ?>
<div class="package-icon" style="color: <?= $plan['color'] ?>;">
<i class="fas <?= $plan['icon'] ?>"></i>
</div>
<h3 class="package-name"><?= htmlspecialchars($plan['name']) ?></h3>
<div class="package-credits"><?= $plan['tracks_per_month'] ?> Tracks/Month</div>
<div class="package-price">
<span class="current-price" style="color: <?= $plan['color'] ?>;">$<?= number_format($plan['price'], 2) ?></span>
<span class="per-credit">per month</span>
</div>
<div class="special-badge" style="background: linear-gradient(135deg, <?= $plan['color'] ?>, <?= $plan['color'] ?>dd);">Subscription</div>
<ul class="package-features">
<?php foreach (array_slice($plan['features'], 0, 6) as $feature): ?>
<li><?= htmlspecialchars($feature) ?></li>
<?php endforeach; ?>
</ul>
<button class="purchase-btn" onclick="window.location.href='/subscribe.php?plan=<?= $plan_key ?>'" style="background: linear-gradient(135deg, <?= $plan['color'] ?>, <?= $plan['color'] ?>dd);">
<i class="fas fa-sync-alt"></i>
Subscribe Now
</button>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Extra Credits Section -->
<div style="margin-top: 60px; padding-top: 60px; border-top: 2px solid #333;">
<div class="section-header" style="text-align: center; margin-bottom: 40px;">
<h2 style="color: white; font-size: 2.5rem; margin-bottom: 15px;">Extra Credits</h2>
<p style="color: #a0aec0; font-size: 1.2rem;">One-time purchases that never expire - perfect for supplementing your subscription</p>
</div>
<div style="margin-bottom: 2rem; padding: 1rem; background: rgba(102, 126, 234, 0.1); border-radius: 8px; border: 1px solid rgba(102, 126, 234, 0.3); max-width: 800px; margin-left: auto; margin-right: auto;">
<p style="color: #667eea; font-size: 1.1rem; margin: 0; text-align: center;">
<i class="fas fa-info-circle"></i>
<strong>How It Works:</strong> Subscriptions give you monthly track limits that reset each billing period. Extra credits are one-time purchases that never expire and work alongside your subscription.
</p>
</div>
<div class="credits-packages">
<!-- Starter Credits Package -->
<div class="credit-package">
<div class="package-icon">
<i class="fas fa-star"></i>
</div>
<h3 class="package-name">Starter Credits</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">One-Time Purchase</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</li>
<li>Unlimited downloads</li>
<li>Never expires (until used)</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>
<!-- Pro Credits Package -->
<div class="credit-package featured">
<div class="package-badge">Best Value</div>
<div class="package-icon">
<i class="fas fa-fire"></i>
</div>
<h3 class="package-name">Pro Credits</h3>
<div class="package-credits">150 Credits</div>
<div class="package-price">
<span class="original-price">$59</span>
<span class="current-price">$49</span>
<span class="per-credit">$0.33 per track</span>
</div>
<div class="special-badge">One-Time Purchase</div>
<ul class="package-features">
<li>150 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</li>
<li>Unlimited downloads</li>
<li>Private mode generation</li>
<li>Unlimited storage</li>
<li>Never expires (until used)</li>
</ul>
<button class="purchase-btn" onclick="purchaseCredits('pro', 150, 49)">
<i class="fas fa-shopping-cart"></i>
Purchase Now
</button>
<button class="add-to-cart-btn" onclick="addToCart('pro', 150, 49)">
<i class="fas fa-plus"></i>
Add to Cart
</button>
</div>
<!-- Premium Credits Package -->
<div class="credit-package">
<div class="package-icon">
<i class="fas fa-crown"></i>
</div>
<h3 class="package-name">Premium Credits</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">One-Time Purchase</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</li>
<li>Unlimited downloads</li>
<li>Private mode generation</li>
<li>Unlimited storage</li>
<li>Never expires (until used)</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>
</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()">×</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'; ?>