 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/domains/soundstudiopro.com/public_html/ |
<?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;
// Get subscription info if user has subscription
$subscription_info = null;
$subscription_usage = null;
$has_active_subscription = false;
$current_plan = 'free';
try {
require_once __DIR__ . '/utils/subscription_helpers.php';
$has_active_subscription = hasActiveSubscription($_SESSION['user_id']);
$current_plan = getEffectivePlan($_SESSION['user_id']);
$subscription_info = getSubscriptionInfo($_SESSION['user_id']);
if ($subscription_info) {
$subscription_usage = getMonthlyTrackUsage($_SESSION['user_id'], $subscription_info['plan_name'] ?? null);
}
} catch (Exception $e) {
error_log("Error getting subscription info in credits.php: " . $e->getMessage());
$subscription_info = null;
$subscription_usage = null;
$has_active_subscription = false;
$current_plan = 'free';
}
// Initialize cart if not exists
if (!isset($_SESSION['credit_cart'])) {
$_SESSION['credit_cart'] = [];
}
// Set page variables for header
$page_title = t('credits.page_title');
$page_description = t('credits.page_description');
$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: '<?= t('home.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: 18px 35px;
border-radius: 14px;
font-size: 1.7rem;
font-weight: 700;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
position: relative;
z-index: 2;
margin-bottom: 12px;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4), 0 0 0 0 rgba(102, 126, 234, 0.5);
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
overflow: hidden;
}
.purchase-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.purchase-btn:hover::before {
left: 100%;
}
.purchase-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5), 0 0 0 4px rgba(102, 126, 234, 0.2);
background: linear-gradient(135deg, #5a67d8, #6b46c1);
}
.purchase-btn:active {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.purchase-btn i {
font-size: 1.6rem;
}
.add-to-cart-btn {
background: rgba(102, 126, 234, 0.08);
border: 2px solid rgba(102, 126, 234, 0.4);
color: #667eea;
padding: 16px 30px;
border-radius: 14px;
font-size: 1.5rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
backdrop-filter: blur(10px);
}
.add-to-cart-btn:hover {
background: rgba(102, 126, 234, 0.15);
border-color: rgba(102, 126, 234, 0.7);
color: #764ba2;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3), 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.add-to-cart-btn:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}
.add-to-cart-btn i {
font-size: 1.4rem;
transition: transform 0.3s ease;
}
.add-to-cart-btn:hover i {
transform: rotate(90deg) scale(1.1);
}
.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, 107, 107, 0.1);
border: 2px solid #ff6b6b;
color: #ff6b6b;
padding: 14px 25px;
border-radius: 12px;
font-size: 1.5rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);
}
.btn-clear-cart:hover {
background: linear-gradient(135deg, #ff6b6b, #ff5252);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
border-color: #ff5252;
}
.btn-clear-cart:active {
transform: translateY(0);
}
.btn-clear-cart i {
font-size: 1.4rem;
}
.btn-checkout {
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
color: white;
padding: 14px 25px;
border-radius: 12px;
font-size: 1.5rem;
font-weight: 700;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.btn-checkout::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn-checkout:hover::before {
left: 100%;
}
.btn-checkout:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5), 0 0 0 3px rgba(102, 126, 234, 0.2);
background: linear-gradient(135deg, #5a67d8, #6b46c1);
}
.btn-checkout:active {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.btn-checkout i {
font-size: 1.6rem;
}
@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;
}
}
@media (max-width: 480px) {
.credits-title {
font-size: 3rem;
}
.credits-subtitle {
font-size: 1.4rem;
}
.credits-packages {
gap: 1.5rem;
}
.credit-package {
padding: 1.5rem 1.2rem;
}
.package-title {
font-size: 1.4rem;
}
.package-price {
font-size: 2.5rem;
}
.package-credits {
font-size: 1.1rem;
}
.btn-checkout {
padding: 12px 20px;
font-size: 1.1rem;
min-height: 44px;
}
.cart-content {
padding: 1.5rem;
margin: 0.5rem;
}
}
</style>
<!-- Hero Section -->
<section class="credits-hero">
<div class="credits-hero-content">
<div class="credits-badge">
<i class="fas fa-coins"></i>
<?= t('credits.hero_badge') ?>
</div>
<h1 class="credits-title"><?= t('credits.hero_title') ?></h1>
<p class="credits-subtitle">
<?= t('credits.hero_subtitle') ?>
</p>
</div>
</section>
<!-- Current Credits Display -->
<div class="current-credits">
<h3><?= t('credits.current_credits') ?></h3>
<div class="credits-display">
<i class="fas fa-coins"></i>
<?php echo $credits; ?> <?= t('user.credits') ?>
<?php if ($subscription_info && $subscription_usage): ?>
<?php
$tracks_remaining = $subscription_usage['track_limit'] - ($subscription_usage['tracks_created'] ?? 0);
$tracks_color = $tracks_remaining > 0 ? '#48bb78' : '#e53e3e';
?>
<a href="/manage_subscription.php" style="margin-left: 1.5rem; text-decoration: none; display: inline-block;">
<span style="color: <?= $tracks_color ?>; font-size: 1.4rem; transition: opacity 0.3s ease;">
<i class="fas fa-crown" style="font-size: 1.2rem; margin-right: 0.5rem;"></i>
<?= $tracks_remaining ?> / <?= $subscription_usage['track_limit'] ?> <?= t('subscription.tracks_left') ?>
</span>
</a>
<?php endif; ?>
</div>
<!-- Description removed to avoid redundancy - already explained in hero section -->
</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;"><?= t('credits.monthly_subscriptions') ?></h2>
<p style="color: #a0aec0; font-size: 1.2rem;"><?= t('credits.monthly_subscriptions_desc') ?></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];
$plan_display_name = getPlanLabel($plan_key, $plan['name']);
$is_featured = $plan_key === 'pro'; // Pro is featured
?>
<div class="credit-package <?= $is_featured ? 'featured' : '' ?>">
<?php if ($is_featured): ?>
<div class="package-badge"><?= t('home.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_display_name) ?></h3>
<div class="package-credits"><?= $plan['tracks_per_month'] ?> <?= t('home.tracks_per_month') ?></div>
<div class="package-price">
<span class="current-price" style="color: <?= $plan['color'] ?>;">$<?= number_format($plan['price'], 2) ?></span>
<span class="per-credit"><?= t('home.per_month') ?></span>
</div>
<div class="special-badge" style="background: linear-gradient(135deg, <?= $plan['color'] ?>, <?= $plan['color'] ?>dd);"><?= t('dropdown.subscription') ?></div>
<ul class="package-features">
<?php
// Translation mapping for plan features (same as homepage)
$feature_translations = [
'5 tracks per month' => t('plan.feature.tracks_per_month', ['count' => 5]),
'20 tracks per month' => t('plan.feature.tracks_per_month', ['count' => 20]),
'75 tracks per month' => t('plan.feature.tracks_per_month', ['count' => 75]),
'200 tracks per month' => t('plan.feature.tracks_per_month', ['count' => 200]),
'1000 tracks per month' => t('plan.feature.tracks_per_month', ['count' => 1000]),
'Monthly reset' => t('plan.feature.monthly_reset'),
'Basic AI models' => t('plan.feature.basic_ai_models'),
'Advanced AI models' => t('plan.feature.advanced_ai_models'),
'Standard generation speed' => t('plan.feature.standard_speed'),
'High-speed generation' => t('plan.feature.high_speed'),
'Personal use license' => t('plan.feature.personal_license'),
'Commercial use license' => t('plan.feature.commercial_license'),
'Cancel anytime' => t('plan.feature.cancel_anytime'),
'Priority queue access' => t('plan.feature.priority_queue'),
'Highest priority queue' => t('plan.feature.highest_priority'),
'Unlimited downloads' => t('plan.feature.unlimited_downloads'),
'API access' => t('plan.feature.api_access'),
'Full API access' => t('plan.feature.full_api_access'),
'Dedicated support' => t('plan.feature.dedicated_support'),
'White-label options' => t('plan.feature.white_label'),
'Dedicated account manager' => t('plan.feature.account_manager'),
'Custom integrations' => t('plan.feature.custom_integrations'),
'SLA guarantee' => t('plan.feature.sla_guarantee'),
];
foreach (array_slice($plan['features'], 0, 6) as $feature):
$translated_feature = $feature_translations[$feature] ?? $feature;
?>
<li><?= htmlspecialchars($translated_feature) ?></li>
<?php endforeach; ?>
</ul>
<?php
// Determine button text and action based on subscription status
$plan_order_map = ['essential' => 1, 'starter' => 2, 'pro' => 3, 'premium' => 4, 'enterprise' => 5];
$current_plan_level = $plan_order_map[$current_plan] ?? 0;
$this_plan_level = $plan_order_map[$plan_key] ?? 0;
if ($has_active_subscription && $current_plan === $plan_key) {
// User is on this plan - show "Current Plan" or "Manage"
$button_text = t('credits.current_plan', ['default' => 'Current Plan']);
$button_action = "window.location.href='/manage_subscription.php'";
$button_icon = 'fa-check-circle';
$button_style = 'background: linear-gradient(135deg, #48bb78, #059669); cursor: default;';
} elseif ($has_active_subscription && $this_plan_level > $current_plan_level) {
// User has subscription but on lower plan - show "Upgrade"
$button_text = t('credits.upgrade_plan', ['default' => 'Upgrade']);
$button_action = "window.location.href='/subscribe.php?plan={$plan_key}'";
$button_icon = 'fa-arrow-up';
$button_style = 'background: linear-gradient(135deg, ' . $plan['color'] . ', ' . $plan['color'] . 'dd);';
} elseif ($has_active_subscription && $this_plan_level < $current_plan_level) {
// User has subscription but on higher plan - show "Downgrade"
$button_text = t('credits.downgrade_plan', ['default' => 'Downgrade']);
$button_action = "window.location.href='/subscribe.php?plan={$plan_key}'";
$button_icon = 'fa-arrow-down';
$button_style = 'background: linear-gradient(135deg, rgba(160, 174, 192, 0.3), rgba(160, 174, 192, 0.2));';
} else {
// No subscription - show "Subscribe Now"
$button_text = t('home.subscribe_now');
$button_action = "window.location.href='/subscribe.php?plan={$plan_key}'";
$button_icon = 'fa-sync-alt';
$button_style = 'background: linear-gradient(135deg, ' . $plan['color'] . ', ' . $plan['color'] . 'dd);';
}
?>
<button class="purchase-btn" onclick="<?= $button_action ?>" style="<?= $button_style ?>">
<i class="fas <?= $button_icon ?>"></i>
<?= $button_text ?>
</button>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Extra Credits Section -->
<div id="extra-credits" 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;"><?= t('credits.extra_credits') ?></h2>
</div>
<!-- Subscription Requirement Notice -->
<div style="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: 12px; padding: 2rem; margin-bottom: 3rem; max-width: 1000px; margin-left: auto; margin-right: auto;">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
<i class="fas fa-info-circle" style="font-size: 2rem; color: #667eea;"></i>
<h3 style="margin: 0; font-size: 1.8rem; color: #fff;"><?= t('home.credits_subscription_required_title') ?></h3>
</div>
<p style="margin: 0; font-size: 1.4rem; color: #a0aec0; line-height: 1.6;">
<?= t('home.credits_subscription_required_message') ?>
</p>
</div>
<!-- "How It Works" section removed to avoid redundancy - already explained in hero section and subscription requirement notice -->
<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"><?= t('credits.starter_credits') ?></h3>
<div class="package-credits">30 <?= t('user.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 <?= t('common.per_track') ?></span>
</div>
<div class="special-badge"><?= t('credits.one_time_purchase') ?></div>
<ul class="package-features">
<li><?= t('credits.music_tracks', ['count' => 30]) ?></li>
<li><?= t('plan.feature.advanced_ai_models') ?></li>
<li><?= t('plan.feature.high_speed') ?></li>
<li><?= t('plan.feature.priority_queue') ?></li>
<li><?= t('credits.ad_free') ?></li>
<li><?= t('plan.feature.commercial_license') ?></li>
<li><?= t('plan.feature.unlimited_downloads') ?></li>
<li><?= t('home.extra_feature_2') ?></li>
</ul>
<button class="purchase-btn" onclick="purchaseCredits('starter', 30, 19.99)">
<i class="fas fa-shopping-cart"></i>
<?= t('credits.purchase_now') ?>
</button>
<button class="add-to-cart-btn" onclick="addToCart('starter', 30, 19.99)">
<i class="fas fa-plus"></i>
<?= t('credits.add_to_cart') ?>
</button>
</div>
<!-- Pro Credits Package -->
<div class="credit-package featured">
<div class="package-badge"><?= t('credits.best_value') ?></div>
<div class="package-icon">
<i class="fas fa-fire"></i>
</div>
<h3 class="package-name"><?= t('credits.pro_credits') ?></h3>
<div class="package-credits">150 <?= t('user.credits') ?></div>
<div class="package-price">
<span class="original-price">$59</span>
<span class="current-price">$49</span>
<span class="per-credit">$0.33 <?= t('common.per_track') ?></span>
</div>
<div class="special-badge"><?= t('credits.one_time_purchase') ?></div>
<ul class="package-features">
<li><?= t('credits.music_tracks', ['count' => 150]) ?></li>
<li><?= t('plan.feature.advanced_ai_models') ?></li>
<li><?= t('plan.feature.high_speed') ?></li>
<li><?= t('plan.feature.priority_queue') ?></li>
<li><?= t('credits.ad_free') ?></li>
<li><?= t('plan.feature.commercial_license') ?></li>
<li><?= t('plan.feature.unlimited_downloads') ?></li>
<li><?= t('credits.private_mode') ?></li>
<li><?= t('credits.unlimited_storage') ?></li>
<li><?= t('home.extra_feature_2') ?></li>
</ul>
<button class="purchase-btn" onclick="purchaseCredits('pro', 150, 49, event)">
<i class="fas fa-shopping-cart"></i>
<?= t('credits.purchase_now') ?>
</button>
<button class="add-to-cart-btn" onclick="addToCart('pro', 150, 49)">
<i class="fas fa-plus"></i>
<?= t('credits.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"><?= t('credits.premium_credits') ?></h3>
<div class="package-credits">500 <?= t('user.credits') ?></div>
<div class="package-price">
<span class="original-price">$179</span>
<span class="current-price">$129</span>
<span class="per-credit">$0.26 <?= t('common.per_track') ?></span>
</div>
<div class="special-badge"><?= t('credits.one_time_purchase') ?></div>
<ul class="package-features">
<li><?= t('credits.music_tracks', ['count' => 500]) ?></li>
<li><?= t('plan.feature.advanced_ai_models') ?></li>
<li><?= t('plan.feature.high_speed') ?></li>
<li><?= t('plan.feature.priority_queue') ?></li>
<li><?= t('credits.ad_free') ?></li>
<li><?= t('plan.feature.commercial_license') ?></li>
<li><?= t('plan.feature.unlimited_downloads') ?></li>
<li><?= t('credits.private_mode') ?></li>
<li><?= t('credits.unlimited_storage') ?></li>
<li><?= t('home.extra_feature_2') ?></li>
</ul>
<button class="purchase-btn" onclick="purchaseCredits('premium', 500, 129)">
<i class="fas fa-shopping-cart"></i>
<?= t('credits.purchase_now') ?>
</button>
<button class="add-to-cart-btn" onclick="addToCart('premium', 500, 129)">
<i class="fas fa-plus"></i>
<?= t('credits.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"><?= t('credits.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"><?= t('credits.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>
<?= t('credits.clear_cart') ?>
</button>
<button class="btn-checkout" onclick="checkoutCart()">
<i class="fas fa-credit-card"></i>
<?= t('credits.checkout') ?>
</button>
</div>
</div>
</div>
<script src="https://js.stripe.com/v3/"></script>
<script>
// Translation strings for JavaScript
const translations = {
creditsAdded: '<?= t('credits.added_to_cart') ?>',
creditsFailed: '<?= t('credits.failed_to_add') ?>',
package: '<?= t('common.package') ?>',
credits: '<?= t('user.credits') ?>',
totalCredits: '<?= t('credits.total_credits') ?>',
cartEmpty: '<?= t('common.empty_cart') ?>',
success: '<?= t('msg.success') ?>'
};
// 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} ${translations.credits} ${translations.creditsAdded} 🎵`, 'success');
} else {
showSuccessMessage(`${credits} ${translations.credits} ${translations.creditsAdded}`);
}
// 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 || translations.creditsFailed);
}
})
.catch(error => {
console.error('🎯 Error adding credits to cart:', error);
// Show error notification
if (typeof window.showNotification === 'function') {
window.showNotification(translations.creditsFailed + ': ' + error.message, 'error');
} else {
showSuccessMessage(translations.creditsFailed + ': ' + 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)} ${translations.package}</div>
<div class="cart-item-details">${item.credits} ${translations.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(translations.cartEmpty);
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, event) {
// Show loading state
let button = null;
let originalText = '';
if (event && event.target) {
button = event.target.closest('.purchase-btn') || event.target;
originalText = button.innerHTML;
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
button.disabled = true;
}
// 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(response => response.json())
.then(data => {
if (data.success) {
// Use AJAX navigation to preserve global player
if (window.ajaxNavigation) {
window.ajaxNavigation.navigateToPage('/checkout.php');
} else {
window.location.href = '/checkout.php';
}
} else {
// Show error message
if (button) {
button.innerHTML = originalText;
button.disabled = false;
}
let errorMsg = data.message || data.error || 'An error occurred';
// Check if subscription is required
if (data.requires_subscription) {
const subscriptionMsg = '<?= addslashes(t('checkout.subscription_required_message')) ?>';
if (confirm(errorMsg + '\n\n' + subscriptionMsg)) {
window.location.href = data.subscription_url || '/account_settings.php?tab=subscription';
}
} else {
alert(errorMsg);
}
}
})
.catch(error => {
console.error('Error adding to cart:', error);
if (button) {
button.innerHTML = originalText;
button.disabled = false;
}
alert('An error occurred. Please try again.');
});
}
// 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} ${translations.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, null);
};
</script>
<?php include 'includes/footer.php'; ?>