<?php
/**
 * Add Credit page template for the Postomatic plugin.
 *
 * This file serves as the interface for users to purchase credits for the Postomatic plugin,
 * displaying pricing options, credit packages, and handling the purchase process.
 *
 * @package Postomatic
 * @subpackage Admin\Templates
 */

// Enqueue Vue.js.
$admin_assets = new Postomatic\Admin\Admin_Assets();
$admin_assets->enqueue_vue_js();
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Postomatic Add Credit</title>
	<style>
		@keyframes pulse {
			0% { transform: scale(1); }
			50% { transform: scale(1.05); }
			100% { transform: scale(1); }
		}

		@keyframes shine {
			0% { transform: translateX(-100%) rotate(45deg); }
			20%, 100% { transform: translateX(100%) rotate(45deg); }
		}

		@keyframes floating {
			0% { transform: translateY(0px); }
			50% { transform: translateY(-6px); }
			100% { transform: translateY(0px); }
		}
	</style>
</head>
<body>
<div id="app">
	<div class="wrap">
		<!-- Header Section -->
		<div class="header" style="background: linear-gradient(125deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%); margin: -20px -20px 30px -20px; border-radius: 60px; box-shadow: 0 20px 40px rgba(124,58,237,0.3); position: relative; overflow: hidden; padding: 4rem 0; text-align: center;">
			<div class="header-content">
				<h1>
			<span class="brand-text"
					style="font-size: 3.2rem; font-weight: 900; background: linear-gradient(to right, #ffffff, #f0f9ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; letter-spacing: -0.025em; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));">
				{{ brandText }}
			</span>
					<span class="brand-tagline"
							style="display: block; margin-top: 0.75rem; font-size: 1.5rem; color: rgba(255,255,255,0.9); font-weight: 500; letter-spacing: -0.015em;">
				{{ brandTagline }}
			</span>
				</h1>
			</div>
			<div class="header-subtitle"
				style="font-size: 1.125rem; font-weight: 500; letter-spacing: 0.025em; margin-top: 1rem; color: rgba(255,255,255,0.9);">
				{{ subtitle }}
			</div>
			<!-- The upgrade wording only makes sense while a higher plan exists; top-tier users get a plain message instead. -->
			<p v-if="!isHighestPlan" style="color: rgba(255,255,255,0.8); max-width: 800px; margin: 1.5rem auto 0; font-size: 1.1rem;">
				Purchase credits to power your content creation or <a :href="urls.membership" style="color: #ffffff; font-weight: 700; text-decoration: underline;">upgrade to a subscription</a> for even better value!
			</p>
			<p v-else style="color: rgba(255,255,255,0.8); max-width: 800px; margin: 1.5rem auto 0; font-size: 1.1rem;">
				You're on our highest plan. Top up your credits here whenever you need extra capacity.
			</p>
		</div>

		<!-- Loading Overlay -->
		<div id="loading-overlay" class="loading-overlay" v-show="loading">
			<div class="loading-content">
				<div class="loading-spinner"></div>
				<div class="loading-text">Loading your credit information...</div>
			</div>
		</div>

		<!-- Important Notice -->
		<div id="important_notice"
			style="margin-bottom: 2rem; padding: 1.5rem; background: #ffffff; border-left: 4px solid #4f46e5; border-radius: 0.5rem; box-shadow: 0 4px 16px rgba(0,0,0,0.08); position: relative;"
			v-if="showImportantNotice">
			<button @click="importantNotice.show = false"
					style="position: absolute; right: 1rem; top: 1rem; background: none; border: none; cursor: pointer; color: #64748b; font-size: 1.25rem; padding: 0.5rem; transition: all 0.2s; z-index: 1;">
				<span class="dashicons dashicons-dismiss"></span>
			</button>
			<div style="display: flex; align-items: flex-start; gap: 1rem;">
			<span class="dashicons dashicons-info"
				style="color: #4f46e5; font-size: 1.5rem; margin-top: 0.125rem;"></span>
				<div>
					<h4 style="margin: 0 0 0.5rem 0; color: #1e293b; font-size: 1.125rem; font-weight: 600; line-height: 1.4;">
						{{ importantNotice.title }}
					</h4>
					<p style="margin: 0; color: #475569; line-height: 1.6; font-size: 1rem;" v-html="importantNotice.content"></p>
					<div style="margin-top: 1rem;">
						<a v-if="importantNotice.btnText && importantNotice.btnLink"
							:href="importantNotice.btnLink"
							class="button button-primary"
							style="padding: 0.625rem 1.25rem; background: #4f46e5; color: white; text-decoration: none; border-radius: 0.375rem; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
							{{ importantNotice.btnText }}
						</a>
					</div>
				</div>
			</div>
		</div>

		<!-- Plan & Credits -->
		<div style="display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; padding: 1rem; background: linear-gradient(135deg, rgba(6,182,212,0.05) 0%, rgba(79,70,229,0.05) 100%); border-radius: 0.5rem;">
			<div style="text-align: center;">
				<h2 style="margin: 0 0 0.5rem 0; color: #1e293b; font-size: 0.875rem; font-weight: 600; text-transform: uppercase;">Current Plan</h2>
				<div style="color: #4f46e5; font-size: 1.25rem; font-weight: 700;">
					{{ currentPlanName }}
				</div>
			</div>
			<div style="text-align: center;">
				<h2 style="margin: 0 0 0.5rem 0; color: #1e293b; font-size: 0.875rem; font-weight: 600; text-transform: uppercase;">Available Credits</h2>
				<div :style="{ color: Number(creditCount) < 5 ? '#FF0000' : (Number(creditCount) < minRequiredCredits ? '#FFCC00' : '#06b6d4'), fontSize: '1.25rem', fontWeight: '700' }">
					{{ creditCount }}
				</div>
				<!-- Warning element for low credits -->
				<div v-if="Number(creditCount) < 5 && Number(creditCount) > 0" style="margin-top: 0.5rem; background-color: #FFFBEB; border: 1px solid #FFCC00; border-radius: 4px; padding: 0.5rem; display: flex; align-items: center;">
					<span style="color: #FFCC00; margin-right: 0.5rem;">⚠️</span>
					<span style="color: #92400E; font-size: 0.875rem;">Low credits! Consider purchasing more.</span>
				</div>
				<!-- Alert element for zero credits -->
				<div v-if="Number(creditCount) === 0" style="margin-top: 0.5rem; background-color: #FEF2F2; border: 1px solid #FF0000; border-radius: 4px; padding: 0.5rem; display: flex; align-items: center;">
					<span style="color: #FF0000; margin-right: 0.5rem;">⛔</span>
					<span style="color: #7F1D1D; font-size: 0.875rem;">No credits available! You need credits to use features.</span>
				</div>
			</div>
		</div>

		<!-- Upgrade Button (hidden once the user is on the highest plan) -->
		<a v-if="!isHighestPlan"
			:href="urls.membership"
			id="upgrade_pan_btn"
			style="position: fixed; right: 2rem; top: 6rem; z-index: 50; display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #06b6d4 0%, #4f46e5 100%); backdrop-filter: blur(8px); color: white; border: none; border-radius: 0.75rem; font-weight: 700; font-size: 1.125rem; box-shadow: 0 10px 25px -3px rgba(6,182,212,0.5); text-decoration: none;">
			<span style="margin-right: 0.75rem; letter-spacing: 0.025em;">Upgrade Plan</span>
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; transition: transform 0.3s ease;">
				<line x1="5" y1="12" x2="19" y2="12"></line>
				<polyline points="12 5 19 12 12 19"></polyline>
			</svg>
		</a>

		<!-- Pricing Cards Section -->
		<section id="packages" class="pricing-section">
			<h2 style="text-align: center; font-size: 2.2rem; margin-bottom: 1.5rem; color: #1e293b; font-weight: 800;">
				Choose Your Credit Package
				<span style="display: block; font-size: 1.2rem; font-weight: 500; color: #64748b; margin-top: 0.5rem;">
					One-time purchase options to power your content creation
				</span>
			</h2>

			<div v-if="!isHighestPlan" style="text-align: center; margin-bottom: 2rem; padding: 1rem; background: #f8fafc; border-radius: 12px; max-width: 800px; margin-left: auto; margin-right: auto;">
				<p style="margin: 0; color: #334155; font-size: 1.1rem;">
					<span style="font-weight: 600; color: #4f46e5;">Pro Tip:</span> 
					<a :href="urls.membership" style="color: #ff6b00; font-weight: 700; text-decoration: underline;">Subscribe to a monthly plan</a> 
					instead for automatic credits and <span style="background: #ffe0cc; padding: 2px 8px; border-radius: 4px; color: #ff6b00; font-weight: 600;">up to 50% savings</span>
				</p>
			</div>

			<div class="pricing-grid" style="position: relative; z-index: 1;">
				<!-- Pricing Cards -->
				<div class="price-card" v-for="(plan, key, index) in pricingData" :key="key" 
					:style="key === Object.keys(pricingData)[1] ? {
						'transform': 'scale(1.05)',
						'boxShadow': '0 0 40px rgba(79,70,229,0.2)',
						'border': '2px solid #4f46e5',
						'position': 'relative',
						'zIndex': '2',
						'background': 'linear-gradient(to bottom, #ffffff, #f8fafc)'
					} : {}">
					<div class="price-card__wrapper">
						<!-- Best Value Badge -->
						<div v-if="key === Object.keys(pricingData)[1]" 
							style="position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white; padding: 8px 20px; border-radius: 30px; font-size: 0.9em; font-weight: 700; box-shadow: 0 4px 15px rgba(79,70,229,0.3); white-space: nowrap; animation: pulse 2s infinite;">
							⭐ BEST VALUE ⭐
						</div>


						<div class="card-header" :style="key === Object.keys(pricingData)[1] ? {'background': 'linear-gradient(to bottom, rgba(79,70,229,0.05), transparent)', 'padding-bottom': '1.5rem', 'border-radius': '8px'} : {}">
							<div class="price-badge" v-bind:class="plan.badgeClass">
								<span class="badge-text" v-text="plan.name"></span>
							</div>
							<h3 class="title" :class="{'skeleton-text': loading}" v-text="plan.title"></h3>

							<!-- Price with discount styling -->
							<div class="price" :class="{'skeleton-text': loading}">

								<span :style="key === Object.keys(pricingData)[1] ? {'color': '#4f46e5'} : {}">
									{{ plan.priceFormatted }}
								</span>
							</div>

							<div class="credits" :class="{'skeleton-text': loading}" v-text="plan.quantityFormatted"></div>

							<!-- Enhanced bonus credits display -->
							<div class="bonus-credits" v-if="plan.bonus_credit" 
								:style="key === Object.keys(pricingData)[1] ? {
									'background': 'linear-gradient(to right, #ede9fe, #dbeafe)',
									'padding': '12px',
									'border-radius': '10px',
									'box-shadow': '0 4px 12px rgba(79,70,229,0.1)',
									'animation': 'pulse 2s infinite'
								} : {}">
								<span class="bonus-amount" style="display: flex; align-items: center; justify-content: center; gap: 8px;">
									<span style="font-size: 1.5em;">🎁</span>
									<span>
										<span class="bonus-number" v-text="'+' + plan.bonus_credit" 
												:style="key === Object.keys(pricingData)[1] ? {'font-size': '1.4rem', 'color': '#4f46e5'} : {}"></span>
										<span class="bonus-label"> Bonus Credits</span>
									</span>
								</span>
							</div>
						</div>

						<ul class="feature-list">
							<li class="feature-item" v-for="item in plan.features" 
								style="position: relative; padding-left: 28px;">
								<span style="position: absolute; left: 0; color: #22c55e; font-weight: bold;">✓</span>
								{{ item }}
							</li>
						</ul>

						<div class="bonus-info" v-if="plan.bonus_credit" 
							:style="key === Object.keys(pricingData)[1] ? {
								'background': 'linear-gradient(to right, #ede9fe, #dbeafe, #ede9fe)',
								'border-radius': '10px',
								'box-shadow': '0 4px 12px rgba(79,70,229,0.1)'
							} : {}">
							<div class="bonus-label">Your Plan "{{ currentPlanName }}" Bonus is</div>
							<div class="bonus-detail" v-text="`Will receive ${plan.bonus_credit} extra credits after your purchase.`"></div>
						</div>

						<!-- Enhanced purchase button -->
						<a :href="plan.link + '?refer=' + currentUrl" class="purchase-button"
							:style="key === Object.keys(pricingData)[1] ? {
								'background': 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%)',
								'transform': 'scale(1.05)',
								'padding': '1rem 1.5rem',
								'font-size': '1.1rem',
								'font-weight': '700',
								'box-shadow': '0 10px 20px rgba(79,70,229,0.3)',
								'margin-top': '1.5rem'
							} : {}">
							<span class="button-text">Buy Credits</span>
							<span style="margin-left: 8px;">→</span>
						</a>

						<!-- Limited time offer note -->
