<?php
/**
 * Admin template: Form Designer.
 *
 * Variables provided by FormDesigner::render():
 *   @var string $current_layout  Active layout slug (inline|stacked|card).
 *   @var string $current_amounts Comma-separated preset amounts string.
 *   @var int    $current_goal    Goal amount in major currency unit.
 *   @var string $currency        ISO currency code.
 *
 * @package Donatico
 */

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

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

<div class="wrap donatico-wrap">
	<h1><?php esc_html_e( 'Form Designer', 'donatico' ); ?></h1>
	<p class="description">
		<?php esc_html_e( 'Adjust the form appearance. Changes are saved to the same options as the Form settings tab.', 'donatico' ); ?>
	</p>
	<hr class="wp-header-end">

	<div class="donatico-designer-layout">

		<?php /* ---- Controls panel ---- */ ?>
		<div class="donatico-designer-controls">
			<div class="donatico-card">
				<h2 class="donatico-card-title"><?php esc_html_e( 'Layout', 'donatico' ); ?></h2>

				<div class="donatico-layout-picker">
					<?php
					$layouts = array(
						'inline'  => array(
							'label' => __( 'Inline', 'donatico' ),
							'desc'  => __( 'Compact single-row form.', 'donatico' ),
						),
						'stacked' => array(
							'label' => __( 'Stacked', 'donatico' ),
							'desc'  => __( 'Full-width stacked fields.', 'donatico' ),
						),
						'card'    => array(
							'label' => __( 'Card', 'donatico' ),
							'desc'  => __( 'Rounded card with shadow.', 'donatico' ),
						),
					);
					foreach ( $layouts as $slug => $info ) :
						$active = $current_layout === $slug ? ' donatico-layout-option--active' : '';
						?>
						<label class="donatico-layout-option<?php echo esc_attr( $active ); ?>">
							<input type="radio" name="donatico_designer_layout" value="<?php echo esc_attr( $slug ); ?>"
								<?php checked( $current_layout, $slug ); ?> class="donatico-layout-radio">
							<span class="donatico-layout-label"><?php echo esc_html( $info['label'] ); ?></span>
							<span class="donatico-layout-desc"><?php echo esc_html( $info['desc'] ); ?></span>
						</label>
					<?php endforeach; ?>
				</div>
			</div>

			<div class="donatico-card">
				<h2 class="donatico-card-title"><?php esc_html_e( 'Preset Amounts', 'donatico' ); ?></h2>
				<input type="text" id="donatico-designer-amounts"
					value="<?php echo esc_attr( $current_amounts ); ?>"
					class="regular-text"
					placeholder="5, 10, 25, 50, 100">
				<p class="description">
					<?php esc_html_e( 'Comma-separated values in the major currency unit.', 'donatico' ); ?>
				</p>
			</div>

			<div class="donatico-card">
				<h2 class="donatico-card-title"><?php esc_html_e( 'Goal Amount', 'donatico' ); ?></h2>
				<input type="number" id="donatico-designer-goal"
					value="<?php echo esc_attr( (string) $current_goal ); ?>"
					min="0" step="1" class="small-text">
				<span class="description"><?php echo esc_html( $currency ); ?></span>
				<p class="description">
					<?php esc_html_e( 'Set to 0 to hide the progress bar.', 'donatico' ); ?>
				</p>
			</div>

			<?php ( new \Donatico\Admin\UpsellPrompts() )->renderFormDesignerPrompt(); ?>

			<div class="donatico-designer-actions">
				<button type="button" id="donatico-preview-btn" class="button button-primary">
					<?php esc_html_e( 'Update Preview', 'donatico' ); ?>
				</button>
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=donatico-settings&tab=form' ) ); ?>"
				   class="button">
					<?php esc_html_e( 'Save Settings →', 'donatico' ); ?>
				</a>
			</div>
		</div>

		<?php /* ---- Live preview panel ---- */ ?>
		<div class="donatico-designer-preview-wrap">
			<h2 class="donatico-card-title"><?php esc_html_e( 'Preview', 'donatico' ); ?></h2>
			<div id="donatico-designer-preview" class="donatico-designer-preview">
				<?php
				// Render the initial preview inline.
				$this->renderPreviewHtml( $current_layout, $current_amounts, $current_goal );
				?>
			</div>
			<p class="description">
				<?php
				printf(
					/* translators: shortcode */
					esc_html__( 'Embed your form with %s', 'donatico' ),
					'<code>[donatico_form]</code>'
				);
				?>
			</p>
		</div>

	</div><!-- .donatico-designer-layout -->
</div>
