<?php
/**
 * Template Name: Basket
 *
 * Custom basket page with quantity controls, live totals,
 * donation prompt, and cross-sell. Basket state managed via
 * localStorage + REST API.
 *
 * @package Northfield_Theatre
 * @since 1.0.0
 */

get_header();
?>

<div class="basket-page container">
	<header class="page-header">
		<h1 class="page-header__title"><?php esc_html_e( 'Your Basket', 'northfield-theatre' ); ?></h1>
	</header>

	<!-- Loading state -->
	<div class="basket-loading" id="basket-loading">
		<div class="skeleton skeleton--basket">
			<div class="skeleton__line skeleton__line--wide"></div>
			<div class="skeleton__line skeleton__line--wide"></div>
			<div class="skeleton__line skeleton__line--medium"></div>
		</div>
	</div>

	<!-- Empty state -->
	<div class="basket-empty" id="basket-empty" hidden>
		<div class="basket-empty__icon" aria-hidden="true">
			<?php echo northfield_icon( 'basket', 48 ); ?>
		</div>
		<h2 class="basket-empty__title"><?php esc_html_e( 'Your basket is empty', 'northfield-theatre' ); ?></h2>
		<p class="basket-empty__text"><?php esc_html_e( 'Browse our programme and add tickets to your basket.', 'northfield-theatre' ); ?></p>
		<a href="<?php echo esc_url( home_url( '/whats-on/' ) ); ?>" class="btn btn--primary">
			<?php esc_html_e( "See what's on", 'northfield-theatre' ); ?>
		</a>
	</div>

	<!-- Basket with items -->
	<div class="basket-content" id="basket-content" hidden>
		<div class="basket-layout">
			<!-- Items column -->
			<div class="basket-items" id="basket-items">
				<!-- Populated by JavaScript -->
			</div>

			<!-- Order summary sidebar -->
			<aside class="basket-summary" id="basket-summary">
				<div class="basket-summary__inner">
					<h2 class="basket-summary__title"><?php esc_html_e( 'Order Summary', 'northfield-theatre' ); ?></h2>

					<div class="basket-summary__lines">
						<div class="basket-summary__line">
							<span><?php esc_html_e( 'Subtotal', 'northfield-theatre' ); ?></span>
							<span id="basket-subtotal">£0.00</span>
						</div>
						<div class="basket-summary__line">
							<span><?php esc_html_e( 'Booking fee', 'northfield-theatre' ); ?></span>
							<span><?php esc_html_e( 'Free', 'northfield-theatre' ); ?></span>
						</div>
					</div>

					<!-- Donation prompt -->
					<div class="basket-donation" id="basket-donation">
						<div class="basket-donation__header">
							<h3 class="basket-donation__title"><?php esc_html_e( 'Support Northfield Theatre', 'northfield-theatre' ); ?></h3>
						</div>
						<p class="basket-donation__text"><?php esc_html_e( 'Add a small donation to support our work bringing world-class theatre to Yorkshire.', 'northfield-theatre' ); ?></p>
						<div class="basket-donation__options">
							<button class="basket-donation__btn" data-amount="2">£2</button>
							<button class="basket-donation__btn" data-amount="5">£5</button>
							<button class="basket-donation__btn" data-amount="10">£10</button>
							<button class="basket-donation__btn basket-donation__btn--none basket-donation__btn--active" data-amount="0"><?php esc_html_e( 'No thanks', 'northfield-theatre' ); ?></button>
						</div>
					</div>

					<div class="basket-summary__total">
						<span><?php esc_html_e( 'Total', 'northfield-theatre' ); ?></span>
						<span id="basket-total" class="basket-summary__total-amount">£0.00</span>
					</div>

					<a href="<?php echo esc_url( home_url( '/checkout/' ) ); ?>" class="btn btn--primary btn--lg btn--full basket-summary__checkout" id="checkout-btn">
						<?php esc_html_e( 'Proceed to Checkout', 'northfield-theatre' ); ?>
					</a>

					<p class="basket-summary__note">
						<?php esc_html_e( 'Tickets will be held for 15 minutes.', 'northfield-theatre' ); ?>
					</p>
				</div>
			</aside>
		</div>
	</div>
</div>

<?php
get_footer();