<!--                        <p v-if="key === Object.keys(pricingData)[1]" -->
<!--                           style="color: #4f46e5; font-size: 0.9em; margin-top: 15px; font-weight: 600; text-align: center; animation: pulse 2s infinite;">-->
<!--                            🔥 Limited Time Offer - Save 20% Today! 🔥-->
<!--                        </p>-->
					</div>
				</div>
			</div>

			<!-- Subscription CTA (only for users who still have a higher plan available) -->
			<div v-if="!isHighestPlan" style="text-align: center; margin-top: 3rem; padding: 2rem; background: linear-gradient(135deg, rgba(79,70,229,0.05) 0%, rgba(6,182,212,0.05) 100%); border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">
				<h3 style="font-size: 1.5rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem;">
					Need Credits Regularly? Get a Subscription Instead!
				</h3>
				<p style="color: #475569; max-width: 800px; margin: 0 auto 1.5rem; font-size: 1.1rem; line-height: 1.6;">
					With a subscription plan, you'll receive credits automatically every month at a <span style="font-weight: 700; color: #4f46e5;">significantly lower price</span> than one-time purchases.
				</p>
				<a :href="urls.membership" 
					style="display: inline-block; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%); color: white; padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 1.1rem; box-shadow: 0 10px 20px rgba(79,70,229,0.3); transition: all 0.3s ease;">
					View Subscription Plans
					<span style="margin-left: 8px;">⚡</span>
				</a>
			</div>
		</section>

		<!-- Trust Indicators Section -->
		<section class="trust-section">
			<h2 style="text-align: center; color: #1e293b; font-size: 2em; margin-bottom: 30px; font-weight: 800;">
				Why Choose Postomatic Credits?
			</h2>
			<div class="trust-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 40px auto 20px; padding: 0 20px;">
				<div v-for="item in trustIndicators" :key="item.title" class="trust-item"
					style="background: white; padding: 30px; border-radius: 16px; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transform: translateY(0);"
					onmouseover="this.style.transform='translateY(-10px)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.15)';"
					onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.1)';">
					<div class="trust-icon" style="margin-bottom: 20px; transform: scale(1.2);" v-html="item.icon"></div>
					<div class="trust-content">
						<h4 style="font-size: 1.3em; margin: 0 0 10px; font-weight: 700; color: #1e293b;" v-text="item.title"></h4>
						<p style="color: #475569; margin: 0 0 15px; font-size: 1.05em;" v-text="item.text"></p>
						<p v-if="item.link" class="trust-link">
							<a :href="item.link.url" rel="noopener"
								style="color: #4f46e5; font-size: 0.95em; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 5px;">
								{{ item.link.text }}
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
									<path d="M5 12h14M12 5l7 7-7 7"/>
								</svg>
							</a>
						</p>
					</div>
				</div>
			</div>

			<!-- Comparison Section (a subscription pitch, so skipped on the top plan) -->
			<div v-if="!isHighestPlan" style="margin-top: 4rem; background: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; max-width: 1000px; margin-left: auto; margin-right: auto;">
				<div style="background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%); padding: 2rem; text-align: center; color: white;">
					<h3 style="margin: 0; font-size: 1.8rem; font-weight: 800;">Credits vs. Subscription: What's Best For You?</h3>
					<p style="margin: 1rem 0 0; opacity: 0.9; font-size: 1.1rem;">Compare your options to make the best choice for your content creation needs</p>
				</div>

				<div style="padding: 2rem;">
					<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
						<!-- One-time Credits Column -->
						<div>
							<div style="text-align: center; margin-bottom: 1.5rem;">
								<h4 style="margin: 0; font-size: 1.4rem; color: #1e293b;">One-time Credits</h4>
								<p style="color: #64748b; margin: 0.5rem 0 0;">Pay only when you need them</p>
							</div>

							<ul style="list-style: none; padding: 0; margin: 0;">
								<li style="padding: 1rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center;">
									<span style="color: #22c55e; margin-right: 1rem; font-size: 1.2rem;">✓</span>
									<span style="color: #334155;">No recurring payments</span>
								</li>
								<li style="padding: 1rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center;">
									<span style="color: #22c55e; margin-right: 1rem; font-size: 1.2rem;">✓</span>
									<span style="color: #334155;">Buy exactly what you need</span>
								</li>
								<li style="padding: 1rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center;">
									<span style="color: #ef4444; margin-right: 1rem; font-size: 1.2rem;">✗</span>
									<span style="color: #334155;">Higher cost per credit</span>
								</li>
								<li style="padding: 1rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center;">
									<span style="color: #ef4444; margin-right: 1rem; font-size: 1.2rem;">✗</span>
									<span style="color: #334155;">No automatic monthly credits</span>
								</li>
								<li style="padding: 1rem; display: flex; align-items: center;">
									<span style="color: #ef4444; margin-right: 1rem; font-size: 1.2rem;">✗</span>
									<span style="color: #334155;">No premium features access</span>
								</li>
							</ul>
						</div>

						<!-- Subscription Column -->
						<div style="background: linear-gradient(to bottom, rgba(79,70,229,0.05), transparent); border-radius: 12px; position: relative;">
							<div style="position: absolute; top: -12px; right: -12px; background: linear-gradient(135deg, #ff6b00 0%, #ff9500 100%); color: white; padding: 5px 15px; border-radius: 20px; font-weight: 700; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(255,107,0,0.3);">
								RECOMMENDED
							</div>

							<div style="text-align: center; margin-bottom: 1.5rem; padding-top: 1.5rem;">
								<h4 style="margin: 0; font-size: 1.4rem; color: #4f46e5;">Monthly Subscription</h4>
								<p style="color: #64748b; margin: 0.5rem 0 0;">The smart choice for regular users</p>
							</div>

							<ul style="list-style: none; padding: 0; margin: 0;">
								<li style="padding: 1rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center;">
									<span style="color: #22c55e; margin-right: 1rem; font-size: 1.2rem;">✓</span>
									<span style="color: #334155;"><strong style="color: #4f46e5;">Up to 50% savings</strong> on credit costs</span>
								</li>
								<li style="padding: 1rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center;">
									<span style="color: #22c55e; margin-right: 1rem; font-size: 1.2rem;">✓</span>
									<span style="color: #334155;">Automatic monthly credit allowance</span>
								</li>
								<li style="padding: 1rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center;">
									<span style="color: #22c55e; margin-right: 1rem; font-size: 1.2rem;">✓</span>
									<span style="color: #334155;">Access to premium features</span>
								</li>
								<li style="padding: 1rem; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center;">
									<span style="color: #22c55e; margin-right: 1rem; font-size: 1.2rem;">✓</span>
									<span style="color: #334155;">Priority support</span>
								</li>
								<li style="padding: 1rem; display: flex; align-items: center;">
									<span style="color: #22c55e; margin-right: 1rem; font-size: 1.2rem;">✓</span>
									<span style="color: #334155;">Cancel anytime</span>
								</li>
							</ul>
						</div>
					</div>

					<div style="text-align: center; margin-top: 2rem;">
						<a :href="urls.membership" 
							style="display: inline-block; background: linear-gradient(135deg, #ff6b00 0%, #ff9500 100%); color: white; padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 1.1rem; box-shadow: 0 10px 20px rgba(255,107,0,0.3); transition: all 0.3s ease;">
							See Subscription Plans
							<span style="margin-left: 8px;">⚡</span>
						</a>
					</div>
				</div>
			</div>
		</section>

		<!-- Credit Features Section -->
		<section class="features-section">
			<details class="feature-details" style="margin-top: 3rem; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden;">
				<summary style="padding: 1rem; cursor: pointer; font-weight: 600; color: #1e293b; display: flex; align-items: center; justify-content: space-between;">
					Item Features and Required Credits
					<svg style="width: 20px; height: 20px; transition: transform 0.3s;" viewBox="0 0 20 20">
						<path fill="currentColor" d="M7 10l5 5 5-5z"/>
					</svg>
				</summary>
				<div class="features-container" style="margin: 0 auto; padding: 1rem; max-height: 400px; overflow-y: auto;">
					<table class="credit-features-table" style="border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background: white; width: 100%;">
						<thead style="position: sticky; top: 0; background: #f8fafc; z-index: 10;">
						<tr>
							<th class="feature-name" style="padding: 16px; font-weight: 600; color: #1e293b; text-align: left; border-bottom: 2px solid #e2e8f0;">Feature</th>
							<th class="credits-needed" style="padding: 16px; font-weight: 600; color: #1e293b; text-align: center; border-bottom: 2px solid #e2e8f0;">Credits Required</th>
							<th class="details" style="padding: 16px; font-weight: 600; color: #1e293b; text-align: left; border-bottom: 2px solid #e2e8f0;">Details</th>
						</tr>
						</thead>
						<tbody>
						<template v-for="(item, index) in accessData">
							<tr :key="index" :class="{even: index % 2 === 0, odd: index % 2 !== 0}" style="border-bottom: 1px solid #e2e8f0;">
								<td class="feature-name" style="padding: 16px; color: #334155;">{{ item.field_title }}</td>
								<td class="credits-needed" style="padding: 16px; color: #334155; text-align: center;">{{ item.credit_amount }}</td>
								<td class="details" style="padding: 16px;">
									<table v-if="item.children.length" class="nested-table" style="width: 100%; background: #f8fafc; border-radius: 6px; margin: 8px 0;">
										<thead>
										<tr>
											<th style="padding: 12px; font-size: 0.875rem; color: #64748b; text-align: left; border-bottom: 1px solid #e2e8f0;">Option</th>
											<th style="padding: 12px; font-size: 0.875rem; color: #64748b; text-align: center; border-bottom: 1px solid #e2e8f0;">Credits</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="(child, cIdx) in item.children" :key="cIdx">
											<td style="padding: 12px; font-size: 0.875rem; color: #475569;">{{ child.field_title }}</td>
											<td style="padding: 12px; font-size: 0.875rem; color: #475569; text-align: center;">{{ child.credit_amount }}</td>
										</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</template>
						</tbody>
					</table>
				</div>
			</details>
		</section>

	</div>
