<?php
defined( 'ABSPATH' ) || exit;

function formulate_pricing_builder_page() {
	if ( ! current_user_can( 'manage_options' ) ) {
		wp_die( esc_html__( 'You do not have sufficient permissions.', 'formulate-pricing' ) );
	}

	$page    = isset( $_GET['page'] ) ? sanitize_key( wp_unslash( $_GET['page'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- read-only page slug; state change verified below.
	$form_id = isset( $_GET['form_id'] ) ? absint( wp_unslash( $_GET['form_id'] ) ) : 0; // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- read-only form id for edit view.

	// "Add New" — create a DB row immediately so every save is an update (same as editing).
	if ( ! $form_id && 'formulate-pricing-new' === $page ) {
		check_admin_referer( 'formulate_pricing_create_form' );

		$new_id = Formulate_Pricing_Form::create(
			array(
				'title'       => __( 'New Form', 'formulate-pricing' ),
				'form_config' => Formulate_Pricing_Form::default_config(),
			)
		);
		if ( $new_id ) {
			wp_safe_redirect( admin_url( 'admin.php?page=formulate-pricing-edit&form_id=' . $new_id ) );
			exit;
		}
		wp_die( esc_html__( 'Could not create form. Please try again.', 'formulate-pricing' ) );
	}

	$form   = null;
	$config = Formulate_Pricing_Form::default_config();

	if ( $form_id ) {
		$form = Formulate_Pricing_Form::get( $form_id );
		if ( $form ) {
			$config = $form->form_config;
		}
	}

	$builder_nonce = wp_create_nonce( 'formulate_pricing_builder_nonce' );
	$preview_nonce = wp_create_nonce( 'formulate_pricing_preview_' . $form_id );
	$preview_url   = admin_url( 'admin-ajax.php?action=formulate_pricing_preview_form&form_id=' . $form_id . '&nonce=' . $preview_nonce );

	// Enqueue builder assets
	wp_enqueue_style( 'wp-color-picker' );
	wp_enqueue_script( 'wp-color-picker' );
	wp_enqueue_style(
		'hugeicons',
		FORMULATE_PRICING_URL . 'assets/vendor/hugeicons/hgi-stroke-rounded.css',
		array(),
		FORMULATE_PRICING_VERSION
	);
	// Select2 – searchable product picker (bundled locally)
	wp_enqueue_style(
		'select2',
		FORMULATE_PRICING_URL . 'assets/vendor/select2/css/select2.css',
		array(),
		'4.1.0'
	);
	wp_enqueue_script(
		'select2',
		FORMULATE_PRICING_URL . 'assets/vendor/select2/js/select2.js',
		array( 'jquery' ),
		'4.1.0',
		true
	);
	wp_enqueue_style(
		'formulate-pricing-builder',
		FORMULATE_PRICING_URL . 'assets/css/builder.css',
		array( 'wp-color-picker', 'hugeicons', 'select2' ),
		FORMULATE_PRICING_VERSION
	);
	wp_enqueue_script( 'jquery-ui-sortable' );
	wp_enqueue_script(
		'sortablejs',
		FORMULATE_PRICING_URL . 'assets/vendor/sortablejs/Sortable.js',
		array(),
		'1.15.7',
		true
	);
	wp_enqueue_script(
		'formulate-pricing-builder',
		FORMULATE_PRICING_URL . 'assets/js/form-builder.js',
		array( 'jquery', 'sortablejs' ),
		FORMULATE_PRICING_VERSION,
		true
	);

	wp_localize_script(
		'formulate-pricing-builder',
		'formulatePricingBuilder',
		array(
			'ajaxUrl'       => admin_url( 'admin-ajax.php' ),
			'nonce'         => $builder_nonce,
			'formId'        => $form_id,
			'formTitle'     => $form ? $form->title : __( 'New Form', 'formulate-pricing' ),
			'formConfig'    => $config,
			'previewUrl'    => $preview_url,
			'previewNonce'  => $preview_nonce,
			'editBaseUrl'   => admin_url( 'admin.php?page=formulate-pricing-edit&form_id=' ),
		'wcProducts'    => formulate_pricing_get_wc_products(),
		'linkedProduct' => formulate_pricing_get_linked_product( $config ),
		'strings'       => array(
				'saved'        => __( 'Form saved.', 'formulate-pricing' ),
				'saving'       => __( 'Saving…', 'formulate-pricing' ),
				'save'         => __( 'Save Form', 'formulate-pricing' ),
				'unsaved'      => __( 'Unsaved changes', 'formulate-pricing' ),
				'confirmLeave' => __( 'You have unsaved changes. Leave?', 'formulate-pricing' ),
				'addOption'    => __( 'Add Option', 'formulate-pricing' ),
				'optionLabel'  => __( 'Option label', 'formulate-pricing' ),
				'optionValue'  => __( 'Value', 'formulate-pricing' ),
				'optionPrice'  => __( 'Price', 'formulate-pricing' ),
				'optionIcon'   => __( 'Icon', 'formulate-pricing' ),
				'optionDesc'   => __( 'Description', 'formulate-pricing' ),
			),
		)
	);
	?>
	<div id="bf-builder-app" class="bf-builder-app">

		<!-- ── Top Bar ──────────────────────────────────────────────────────── -->
		<div class="bf-builder-topbar">
			<div class="bf-topbar-left">
			<a href="<?php echo esc_url( admin_url( 'admin.php?page=formulate-pricing' ) ); ?>" class="bf-back-btn" title="<?php esc_attr_e( 'Back to forms', 'formulate-pricing' ); ?>">
				<i class="hgi-stroke hgi-arrow-left-02"></i>
			</a>
			<div class="bf-brand-chip">
				<i class="hgi-stroke hgi-layout-grid" style="font-size:15px"></i>
					<?php esc_html_e( 'Form Builder', 'formulate-pricing' ); ?>
				</div>
			</div>

			<div class="bf-topbar-center">
				<div class="bf-form-title-wrap">
					<input type="text" id="bf-form-title" class="bf-form-title-input"
						   value="<?php echo esc_attr( $form ? $form->title : __( 'New Form', 'formulate-pricing' ) ); ?>"
						   placeholder="<?php esc_attr_e( 'Form name…', 'formulate-pricing' ); ?>">
					<span class="bf-unsaved-dot" style="display:none" title="<?php esc_attr_e( 'Unsaved changes', 'formulate-pricing' ); ?>"></span>
				</div>
			</div>

			<div class="bf-topbar-right">
				<span class="bf-save-status"></span>

		<button id="bf-preview-btn" class="bf-topbar-btn bf-preview-btn"
				data-preview-base="<?php echo esc_attr( admin_url( 'admin-ajax.php' ) ); ?>"
				data-preview-nonce="<?php echo esc_attr( $preview_nonce ); ?>">
			<i class="hgi-stroke hgi-eye"></i>
			<?php esc_html_e( 'Preview', 'formulate-pricing' ); ?>
		</button>

			<button id="bf-save-btn" class="bf-topbar-btn bf-save-btn">
				<i class="hgi-stroke hgi-floppy-disk"></i>
				<?php esc_html_e( 'Save Form', 'formulate-pricing' ); ?>
			</button>

			<?php if ( $form_id ) : ?>
			<div class="bf-shortcode-pill">
				<code id="bf-shortcode-display">[formulate_pricing_form id="<?php echo esc_html( $form_id ); ?>"]</code>
				<button type="button" class="bf-copy-sc" data-sc="<?php echo esc_attr( '[formulate_pricing_form id="' . $form_id . '"]' ); ?>" title="<?php esc_attr_e( 'Copy shortcode', 'formulate-pricing' ); ?>">
					<i class="hgi-stroke hgi-copy-01"></i>
				</button>
			</div>
			<?php endif; ?>
			</div>
		</div>

		<!-- ── Builder Layout ───────────────────────────────────────────────── -->
		<div class="bf-builder-layout">

			<!-- Left: Field Types Panel -->
			<div class="bf-panel bf-fields-panel">
				<div class="bf-panel-header">
					<h3><?php esc_html_e( 'Fields', 'formulate-pricing' ); ?></h3>
					<input type="text" id="bf-field-search" placeholder="<?php esc_attr_e( 'Search fields…', 'formulate-pricing' ); ?>" class="bf-field-search-input">
				</div>
				<div class="bf-panel-inner">

					<?php
					$field_groups = array(
						array(
							'label'  => __( 'Basic Fields', 'formulate-pricing' ),
					'fields' => array(
							array( 'type' => 'text',     'label' => __( 'Text',     'formulate-pricing' ), 'icon' => 'hgi-text-font' ),
							array( 'type' => 'email',    'label' => __( 'Email',    'formulate-pricing' ), 'icon' => 'hgi-mail-01' ),
							array( 'type' => 'phone',    'label' => __( 'Phone',    'formulate-pricing' ), 'icon' => 'hgi-call' ),
							array( 'type' => 'number',   'label' => __( 'Number',   'formulate-pricing' ), 'icon' => 'hgi-text-number-sign' ),
							array( 'type' => 'textarea', 'label' => __( 'Textarea', 'formulate-pricing' ), 'icon' => 'hgi-align-box-bottom-left' ),
							array( 'type' => 'url',      'label' => __( 'URL',      'formulate-pricing' ), 'icon' => 'hgi-link-01' ),
							array( 'type' => 'date',     'label' => __( 'Date',     'formulate-pricing' ), 'icon' => 'hgi-calendar-03' ),
							array( 'type' => 'time',     'label' => __( 'Time',     'formulate-pricing' ), 'icon' => 'hgi-clock-01' ),
							array( 'type' => 'hidden',   'label' => __( 'Hidden',   'formulate-pricing' ), 'icon' => 'hgi-view-off' ),
						),
					),
					array(
						'label'  => __( 'Choice Fields', 'formulate-pricing' ),
						'fields' => array(
							array( 'type' => 'radio',       'label' => __( 'Single Choice',   'formulate-pricing' ), 'icon' => 'hgi-radio' ),
							array( 'type' => 'checkbox',    'label' => __( 'Multiple Choice', 'formulate-pricing' ), 'icon' => 'hgi-checkmark-square-02' ),
							array( 'type' => 'select',      'label' => __( 'Dropdown',        'formulate-pricing' ), 'icon' => 'hgi-menu-square' ),
							array( 'type' => 'card_choice', 'label' => __( 'Card Choice',     'formulate-pricing' ), 'icon' => 'hgi-grid-view' ),
						),
					),
					array(
						'label'  => __( 'Layout', 'formulate-pricing' ),
						'fields' => array(
							array( 'type' => 'heading',   'label' => __( 'Heading',   'formulate-pricing' ), 'icon' => 'hgi-heading' ),
							array( 'type' => 'paragraph', 'label' => __( 'Paragraph', 'formulate-pricing' ), 'icon' => 'hgi-paragraph' ),
							array( 'type' => 'divider',   'label' => __( 'Divider',   'formulate-pricing' ), 'icon' => 'hgi-solid-line-01' ),
						),
					),
					);

					foreach ( $field_groups as $group ) :
					?>
					<div class="bf-field-group" data-group>
						<div class="bf-field-group-title"><?php echo esc_html( $group['label'] ); ?></div>
						<div class="bf-field-types-grid">
							<?php foreach ( $group['fields'] as $ft ) : ?>
						<button class="bf-field-type-btn"
								data-type="<?php echo esc_attr( $ft['type'] ); ?>"
								data-label="<?php echo esc_attr( $ft['label'] ); ?>"
								title="<?php echo esc_attr( __( 'Add', 'formulate-pricing' ) . ' ' . $ft['label'] ); ?>">
							<i class="hgi-stroke <?php echo esc_attr( $ft['icon'] ); ?> bf-ft-icon"></i>
							<span class="bf-ft-label"><?php echo esc_html( $ft['label'] ); ?></span>
						</button>
							<?php endforeach; ?>
						</div>
					</div>
					<?php endforeach; ?>
				</div>
			</div>

			<!-- Center: Canvas -->
			<div class="bf-panel bf-canvas-panel">
				<!-- Step tabs bar -->
				<div class="bf-steps-nav">
					<div class="bf-steps-tabs" id="bf-steps-tabs"><!-- JS renders tabs --></div>
				<button class="bf-add-step-btn" id="bf-add-step-btn">
					<i class="hgi-stroke hgi-plus-sign"></i>
					<?php esc_html_e( 'Add Step', 'formulate-pricing' ); ?>
				</button>
				</div>

				<!-- Canvas scroll area -->
				<div class="bf-canvas-scroll" id="bf-canvas">

					<!-- Empty state -->
					<div class="bf-canvas-empty" id="bf-canvas-empty">
						<div class="bf-canvas-empty-art">
							<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
								<rect width="80" height="80" rx="16" fill="#EEF2FF"/>
								<rect x="16" y="22" width="48" height="10" rx="5" fill="#C7D2FE"/>
								<rect x="16" y="38" width="22" height="8" rx="4" fill="#A5B4FC"/>
								<rect x="42" y="38" width="22" height="8" rx="4" fill="#A5B4FC"/>
								<rect x="16" y="52" width="48" height="8" rx="4" fill="#C7D2FE"/>
							</svg>
						</div>
						<h3><?php esc_html_e( 'Start building your form', 'formulate-pricing' ); ?></h3>
						<p><?php esc_html_e( 'Click any field type on the left panel to add it here.', 'formulate-pricing' ); ?></p>
						<p class="bf-canvas-empty-hint"><?php esc_html_e( 'Drag to reorder · Click a field to edit its settings', 'formulate-pricing' ); ?></p>
					</div>

					<!-- Form page preview (white card) -->
					<div class="bf-canvas-page" id="bf-canvas-page" style="display:none">
						<div class="bf-canvas-fields-wrap" id="bf-canvas-fields-wrap">
							<!-- Field cards rendered by JS -->
						</div>
					</div>

				</div>
			</div>

		<!-- Right: Settings Panel (single scrollable accordion – no tabs) -->
		<div class="bf-panel bf-settings-panel" id="bf-settings-panel">
			<div class="bf-settings-body">

			<!-- ── Accordion: Field Settings ─────────────────────────────────── -->
			<div class="bf-acc-section" id="bf-acc-field">
				<button class="bf-acc-header" type="button" data-acc="field">
					<i class="hgi-stroke hgi-cursor-01"></i>
					<span><?php esc_html_e( 'Field Settings', 'formulate-pricing' ); ?></span>
					<i class="hgi-stroke hgi-arrow-down-01 bf-acc-chevron"></i>
				</button>
				<div class="bf-acc-body" id="bf-spane-field">
					<div class="bf-no-field-selected">
						<i class="hgi-stroke hgi-cursor-01" style="font-size:36px;color:#a5b4fc;display:block;margin-bottom:10px"></i>
						<p><?php esc_html_e( 'Click a field in the canvas to edit its settings.', 'formulate-pricing' ); ?></p>
					</div>
					<div class="bf-field-settings-inner" style="display:none"></div>
				</div>
			</div>

			<!-- ── Accordion: Form Settings ──────────────────────────────────── -->
			<div class="bf-acc-section" id="bf-acc-form">
				<button class="bf-acc-header" type="button" data-acc="form">
					<i class="hgi-stroke hgi-settings-01"></i>
					<span><?php esc_html_e( 'Form Settings', 'formulate-pricing' ); ?></span>
					<i class="hgi-stroke hgi-arrow-down-01 bf-acc-chevron"></i>
				</button>
				<div class="bf-acc-body" id="bf-spane-form">
					<div class="bf-settings-section">
						<label class="bf-sl"><?php esc_html_e( 'Submit Button Text', 'formulate-pricing' ); ?>
							<input type="text" data-setting="submit_text" class="bf-sinput" placeholder="Submit">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Next Button Text', 'formulate-pricing' ); ?>
							<input type="text" data-setting="next_text" class="bf-sinput" placeholder="Next">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Previous Button Text', 'formulate-pricing' ); ?>
							<input type="text" data-setting="prev_text" class="bf-sinput" placeholder="Previous">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Success Message', 'formulate-pricing' ); ?>
							<textarea data-setting="success_message" class="bf-sinput" rows="3" placeholder="Thank you!"></textarea>
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Redirect URL (optional)', 'formulate-pricing' ); ?>
							<input type="url" data-setting="redirect_url" class="bf-sinput" placeholder="https://…">
						</label>
					</div>
					<div class="bf-settings-section">
						<div class="bf-section-heading"><?php esc_html_e( 'Multi-Step', 'formulate-pricing' ); ?></div>
						<label class="bf-sl bf-sl-toggle">
							<span><?php esc_html_e( 'Enable Multi-Step', 'formulate-pricing' ); ?></span>
							<input type="checkbox" data-setting="multi_step" class="bf-stoggle">
						</label>
						<label class="bf-sl bf-sl-toggle">
							<span><?php esc_html_e( 'Show Progress Bar', 'formulate-pricing' ); ?></span>
							<input type="checkbox" data-setting="show_progress" class="bf-stoggle">
						</label>
					</div>
				</div>
			</div>

		<!-- ── Accordion: Style ───────────────────────────────────────────── -->
		<div class="bf-acc-section" id="bf-acc-style">
			<button class="bf-acc-header" type="button" data-acc="style">
				<i class="hgi-stroke hgi-paint-board"></i>
				<span><?php esc_html_e( 'Styling', 'formulate-pricing' ); ?></span>
				<i class="hgi-stroke hgi-arrow-down-01 bf-acc-chevron"></i>
			</button>
		<div class="bf-acc-body" id="bf-spane-style">

				<!-- ── Presets ── -->
				<div class="bf-settings-section">
					<div class="bf-section-heading"><?php esc_html_e( 'Style Preset', 'formulate-pricing' ); ?></div>
					<div class="bf-preset-grid" id="bf-preset-grid">
						<?php
						$presets = array(
							array( 'key' => 'classic',      'label' => 'Classic',      'desc' => 'Clean borders' ),
							array( 'key' => 'modern',       'label' => 'Modern',       'desc' => 'Rounded & filled' ),
							array( 'key' => 'professional', 'label' => 'Professional', 'desc' => 'Sharp & minimal' ),
							array( 'key' => 'outline',      'label' => 'Outline',      'desc' => 'Border only' ),
							array( 'key' => 'soft',         'label' => 'Soft',         'desc' => 'Pastel rounded' ),
						);
						foreach ( $presets as $p ) :
						?>
						<button class="bf-preset-tile" data-preset="<?php echo esc_attr( $p['key'] ); ?>" type="button">
							<div class="bf-pt-preview bf-pt-<?php echo esc_attr( $p['key'] ); ?>">
								<div class="bf-pt-line bf-pt-label"></div>
								<div class="bf-pt-line bf-pt-input"></div>
								<div class="bf-pt-line bf-pt-label"></div>
								<div class="bf-pt-half">
									<div class="bf-pt-line bf-pt-input"></div>
									<div class="bf-pt-line bf-pt-input"></div>
								</div>
								<div class="bf-pt-line bf-pt-btn"></div>
							</div>
							<span class="bf-pt-name"><?php echo esc_html( $p['label'] ); ?></span>
							<span class="bf-pt-desc"><?php echo esc_html( $p['desc'] ); ?></span>
						</button>
						<?php endforeach; ?>
					</div>
				</div>

				<!-- ── Page background ── -->
				<div class="bf-settings-section">
					<div class="bf-section-heading"><?php esc_html_e( 'Page Background', 'formulate-pricing' ); ?></div>
					<div class="bf-bg-context-toggle">
					<button class="bf-bg-ctx-btn active" data-bg="light" type="button">
						<i class="hgi-stroke hgi-sun-01"></i>
						<?php esc_html_e( 'Light', 'formulate-pricing' ); ?>
					</button>
					<button class="bf-bg-ctx-btn" data-bg="dark" type="button">
						<i class="hgi-stroke hgi-moon-02"></i>
						<?php esc_html_e( 'Dark', 'formulate-pricing' ); ?>
					</button>
					</div>
					<p class="bf-help-note" style="margin-top:8px"><?php esc_html_e( 'Adapts all form colors to suit your page background.', 'formulate-pricing' ); ?></p>
				</div>

				<!-- ── Primary color ── -->
				<div class="bf-settings-section">
					<div class="bf-section-heading"><?php esc_html_e( 'Primary Color', 'formulate-pricing' ); ?></div>
					<div class="bf-primary-color-row">
						<input type="color" id="bf-primary-color-picker" class="bf-primary-swatch" value="#2563eb">
						<input type="text"  id="bf-primary-color-hex"    class="bf-primary-hex" value="#2563eb" maxlength="7" placeholder="#2563eb" spellcheck="false">
					</div>
					<div class="bf-color-swatches">
						<?php
						$swatches = array( '#2563eb','#7c3aed','#db2777','#059669','#d97706','#dc2626','#0891b2','#374151' );
						foreach ( $swatches as $sw ) :
						?>
						<button class="bf-color-swatch" type="button" data-color="<?php echo esc_attr( $sw ); ?>"
								style="background:<?php echo esc_attr( $sw ); ?>" title="<?php echo esc_attr( $sw ); ?>"></button>
						<?php endforeach; ?>
					</div>
				</div>

				<!-- ── Advanced (collapsed) ── -->
				<details class="bf-advanced-details">
				<summary class="bf-section-heading bf-advanced-summary">
					<?php esc_html_e( 'Advanced', 'formulate-pricing' ); ?>
					<i class="hgi-stroke hgi-arrow-down-01 bf-adv-chevron"></i>
				</summary>

					<div class="bf-settings-section" style="border-top:none">
						<div class="bf-section-heading" style="font-size:10px;margin-bottom:6px"><?php esc_html_e( 'Colors', 'formulate-pricing' ); ?></div>
						<label class="bf-sl bf-sl-color"><?php esc_html_e( 'Form Background', 'formulate-pricing' ); ?>
							<input type="color" data-style="bg_color" class="bf-scolor" value="#ffffff">
						</label>
						<label class="bf-sl bf-sl-color"><?php esc_html_e( 'Text Color', 'formulate-pricing' ); ?>
							<input type="color" data-style="text_color" class="bf-scolor" value="#1f2937">
						</label>
						<label class="bf-sl bf-sl-color"><?php esc_html_e( 'Label Color', 'formulate-pricing' ); ?>
							<input type="color" data-style="label_color" class="bf-scolor" value="#374151">
						</label>
						<label class="bf-sl bf-sl-color"><?php esc_html_e( 'Input Background', 'formulate-pricing' ); ?>
							<input type="color" data-style="input_bg" class="bf-scolor" value="#f9fafb">
						</label>
						<label class="bf-sl bf-sl-color"><?php esc_html_e( 'Input Border', 'formulate-pricing' ); ?>
							<input type="color" data-style="input_border" class="bf-scolor" value="#d1d5db">
						</label>
						<label class="bf-sl bf-sl-color"><?php esc_html_e( 'Button Text Color', 'formulate-pricing' ); ?>
							<input type="color" data-style="button_text_color" class="bf-scolor" value="#ffffff">
						</label>
					</div>

					<div class="bf-settings-section" style="border-top:none">
						<div class="bf-section-heading" style="font-size:10px;margin-bottom:6px"><?php esc_html_e( 'Spacing & Typography', 'formulate-pricing' ); ?></div>
						<label class="bf-sl"><?php esc_html_e( 'Field Border Radius (px)', 'formulate-pricing' ); ?>
							<input type="number" data-style="border_radius" class="bf-sinput" min="0" max="50" value="8">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Button Border Radius (px)', 'formulate-pricing' ); ?>
							<input type="number" data-style="button_border_radius" class="bf-sinput" min="0" max="50" value="8">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Font Size (px)', 'formulate-pricing' ); ?>
							<input type="number" data-style="font_size" class="bf-sinput" min="10" max="24" value="15">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Form Width (%)', 'formulate-pricing' ); ?>
							<input type="number" data-style="form_width" class="bf-sinput" min="30" max="100" value="100">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Form Padding (px)', 'formulate-pricing' ); ?>
							<input type="number" data-style="form_padding" class="bf-sinput" min="0" max="80" value="24">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Field Gap (px)', 'formulate-pricing' ); ?>
							<input type="number" data-style="field_gap" class="bf-sinput" min="0" max="60" value="16">
						</label>
					</div>
				</details>

				<!-- Hidden inputs carrying preset / bg context for save -->
				<input type="hidden" data-style="active_preset"  class="bf-scolor" value="classic">
				<input type="hidden" data-style="bg_context"     class="bf-scolor" value="light">
				<input type="hidden" data-style="primary_color"  class="bf-scolor" value="#2563eb">
				<input type="hidden" data-style="button_bg"      class="bf-scolor" value="#2563eb">
				<input type="hidden" data-style="card_bg"        class="bf-scolor" value="#f9fafb">
				<input type="hidden" data-style="card_border"    class="bf-scolor" value="#d1d5db">
				<input type="hidden" data-style="card_selected_bg"     class="bf-scolor" value="#eff6ff">
				<input type="hidden" data-style="card_selected_border" class="bf-scolor" value="#2563eb">

		</div><!-- /.bf-acc-body #bf-spane-style -->
		</div><!-- /.bf-acc-section #bf-acc-style -->

		<!-- ── Accordion: WooCommerce ────────────────────────────────────── -->
		<div class="bf-acc-section" id="bf-acc-wc">
			<button class="bf-acc-header" type="button" data-acc="wc">
				<i class="hgi-stroke hgi-shopping-cart-01"></i>
				<span><?php esc_html_e( 'WooCommerce', 'formulate-pricing' ); ?></span>
				<i class="hgi-stroke hgi-arrow-down-01 bf-acc-chevron"></i>
			</button>
			<div class="bf-acc-body" id="bf-spane-wc">
					<div class="bf-settings-section">
						<div class="bf-section-heading"><?php esc_html_e( 'WooCommerce Checkout', 'formulate-pricing' ); ?></div>

						<label class="bf-sl bf-sl-toggle">
							<span><?php esc_html_e( 'Enable WooCommerce Checkout', 'formulate-pricing' ); ?></span>
							<input type="checkbox" data-setting="wc_enabled" class="bf-stoggle" id="bf-wc-enabled-toggle">
						</label>

						<!-- Product section – only shown when WC is enabled -->
						<div id="bf-wc-product-section" style="display:none">

							<!-- No product linked -->
							<div id="bf-wc-no-product">
								<p class="bf-help-note" style="margin-bottom:10px">
									<?php esc_html_e( 'Create a dedicated product for this form. It will be published but hidden from your shop catalog — customers reach it only through this form.', 'formulate-pricing' ); ?>
								</p>
							<button type="button" id="bf-create-product-btn" class="bf-create-product-btn">
								<i class="hgi-stroke hgi-package-add"></i>
								<?php esc_html_e( 'Create Product for This Form', 'formulate-pricing' ); ?>
							</button>
							<p class="bf-help-note" style="margin-top:10px"><?php esc_html_e( 'Or link an existing product:', 'formulate-pricing' ); ?></p>
							<div class="bf-manual-product-row">
								<select id="bf-manual-product-select" class="bf-wc-product-select" style="width:100%">
									<option value=""><?php esc_html_e( 'Search products…', 'formulate-pricing' ); ?></option>
									<?php foreach ( formulate_pricing_get_wc_products() as $pid => $pname ) : ?>
									<option value="<?php echo esc_attr( $pid ); ?>"><?php echo esc_html( $pname ); ?> &nbsp;#<?php echo esc_html( $pid ); ?></option>
									<?php endforeach; ?>
								</select>
								<button type="button" id="bf-set-manual-product" class="bf-btn-sm"><?php esc_html_e( 'Link', 'formulate-pricing' ); ?></button>
							</div>
							</div>

							<!-- Product is linked -->
							<div id="bf-wc-linked-product" style="display:none">
								<div class="bf-product-card">
								<div class="bf-product-card-icon">
									<i class="hgi-stroke hgi-package" style="font-size:18px"></i>
								</div>
									<div class="bf-product-card-info">
										<strong id="bf-product-name">—</strong>
										<span class="bf-product-badge"><?php esc_html_e( 'Hidden from catalog', 'formulate-pricing' ); ?></span>
									</div>
								<a id="bf-product-edit-link" href="#" target="_blank" class="bf-product-edit-btn" title="<?php esc_attr_e( 'Edit in WooCommerce', 'formulate-pricing' ); ?>">
									<i class="hgi-stroke hgi-square-arrow-up-right"></i>
								</a>
								</div>
								<button type="button" id="bf-unlink-product-btn" class="bf-btn-link-sm"><?php esc_html_e( '↩ Use a different product', 'formulate-pricing' ); ?></button>
							</div>

							<!-- Hidden input consumed by save() -->
							<input type="hidden" data-setting="wc_product_id" id="bf-wc-product-id-input" value="0">

						</div><!-- /#bf-wc-product-section -->

						<p class="bf-help-note" style="margin-top:10px">
							<?php esc_html_e( 'When enabled, submissions add to cart with your form field labels and option prices, then redirect to WooCommerce checkout.', 'formulate-pricing' ); ?>
						</p>
					</div>
			</div><!-- /.bf-acc-body #bf-spane-wc -->
		</div><!-- /.bf-acc-section #bf-acc-wc -->

		<!-- ── Accordion: Notifications ──────────────────────────────────── -->
		<div class="bf-acc-section" id="bf-acc-notify">
			<button class="bf-acc-header" type="button" data-acc="notify">
				<i class="hgi-stroke hgi-notification-02"></i>
				<span><?php esc_html_e( 'Notifications', 'formulate-pricing' ); ?></span>
				<i class="hgi-stroke hgi-arrow-down-01 bf-acc-chevron"></i>
			</button>
			<div class="bf-acc-body" id="bf-spane-notify">

				<!-- Admin notification -->
				<div class="bf-settings-section">
					<div class="bf-section-heading" style="display:flex;align-items:center;gap:8px">
						<i class="hgi-stroke hgi-mail-send-01" style="color:#6366f1"></i>
						<?php esc_html_e( 'Admin Notification', 'formulate-pricing' ); ?>
					</div>

					<label class="bf-sl bf-sl-toggle">
						<span><?php esc_html_e( 'Send email on each submission', 'formulate-pricing' ); ?></span>
						<input type="checkbox" data-notif="admin_enabled" class="bf-stoggle" id="bf-notif-admin-toggle">
					</label>

					<div id="bf-notif-admin-fields" style="display:none">
						<label class="bf-sl"><?php esc_html_e( 'To (email address)', 'formulate-pricing' ); ?>
							<input type="email" data-notif="admin_to" class="bf-sinput"
								   placeholder="<?php echo esc_attr( get_option( 'admin_email' ) ); ?>">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Subject', 'formulate-pricing' ); ?>
							<input type="text" data-notif="admin_subject" class="bf-sinput"
								   placeholder="<?php esc_attr_e( 'New submission: {form_title}', 'formulate-pricing' ); ?>">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Reply-To field', 'formulate-pricing' ); ?>
							<select data-notif="admin_reply_to" class="bf-sinput" id="bf-notif-admin-replyto">
								<option value=""><?php esc_html_e( '— None —', 'formulate-pricing' ); ?></option>
							</select>
						</label>
						<p class="bf-help-note"><?php esc_html_e( 'Use {form_title} and {field_label} tags in the subject. The full submission is always included in the email body.', 'formulate-pricing' ); ?></p>
					</div>
				</div>

				<!-- Submitter notification -->
				<div class="bf-settings-section">
					<div class="bf-section-heading" style="display:flex;align-items:center;gap:8px">
						<i class="hgi-stroke hgi-user-account" style="color:#6366f1"></i>
						<?php esc_html_e( 'Submitter Notification', 'formulate-pricing' ); ?>
					</div>

					<label class="bf-sl bf-sl-toggle">
						<span><?php esc_html_e( 'Send confirmation email to submitter', 'formulate-pricing' ); ?></span>
						<input type="checkbox" data-notif="user_enabled" class="bf-stoggle" id="bf-notif-user-toggle">
					</label>

					<div id="bf-notif-user-fields" style="display:none">
						<label class="bf-sl"><?php esc_html_e( 'Email field', 'formulate-pricing' ); ?>
							<select data-notif="user_email_field" class="bf-sinput" id="bf-notif-user-email-field">
								<option value=""><?php esc_html_e( '— Select email field —', 'formulate-pricing' ); ?></option>
							</select>
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Subject', 'formulate-pricing' ); ?>
							<input type="text" data-notif="user_subject" class="bf-sinput"
								   placeholder="<?php esc_attr_e( 'Thank you for your submission', 'formulate-pricing' ); ?>">
						</label>
						<label class="bf-sl"><?php esc_html_e( 'Message', 'formulate-pricing' ); ?>
							<textarea data-notif="user_message" class="bf-sinput" rows="5"
									  placeholder="<?php esc_attr_e( 'Hi,\n\nWe have received your submission…', 'formulate-pricing' ); ?>"></textarea>
						</label>
						<p class="bf-help-note"><?php esc_html_e( 'The submitter\'s email is read from the selected field. Use {form_title} and {field_label} tags in subject or message.', 'formulate-pricing' ); ?></p>
					</div>
				</div>

			</div><!-- /.bf-acc-body #bf-spane-notify -->
		</div><!-- /.bf-acc-section #bf-acc-notify -->

		</div><!-- /.bf-settings-body -->
		</div><!-- /.bf-settings-panel -->

	</div><!-- /.bf-builder-layout -->

	<!-- ── Preview Overlay ──────────────────────────────────────────────── -->
	<div id="bf-preview-overlay" class="bf-preview-overlay" style="display:none" aria-modal="true" role="dialog" aria-label="<?php esc_attr_e( 'Form Preview', 'formulate-pricing' ); ?>">

		<div class="bf-preview-topbar">
			<div class="bf-preview-topbar-left">
			<div class="bf-preview-label">
				<i class="hgi-stroke hgi-eye"></i>
				<?php esc_html_e( 'Preview', 'formulate-pricing' ); ?>
			</div>
				<span class="bf-preview-form-name" id="bf-preview-form-name"></span>
			</div>

			<div class="bf-preview-device-switcher">
			<button class="bf-dev-btn active" data-width="100%" data-device="desktop" title="<?php esc_attr_e( 'Desktop', 'formulate-pricing' ); ?>">
				<i class="hgi-stroke hgi-computer"></i>
			</button>
			<button class="bf-dev-btn" data-width="768px" data-device="tablet" title="<?php esc_attr_e( 'Tablet', 'formulate-pricing' ); ?>">
				<i class="hgi-stroke hgi-tablet-01"></i>
			</button>
			<button class="bf-dev-btn" data-width="390px" data-device="mobile" title="<?php esc_attr_e( 'Mobile', 'formulate-pricing' ); ?>">
				<i class="hgi-stroke hgi-smart-phone-01"></i>
			</button>
			</div>

			<div class="bf-preview-topbar-right">
			<a id="bf-preview-open-tab" href="#" target="_blank" class="bf-preview-open-btn" title="<?php esc_attr_e( 'Open in new tab', 'formulate-pricing' ); ?>">
				<i class="hgi-stroke hgi-square-arrow-up-right"></i>
				<?php esc_html_e( 'New Tab', 'formulate-pricing' ); ?>
			</a>
			<button id="bf-preview-close" class="bf-preview-close-btn" title="<?php esc_attr_e( 'Close preview', 'formulate-pricing' ); ?>">
				<i class="hgi-stroke hgi-cancel-01"></i>
				<?php esc_html_e( 'Close', 'formulate-pricing' ); ?>
			</button>
			</div>
		</div>

		<div class="bf-preview-body" id="bf-preview-body">
			<div class="bf-preview-iframe-wrap" id="bf-preview-iframe-wrap">
			<div class="bf-preview-loading" id="bf-preview-loading">
				<i class="hgi-stroke hgi-loading-03 bf-spin" style="font-size:32px;color:#6366f1"></i>
				<span><?php esc_html_e( 'Loading preview…', 'formulate-pricing' ); ?></span>
			</div>
				<iframe id="bf-preview-iframe" class="bf-preview-iframe" src="about:blank" frameborder="0" allowfullscreen style="display:none"></iframe>
			</div>
		</div>

	</div><!-- /#bf-preview-overlay -->

</div><!-- /#bf-builder-app -->
	<?php
}

/**
 * Return WooCommerce products as id => name map for the builder.
 */
function formulate_pricing_get_wc_products() {
	if ( ! function_exists( 'wc_get_products' ) ) {
		return array();
	}
	$products = wc_get_products( array( 'limit' => 100, 'status' => array( 'publish', 'private' ) ) );
	$map      = array();
	foreach ( $products as $p ) {
		$map[ $p->get_id() ] = $p->get_name();
	}
	return $map;
}

/**
 * Return info about the product currently linked to a form config (for builder JS).
 *
 * @param array $config Form config array.
 * @return array|null  Associative array with id, name, edit_url, or null.
 */
function formulate_pricing_get_linked_product( $config ) {
	$pid = isset( $config['settings']['wc_product_id'] ) ? intval( $config['settings']['wc_product_id'] ) : 0;
	if ( ! $pid ) {
		return null;
	}
	if ( ! function_exists( 'wc_get_product' ) ) {
		return null;
	}
	$product = wc_get_product( $pid );
	if ( ! $product ) {
		return null;
	}
	return array(
		'id'       => $pid,
		'name'     => $product->get_name(),
		'edit_url' => get_edit_post_link( $pid, 'raw' ),
	);
}
