<?php
/**
 * Basic Forms - Form Builder
 * Design reference: Options Page Builder (Quick Add, 2-column layout)
 *
 * @package BasicForms
 * @since 1.0.0
 */

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

use BasicForms\FeatureGate;

$field_types = [
	'text'       => [ 'label' => __( 'Text', 'wp-powersuite' ), 'svg' => 'M4 6h16M4 12h16m-7 6h7' ],
	'email'      => [ 'label' => __( 'Email', 'wp-powersuite' ), 'svg' => 'M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207' ],
	'textarea'   => [ 'label' => __( 'Textarea', 'wp-powersuite' ), 'svg' => 'M4 6h16M4 12h16M4 18h7' ],
	'number'     => [ 'label' => __( 'Number', 'wp-powersuite' ), 'svg' => 'M7 20l4-16m2 16l4-16M6 9h14M4 15h14' ],
	'select'     => [ 'label' => __( 'Select', 'wp-powersuite' ), 'svg' => 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' ],
	'radio'      => [ 'label' => __( 'Radio', 'wp-powersuite' ), 'svg' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' ],
	'checkbox'   => [ 'label' => __( 'Checkbox', 'wp-powersuite' ), 'svg' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' ],
	'date'       => [ 'label' => __( 'Date', 'wp-powersuite' ), 'svg' => 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' ],
	'time'       => [ 'label' => __( 'Time', 'wp-powersuite' ), 'svg' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' ],
	'datetime'   => [ 'label' => __( 'Date & Time', 'wp-powersuite' ), 'svg' => 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' ],
	'url'        => [ 'label' => __( 'URL', 'wp-powersuite' ), 'svg' => 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1' ],
	'phone'      => [ 'label' => __( 'Phone', 'wp-powersuite' ), 'svg' => 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z' ],
	'file'       => [ 'label' => __( 'File Upload', 'wp-powersuite' ), 'svg' => 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12' ],
	'hidden'     => [ 'label' => __( 'Hidden', 'wp-powersuite' ), 'svg' => 'M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21' ],
	'password'   => [ 'label' => __( 'Password', 'wp-powersuite' ), 'svg' => 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z' ],
	'html'       => [ 'label' => __( 'HTML', 'wp-powersuite' ), 'svg' => 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4' ],
	'group'      => [ 'label' => __( 'Section', 'wp-powersuite' ), 'svg' => 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' ],
	'separator'  => [ 'label' => __( 'Separator', 'wp-powersuite' ), 'svg' => 'M4 6h16M4 12h16' ],
];
?>
<div id="wpps-bf-form-builder" class="wpps-bf-editor-layout">
	<div class="wpps-bf-fields-column">
		<div class="wpps-bf-panel wpps-bf-editor-panel">
			<h2 class="wpps-bf-panel-title"><?php esc_html_e( 'Form Fields', 'wp-powersuite' ); ?></h2>
			<div class="wpps-bf-panel-body">
				<div class="wpps-bf-fields-toolbar">
					<p class="wpps-bf-panel-desc"><?php esc_html_e( 'Add and configure fields for your form. Drag to reorder.', 'wp-powersuite' ); ?></p>
					<?php if ( FeatureGate::aiFormBuilderEnabled() ) : ?>
					<button type="button" class="button button-secondary wpps-bf-open-ai-builder wpps-bf-ai-btn" id="wpps-bf-open-ai-builder">
						<?php include __DIR__ . '/partials/ai-icon.php'; ?>
						<?php esc_html_e( 'Modify with AI', 'wp-powersuite' ); ?>
					</button>
					<?php endif; ?>
				</div>
				<div id="wpps-bf-fields-container" class="wpps-bf-fields-list" data-placeholder="<?php esc_attr_e( 'No fields yet. Use Quick Add to create fields.', 'wp-powersuite' ); ?>"></div>
				<input type="hidden" name="form_fields" id="wpps-bf-form-fields-data" value="<?php echo esc_attr( wp_json_encode( $fields ) ); ?>">
			</div>
		</div>
	</div>
	<div class="wpps-bf-quickadd-column">
		<div class="wpps-bf-panel wpps-bf-quickadd-panel">
			<h2 class="wpps-bf-panel-title"><?php esc_html_e( 'Quick Add', 'wp-powersuite' ); ?></h2>
			<div class="wpps-bf-panel-body">
				<p class="wpps-bf-panel-desc"><?php esc_html_e( 'Common field types', 'wp-powersuite' ); ?></p>
				<div class="wpps-bf-quick-add-grid">
				<?php foreach ( $field_types as $type => $config ) :
					$is_group     = ( $type === 'group' );
					$is_separator = ( $type === 'separator' );
					$layout_class = $is_group ? 'wpps-bf-quick-add-group' : ( $is_separator ? 'wpps-bf-quick-add-separator' : '' );
					?>
					<button type="button" class="wpps-bf-quick-add-btn <?php echo esc_attr( $layout_class ); ?> wpps-bf-add-field" data-type="<?php echo esc_attr( $type ); ?>">
						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<?php echo esc_attr( $config['svg'] ); ?>"></path></svg>
						<span class="wpps-bf-quick-add-label"><?php echo esc_html( $config['label'] ); ?></span>
					</button>
				<?php endforeach; ?>
				</div>
			</div>
		</div>
	</div>
</div>