</div>

<!-- Global JS variables from PHP -->
<script>
	var postomatic_api = {
		pricing_url: "<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>",
		credit_url: "<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>",
		access_url: "<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>",
		// Plan slugs ordered lowest tier first, used to hide upgrade prompts on the top plan.
		plan_tiers: <?php echo wp_json_encode( Postomatic\Utils::get_plan_tiers() ); ?>,
		// Phrases that mark the API's "important notice" as an upgrade pitch.
		upgrade_notice_keywords: <?php echo wp_json_encode( Postomatic\Utils::get_upgrade_notice_keywords() ); ?>,
		site_url: "<?php echo esc_js( get_site_url() ); ?>",
		base_url : '<?php echo esc_url( Postomatic\Constants::API_BASE_URL_FRONT ); ?>',
		membership: "<?php echo esc_url( admin_url( 'admin.php?page=' . Postomatic\Constants::PAGE_MEMBERSHIP ) ); ?>",
		nonce: "<?php echo esc_js( wp_create_nonce( 'postomatic_admin_nonce' ) ); ?>",
		get_nonce: function() {
			return "<?php echo esc_js( wp_create_nonce( 'postomatic_admin_nonce' ) ); ?>";
		}
	};
</script>

<!-- Vue App Script -->
<script>
	// Check if Vue 3 or Vue 2 is available
	if (typeof Vue.createApp === 'function') {
		// Vue 3
		Vue.createApp({
		data() {
			return {
				currentUrl: window.location.href,
				brandText: 'Postomatic',
				brandTagline: 'Complete Post Publishing Automation',
				subtitle: 'Transform your content workflow with advanced AI tools',
				loading: true,
				importantNotice: { show: false, title: '', content: '', btnText: '', btnLink: '' },
				currentPlanName: 'Loading...',
				// Slug of the active plan, filled in from the credits endpoint.
				// Used by isHighestPlan to decide whether to show upgrade CTAs.
				planSlug: '',
				planTiers: Array.isArray(postomatic_api.plan_tiers) && postomatic_api.plan_tiers.length
					? postomatic_api.plan_tiers
					: ['starter', 'basic', 'pro-ultimate'],
				// Phrases that identify the API notice as an upgrade pitch, so it
				// can be dropped for users who are already on the top plan.
				upgradeNoticeKeywords: Array.isArray(postomatic_api.upgrade_notice_keywords)
					? postomatic_api.upgrade_notice_keywords
					: [],
				creditCount: 'Loading...',
				pricingData: {},
				accessData: [],
				trustIndicators: [
					{ title: 'Powered by Stripe', text: 'Industry-leading payment platform', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" fill="#6772E5"/><path d="M12 15V9m-3 3h6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>' },
					{ title: 'Bank-Level Security', text: '256-bit SSL encryption', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2L4 6v6c0 5.52 3.44 10.73 8 12.6 4.56-1.87 8-7.08 8-12.6V6l-8-4z" fill="#24B47E"/><path d="M16 9l-5.5 5.5L8 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>' },
					{ title: 'Instant Access', text: 'Credits added immediately', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M13 2L3 14h9l-1 8L21 10h-9l1-8z" fill="#F5BE58"/></svg>' }
				],
				urls: postomatic_api
			}
		},
		computed: {
			// True when the user already owns the top tier. Every "upgrade to a
			// subscription" call to action on this page is hidden in that case,
			// because there is no higher plan left to sell.
			isHighestPlan() {
				if (!this.planTiers || !this.planTiers.length) {
					return false;
				}

				return this.planTiers.indexOf(String(this.planSlug || '').toLowerCase()) === this.planTiers.length - 1;
			},
			// The notice body comes from the API and can carry anything, so only
			// the ones that read as "buy a higher plan" are treated as upgrade
			// pitches. Anything else (renewal reminders, service messages) is
			// left alone.
			isUpgradeNotice() {
				const haystack = [
					this.importantNotice.title,
					this.importantNotice.content,
					this.importantNotice.btnText
				].join(' ').toLowerCase();

				return this.upgradeNoticeKeywords.some(keyword => keyword && haystack.includes(String(keyword).toLowerCase()));
			},
			// An upgrade pitch has nothing to offer someone on the top plan.
			showImportantNotice() {
				return this.importantNotice.show && !(this.isHighestPlan && this.isUpgradeNotice);
			},
			minRequiredCredits() {
				if (!this.accessData || this.accessData.length === 0) {
					return 10; // Default value if no data is available
				}

				// Find the minimum credit amount from all items
				let minCredits = Infinity;
				for (const item of this.accessData) {
					if (item.credit_amount && Number(item.credit_amount) < minCredits) {
						minCredits = Number(item.credit_amount);
					}

					// Also check children if they exist
					if (item.children && item.children.length) {
						for (const child of item.children) {
							if (child.credit_amount && Number(child.credit_amount) < minCredits) {
								minCredits = Number(child.credit_amount);
							}
						}
					}
				}

				return minCredits === Infinity ? 10 : minCredits;
			}
		},
		mounted() {
			// Hide notice-warning
			document.querySelectorAll('.notice-warning').forEach(el => el.style.display = 'none');
			// Check URL params
			const params = new URLSearchParams(window.location.search);
			if (params.get('result') === 'success') {
				setTimeout(() => this.showNotification(
					// The billing callback is single-use now: a reload or revisit of
					// the success URL returns message=already-processed. Still a
					// success, so it is not reported as an error and the URL is never
					// reloaded or retried.
					params.get('message') === 'already-processed'
						? 'This purchase has already been applied to your account.'
						: 'Thank you for your purchase! Your credits have been added.',
					'success'
				), 600);
			} else if (params.get('result') === 'failed') {
				setTimeout(() => this.showNotification('There is an issue with the Payment system. Please try again later.', 'error'), 600);
			}
			// Pricing card hover effects
			this.$nextTick(() => {
				this.$el.querySelectorAll('.price-card').forEach(card => {
					card.addEventListener('mouseenter', () => card.querySelector('.card-header').classList.add('highlight'));
					card.addEventListener('mouseleave', () => card.querySelector('.card-header').classList.remove('highlight'));
				});
			});

			// Initialize countdown timer
			this.startCountdownTimer();

			this.initPage();
		},

		methods: {
			showNotification(message, type = 'info') {
				// Map notification type to SweetAlert icon
				const iconMap = {
					'info': 'info',
					'success': 'success',
					'error': 'error',
					'warning': 'warning'
				};

				// Configure SweetAlert based on notification type
				Swal.fire({
					icon: iconMap[type] || 'info',
					title: type.charAt(0).toUpperCase() + type.slice(1),
					text: message,
					confirmButtonText: 'OK',
					customClass: {
						popup: 'shadow-lg rounded-lg border border-gray-300',
						title: 'text-lg font-medium text-gray-800',
						htmlContainer: 'text-gray-700'
					}
				});
			},
			async fetchPricingData() {
				try {
					const formData = new FormData();
					formData.append('action', 'postomatic_get_pricing_credits');
					formData.append('nonce', this.urls.get_nonce());
					// Credit packages are cached server-side; bypass the cache
					// when arriving back from checkout.
					if (new URLSearchParams(window.location.search).has('result')) {
						formData.append('force_refresh', '1');
					}

					const res = await fetch(this.urls.pricing_url, {
						method: 'POST',
						body: formData
					});

					if (!res.ok) {
						throw new Error('Network response was not ok');
					}

					const jsonResponse = await res.json();

					if (!jsonResponse.success) {
						if (jsonResponse.data === 'Invalid nonce') {
							// Redirect to key-renew.php with refresh parameter
							const nonce = this.urls.get_nonce();
							window.location.href = `?page=postomatic&key=refresh&_wpnonce=${nonce}`;
							return;
						}
						throw new Error(jsonResponse.data || 'Unknown error');
					}

					return jsonResponse.data;
				} catch (error) {
					console.error('Error fetching pricing data:', error);
					return null;
				}
			},
			async fetchUserCreditData() {
				try {
					const formData = new FormData();
					formData.append('action', 'postomatic_get_credits');
					formData.append('nonce', this.urls.get_nonce());

					const res = await fetch(this.urls.credit_url, {
						method: 'POST',
						body: formData
					});

					if (!res.ok) {
						throw new Error('Network response was not ok');
					}

					const jsonResponse = await res.json();

					if (!jsonResponse.success) {
						if (jsonResponse.data === 'Invalid nonce') {
							// Redirect to key-renew.php with refresh parameter
							const nonce = this.urls.get_nonce();
							window.location.href = `?page=postomatic&key=refresh&_wpnonce=${nonce}`;
							return;
						}
						throw new Error(jsonResponse.data || 'Unknown error');
					}

					return jsonResponse.data;
				} catch (error) {
					console.error('Error fetching user credit data:', error);
					return null;
				}
			},
			async fetchCreditAccessDetails() {
				try {
					const formData = new FormData();
					formData.append('action', 'postomatic_get_credit_access');
					formData.append('nonce', this.urls.get_nonce());

					const res = await fetch(this.urls.access_url, {
						method: 'POST',
						body: formData
					});

					if (!res.ok) {
						throw new Error('Network response was not ok');
					}

					const jsonResponse = await res.json();

					if (!jsonResponse.success) {
						if (jsonResponse.data === 'Invalid nonce') {
							// Redirect to key-renew.php with refresh parameter
							const nonce = this.urls.get_nonce();
							window.location.href = `?page=postomatic&key=refresh&_wpnonce=${nonce}`;
							return;
						}
						throw new Error(jsonResponse.data || 'Unknown error');
					}

					return jsonResponse.data;
				} catch (error) {
					console.error('Error fetching credit access details:', error);
					return null;
				}
			},
			updatePricingUI(data) {
				if (!data) return;
				// Transform data into pricingData structure
				for (const key in data) {
					const plan = data[key];
					this.pricingData[key] = {
						ribbon: plan.ribbon || '',
						badgeClass: key.includes('premium') ? 'premium' : key.includes('ultimate') ? 'ultimate' : 'starter',
						name: plan.name || key,
						title: plan.title,
						priceFormatted: `$${plan.price}`,
						quantityFormatted: `${plan.quantity} Credits`, bonus_credit: plan.bonus_credit,
						features: plan.features || [],
						link: plan.url.replace('%blog_url%', btoa(this.urls.site_url)).replace('%plan_id%', plan.slug)
					};
				}
			},
			updateUserCreditUI(data) {
				if (!data) return;
				this.creditCount = data.credit;
				this.currentPlanName = data.plan;
				this.planSlug = data.plan_slug || '';
				if (data.important_notice_text) {
					this.importantNotice = {
						show: true,
						title: data.important_notice_title,
						content: data.important_notice_text,
						btnText: data.important_notice_btn_text,
						btnLink: data.important_notice_btn_link
					};
				}
			},
			generateFeaturesTable(data) {
				if (!data) return;
				this.accessData = data;
			},
			hideLoading() {
				this.loading = false;
			},
			async initPage() {
				const [pricing, user, access] = await Promise.all([
					this.fetchPricingData(),
					this.fetchUserCreditData(),
					this.fetchCreditAccessDetails()
				]);
				this.updatePricingUI(pricing);
				this.updateUserCreditUI(user);
				this.generateFeaturesTable(access);
				this.hideLoading();
			},

			// Countdown timer functionality
			startCountdownTimer() {
				const countdownEl = document.getElementById('countdown');
				if (!countdownEl) return;

				// Parse the current time
				const timeParts = countdownEl.innerText.split(':');
				let hours = parseInt(timeParts[0]);
				let minutes = parseInt(timeParts[1]);
				let seconds = parseInt(timeParts[2]);

				// Update countdown every second
				const updateCountdown = () => {
					seconds--;
					if (seconds < 0) {
						seconds = 59;
						minutes--;
						if (minutes < 0) {
							minutes = 59;
							hours--;
							if (hours < 0) {
								// Timer expired
								countdownEl.innerText = "OFFER EXPIRED";
								return;
							}
						}
					}

					// Format and update the display
					countdownEl.innerText = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

					// Continue the countdown
					setTimeout(updateCountdown, 1000);
				};

				// Start the countdown
				setTimeout(updateCountdown, 1000);
			},

			// Scroll to pricing section
			scrollToPricingSection() {
				const pricingSection = document.getElementById('packages');
				if (pricingSection) {
					pricingSection.scrollIntoView({ behavior: 'smooth' });
				}
			}
		}
	}).mount('#app');
	} else {
		// Vue 2
		new Vue({
			el: '#app',
			data: {
				currentUrl: window.location.href,
				brandText: 'Postomatic',
				brandTagline: 'Complete Post Publishing Automation',
				subtitle: 'Transform your content workflow with advanced AI tools',
				loading: true,
				importantNotice: { show: false, title: '', content: '', btnText: '', btnLink: '' },
				currentPlanName: 'Loading...',
				// Slug of the active plan, filled in from the credits endpoint.
				// Used by isHighestPlan to decide whether to show upgrade CTAs.
				planSlug: '',
				planTiers: Array.isArray(postomatic_api.plan_tiers) && postomatic_api.plan_tiers.length
					? postomatic_api.plan_tiers
					: ['starter', 'basic', 'pro-ultimate'],
				// Phrases that identify the API notice as an upgrade pitch, so it
				// can be dropped for users who are already on the top plan.
				upgradeNoticeKeywords: Array.isArray(postomatic_api.upgrade_notice_keywords)
					? postomatic_api.upgrade_notice_keywords
					: [],
				creditCount: 'Loading...',
				pricingData: {},
				accessData: [],
				trustIndicators: [
					{ title: 'Powered by Stripe', text: 'Industry-leading payment platform', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" fill="#6772E5"/><path d="M12 15V9m-3 3h6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>' },
					{ title: 'Bank-Level Security', text: '256-bit SSL encryption', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2L4 6v6c0 5.52 3.44 10.73 8 12.6 4.56-1.87 8-7.08 8-12.6V6l-8-4z" fill="#24B47E"/><path d="M16 9l-5.5 5.5L8 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>' },
					{ title: 'Instant Access', text: 'Credits added immediately', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M13 2L3 14h9l-1 8L21 10h-9l1-8z" fill="#F5BE58"/></svg>' }
				],
				urls: postomatic_api
			},
			computed: {
				// True when the user already owns the top tier, so the upgrade
				// calls to action on this page are pointless and stay hidden.
				isHighestPlan() {
					if (!this.planTiers || !this.planTiers.length) {
						return false;
					}

					return this.planTiers.indexOf(String(this.planSlug || '').toLowerCase()) === this.planTiers.length - 1;
				},
				// The notice body comes from the API and can carry anything, so only
				// the ones that read as "buy a higher plan" are treated as upgrade
				// pitches. Anything else (renewal reminders, service messages) is
				// left alone.
				isUpgradeNotice() {
					const haystack = [
						this.importantNotice.title,
						this.importantNotice.content,
						this.importantNotice.btnText
					].join(' ').toLowerCase();

					return this.upgradeNoticeKeywords.some(keyword => keyword && haystack.includes(String(keyword).toLowerCase()));
				},
				// An upgrade pitch has nothing to offer someone on the top plan.
				showImportantNotice() {
					return this.importantNotice.show && !(this.isHighestPlan && this.isUpgradeNotice);
				},
				minRequiredCredits() {
					if (!this.accessData || this.accessData.length === 0) {
						return 10; // Default value if no data is available
					}

					// Find the minimum credit amount from all items
					let minCredits = Infinity;
					for (const item of this.accessData) {
						if (item.credit_amount && Number(item.credit_amount) < minCredits) {
							minCredits = Number(item.credit_amount);
						}

						// Also check children if they exist
						if (item.children && item.children.length) {
							for (const child of item.children) {
								if (child.credit_amount && Number(child.credit_amount) < minCredits) {
									minCredits = Number(child.credit_amount);
								}
							}
						}
					}

					return minCredits === Infinity ? 10 : minCredits;
				}
			},
			mounted() {
				// Hide notice-warning
				document.querySelectorAll('.notice-warning').forEach(el => el.style.display = 'none');
				// Check URL params
				const params = new URLSearchParams(window.location.search);
				if (params.get('result') === 'success') {
					setTimeout(() => this.showNotification(
					// The billing callback is single-use now: a reload or revisit of
					// the success URL returns message=already-processed. Still a
					// success, so it is not reported as an error and the URL is never
					// reloaded or retried.
					params.get('message') === 'already-processed'
						? 'This purchase has already been applied to your account.'
						: 'Thank you for your purchase! Your credits have been added.',
					'success'
				), 600);
				} else if (params.get('result') === 'failed') {
					setTimeout(() => this.showNotification('There is an issue with the Payment system. Please try again later.', 'error'), 600);
				}
				// Pricing card hover effects
				this.$nextTick(() => {
					this.$el.querySelectorAll('.price-card').forEach(card => {
						card.addEventListener('mouseenter', () => card.querySelector('.card-header').classList.add('highlight'));
						card.addEventListener('mouseleave', () => card.querySelector('.card-header').classList.remove('highlight'));
					});
				});

				// Initialize countdown timer
				this.startCountdownTimer();

				this.initPage();
			},
			methods: {
				showNotification(message, type = 'info') {
					// Map notification type to SweetAlert icon
					const iconMap = {
						'info': 'info',
						'success': 'success',
						'error': 'error',
						'warning': 'warning'
					};

					// Configure SweetAlert based on notification type
					Swal.fire({
						icon: iconMap[type] || 'info',
						title: type.charAt(0).toUpperCase() + type.slice(1),
						text: message,
						confirmButtonText: 'OK',
						customClass: {
							popup: 'shadow-lg rounded-lg border border-gray-300',
							title: 'text-lg font-medium text-gray-800',
							htmlContainer: 'text-gray-700'
						}
					});
				},
				async fetchPricingData() {
					try {
						const formData = new FormData();
						formData.append('action', 'postomatic_get_pricing_credits');
						formData.append('nonce', this.urls.get_nonce());
						// Credit packages are cached server-side; bypass the cache
						// when arriving back from checkout.
						if (new URLSearchParams(window.location.search).has('result')) {
							formData.append('force_refresh', '1');
						}

						const res = await fetch(this.urls.pricing_url, {
							method: 'POST',
							body: formData
						});

						if (!res.ok) {
							throw new Error('Network response was not ok');
						}

						const jsonResponse = await res.json();

						if (!jsonResponse.success) {
							if (jsonResponse.data === 'Invalid nonce') {
								// Redirect to key-renew.php with refresh parameter
								const nonce = this.urls.get_nonce();
								window.location.href = `?page=postomatic&key=refresh&_wpnonce=${nonce}`;
								return;
							}
							throw new Error(jsonResponse.data || 'Unknown error');
						}

						return jsonResponse.data;
					} catch (error) {
						console.error('Error fetching pricing data:', error);
						return null;
					}
				},
				async fetchUserCreditData() {
					try {
						const formData = new FormData();
						formData.append('action', 'postomatic_get_credits');
						formData.append('nonce', this.urls.get_nonce());

						const res = await fetch(this.urls.credit_url, {
							method: 'POST',
							body: formData
						});

						if (!res.ok) {
							throw new Error('Network response was not ok');
						}

						const jsonResponse = await res.json();

						if (!jsonResponse.success) {
							if (jsonResponse.data === 'Invalid nonce') {
								// Redirect to key-renew.php with refresh parameter
								const nonce = this.urls.get_nonce();
								window.location.href = `?page=postomatic&key=refresh&_wpnonce=${nonce}`;
								return;
							}
							throw new Error(jsonResponse.data || 'Unknown error');
						}

						return jsonResponse.data;
					} catch (error) {
						console.error('Error fetching user credit data:', error);
						return null;
					}
				},
				async fetchCreditAccessDetails() {
					try {
						const formData = new FormData();
						formData.append('action', 'postomatic_get_credit_access');
						formData.append('nonce', this.urls.get_nonce());

						const res = await fetch(this.urls.access_url, {
							method: 'POST',
							body: formData
						});

						if (!res.ok) {
							throw new Error('Network response was not ok');
						}

						const jsonResponse = await res.json();

						if (!jsonResponse.success) {
							if (jsonResponse.data === 'Invalid nonce') {
								// Redirect to key-renew.php with refresh parameter
								const nonce = this.urls.get_nonce();
								window.location.href = `?page=postomatic&key=refresh&_wpnonce=${nonce}`;
								return;
							}
							throw new Error(jsonResponse.data || 'Unknown error');
						}

						return jsonResponse.data;
					} catch (error) {
						console.error('Error fetching credit access details:', error);
						return null;
					}
				},
				updatePricingUI(data) {
					if (!data) return;
					// Transform data into pricingData structure
					for (const key in data) {
						const plan = data[key];
						this.pricingData[key] = {
							ribbon: plan.ribbon || '',
							badgeClass: key.includes('premium') ? 'premium' : key.includes('ultimate') ? 'ultimate' : 'starter',
							name: plan.name || key,
							title: plan.title,
							priceFormatted: `$${plan.price}`,
							quantityFormatted: `${plan.quantity} Credits`, bonus_credit: plan.bonus_credit,
							features: plan.features || [],
							link: plan.url.replace('%blog_url%', btoa(this.urls.site_url)).replace('%plan_id%', plan.slug)
						};
					}
				},
				updateUserCreditUI(data) {
					if (!data) return;
					this.creditCount = data.credit;
					this.currentPlanName = data.plan;
					this.planSlug = data.plan_slug || '';
					if (data.important_notice_text) {
						this.importantNotice = {
							show: true,
							title: data.important_notice_title,
							content: data.important_notice_text,
							btnText: data.important_notice_btn_text,
							btnLink: data.important_notice_btn_link
						};
					}
				},
				generateFeaturesTable(data) {
					if (!data) return;
					this.accessData = data;
				},
				hideLoading() {
					this.loading = false;
				},
				async initPage() {
					const [pricing, user, access] = await Promise.all([
						this.fetchPricingData(),
						this.fetchUserCreditData(),
						this.fetchCreditAccessDetails()
					]);
					this.updatePricingUI(pricing);
					this.updateUserCreditUI(user);
					this.generateFeaturesTable(access);
					this.hideLoading();
				},
				startCountdownTimer() {
					const countdownEl = document.getElementById('countdown');
					if (!countdownEl) return;

					// Parse the current time
					const timeParts = countdownEl.innerText.split(':');
					let hours = parseInt(timeParts[0]);
					let minutes = parseInt(timeParts[1]);
					let seconds = parseInt(timeParts[2]);

					// Update countdown every second
					const updateCountdown = () => {
						seconds--;
						if (seconds < 0) {
							seconds = 59;
							minutes--;
							if (minutes < 0) {
								minutes = 59;
								hours--;
								if (hours < 0) {
									// Timer expired
									countdownEl.innerText = "OFFER EXPIRED";
									return;
								}
							}
						}

						// Format and update the display
						countdownEl.innerText = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

						// Continue the countdown
						setTimeout(updateCountdown, 1000);
					};

					// Start the countdown
					setTimeout(updateCountdown, 1000);
				},
				scrollToPricingSection() {
					const pricingSection = document.getElementById('packages');
					if (pricingSection) {
						pricingSection.scrollIntoView({ behavior: 'smooth' });
					}
				}
			}
		});
	}
</script>
</body>
</html>
