<?php
/**
 * Frontend template: Stacked donation form (default).
 *
 * Variables provided by FormRenderer::render():
 *   @var string $form_id         Unique DOM ID for this form instance.
 *   @var string $layout          'stacked'
 *   @var int[]  $amounts         Preset amounts in major currency units.
 *   @var string $currency        ISO currency code, e.g. 'USD'.
 *   @var string $currency_symbol '$', '€', etc.
 *   @var string $title           Optional heading.
 *   @var string $description     Optional description.
 *   @var string $button_text     Submit button label.
 *   @var bool   $show_message    Show optional message textarea.
 *   @var bool   $allow_anonymous Show anonymous checkbox.
 *   @var int    $goal            Goal in major currency unit (0 = no goal).
 *   @var int    $total_raised    Total raised in cents.
 *   @var int    $progress        Progress percentage 0-100.
 *   @var string $nonce           wp_create_nonce('donatico_checkout').
 *
 * @package Donatico
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Variables are set by FormRenderer::render() before this template is included.
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
?>

<div class="donatico-form donatico-form--stacked"
	 id="<?php echo esc_attr( $form_id ); ?>"
	 data-form-id="<?php echo esc_attr( $form_id ); ?>"
	 data-currency="<?php echo esc_attr( $currency ); ?>"
	 data-currency-symbol="<?php echo esc_attr( $currency_symbol ); ?>">

	<?php /* ---- Header ---- */ ?>
	<?php if ( $title || $description || $goal > 0 ) : ?>
	<div class="donatico-form-header">
		<?php if ( $title ) : ?>
			<h2 class="donatico-form-title"><?php echo esc_html( $title ); ?></h2>
		<?php endif; ?>
		<?php if ( $description ) : ?>
			<p class="donatico-form-description"><?php echo esc_html( $description ); ?></p>
		<?php endif; ?>
		<?php if ( $goal > 0 ) : ?>
		<div class="donatico-goal-progress" aria-label="<?php esc_attr_e( 'Donation goal progress', 'donatico' ); ?>">
			<div class="donatico-progress-track"
				 role="progressbar"
				 aria-valuenow="<?php echo esc_attr( (string) $progress ); ?>"
				 aria-valuemin="0"
				 aria-valuemax="100">
				<div class="donatico-progress-fill" style="transform:scaleX(<?php echo esc_attr( number_format( $progress / 100, 4 ) ); ?>)"></div>
			</div>
			<p class="donatico-goal-meta">
				<?php
				printf(
					/* translators: 1: amount raised with symbol, 2: goal amount with symbol, 3: percentage */
					esc_html__( '%1$s raised of %2$s goal · %3$s%%', 'donatico' ),
					'<strong>' . esc_html( $currency_symbol . number_format( $total_raised / 100, 2 ) ) . '</strong>',
					'<strong>' . esc_html( $currency_symbol . number_format( $goal, 2 ) ) . '</strong>',
					esc_html( (string) $progress )
				);
				?>
			</p>
		</div>
		<?php endif; ?>
	</div>
	<?php endif; ?>

	<?php /* ---- Form ---- */ ?>
	<form class="donatico-form-element"
		  id="<?php echo esc_attr( $form_id . '-form' ); ?>"
		  novalidate
		  aria-label="<?php esc_attr_e( 'Donation form', 'donatico' ); ?>">

		<?php /* ---- Amount selection ---- */ ?>
		<div class="donatico-amount-section">
			<p class="donatico-field-label" id="<?php echo esc_attr( $form_id . '-amount-label' ); ?>">
				<?php esc_html_e( 'Select an amount', 'donatico' ); ?>
			</p>
			<div class="donatico-amount-grid"
				 role="group"
				 aria-labelledby="<?php echo esc_attr( $form_id . '-amount-label' ); ?>">
				<?php foreach ( $amounts as $preset ) : ?>
				<button type="button"
						class="donatico-amount-btn"
						data-amount="<?php echo esc_attr( (string) $preset ); ?>"
						aria-pressed="false">
					<?php echo esc_html( $currency_symbol . $preset ); ?>
				</button>
				<?php endforeach; ?>
				<button type="button"
						class="donatico-amount-btn donatico-amount-btn--custom"
						aria-pressed="false">
					<?php esc_html_e( 'Custom', 'donatico' ); ?>
				</button>
			</div>

			<div class="donatico-custom-amount-wrap" hidden>
				<label for="<?php echo esc_attr( $form_id . '-custom' ); ?>" class="donatico-field-label">
					<?php esc_html_e( 'Enter amount', 'donatico' ); ?>
				</label>
				<div class="donatico-currency-input-wrap">
					<span class="donatico-currency-symbol" aria-hidden="true"><?php echo esc_html( $currency_symbol ); ?></span>
					<input type="number"
						   id="<?php echo esc_attr( $form_id . '-custom' ); ?>"
						   class="donatico-input donatico-custom-input"
						   min="1"
						   step="0.01"
						   placeholder="0.00"
						   aria-label="<?php esc_attr_e( 'Custom donation amount', 'donatico' ); ?>"
						   aria-describedby="<?php echo esc_attr( $form_id . '-amount-hint' ); ?>">
				</div>
				<p class="donatico-field-hint" id="<?php echo esc_attr( $form_id . '-amount-hint' ); ?>">
					<?php esc_html_e( 'Minimum 1', 'donatico' ); ?>
				</p>
			</div>
		</div>

		<?php
		/**
		 * Fires inside the donation form, after the amount selection
		 * and before donor info. Use to inject custom fields
		 * (frequency toggle, tier selector, campaign hidden inputs).
		 *
		 * @since 1.0.1
		 * @param array $context Form rendering context.
		 */
		do_action(
			'donatico_form_fields',
			array(
				'form_id'         => $form_id,
				'layout'          => 'stacked',
				'currency'        => $currency,
				'currency_symbol' => $currency_symbol,
				'amounts'         => $amounts,
				'goal'            => $goal,
			)
		);
		?>

		<?php /* ---- Donor info ---- */ ?>
		<div class="donatico-donor-section">

			<div class="donatico-field">
				<label for="<?php echo esc_attr( $form_id . '-name' ); ?>" class="donatico-field-label">
					<?php esc_html_e( 'Full Name', 'donatico' ); ?>
					<span class="donatico-required" aria-hidden="true">*</span>
				</label>
				<input type="text"
					   id="<?php echo esc_attr( $form_id . '-name' ); ?>"
					   class="donatico-input donatico-input-name"
					   required
					   aria-required="true"
					   autocomplete="name"
					   placeholder="<?php esc_attr_e( 'Your full name', 'donatico' ); ?>">
			</div>

			<div class="donatico-field">
				<label for="<?php echo esc_attr( $form_id . '-email' ); ?>" class="donatico-field-label">
					<?php esc_html_e( 'Email Address', 'donatico' ); ?>
					<span class="donatico-required" aria-hidden="true">*</span>
				</label>
				<input type="email"
					   id="<?php echo esc_attr( $form_id . '-email' ); ?>"
					   class="donatico-input donatico-input-email"
					   required
					   aria-required="true"
					   autocomplete="email"
					   placeholder="<?php esc_attr_e( 'you@example.com', 'donatico' ); ?>">
			</div>

			<?php if ( $show_message ) : ?>
			<div class="donatico-field">
				<label for="<?php echo esc_attr( $form_id . '-message' ); ?>" class="donatico-field-label">
					<?php esc_html_e( 'Leave a message', 'donatico' ); ?>
					<span class="donatico-optional"><?php esc_html_e( '(optional)', 'donatico' ); ?></span>
				</label>
				<textarea id="<?php echo esc_attr( $form_id . '-message' ); ?>"
						  class="donatico-textarea donatico-input-message"
						  rows="3"
						  placeholder="<?php esc_attr_e( 'Share your thoughts…', 'donatico' ); ?>"></textarea>
			</div>
			<?php endif; ?>

			<?php if ( $allow_anonymous ) : ?>
			<div class="donatico-field donatico-field--checkbox">
				<label class="donatico-checkbox-label">
					<input type="checkbox" class="donatico-input-anonymous" value="1">
					<?php esc_html_e( 'Make this donation anonymous', 'donatico' ); ?>
				</label>
			</div>
			<?php endif; ?>

		</div>

		<?php /* ---- Hidden fields ---- */ ?>
		<input type="hidden" class="donatico-nonce" value="<?php echo esc_attr( $nonce ); ?>">
		<input type="hidden" class="donatico-currency-field" value="<?php echo esc_attr( $currency ); ?>">

		<?php /* ---- Submit ---- */ ?>
		<div class="donatico-submit-section">
			<button type="submit" class="donatico-submit-btn" disabled aria-live="polite">
				<?php echo esc_html( $button_text ); ?>
			</button>
			<p class="donatico-secure-badge">
				<svg class="donatico-lock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" width="13" height="13">
					<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
				</svg>
				<?php esc_html_e( 'Secure payment via Stripe', 'donatico' ); ?>
			</p>
		</div>

		<?php /* ---- Error output ---- */ ?>
		<div class="donatico-form-error" hidden aria-live="assertive" role="alert"></div>

	</form>
</div>
