<?php
/**
 * Header Search element.
 *
 * @package BricksExtras
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Header Search element class.
 */
class X_Header_Search extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';

	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xheadersearch';

	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-search';

	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';

	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;

	/**
	 * Script localized flag.
	 *
	 * @var bool
	 */
	private static $script_localized = false;

	/**
	 * Get element label.
	 *
	 * @return string
	 */
	public function get_label() {
		return esc_html__( 'Header Search', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'header', 'search' );
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {

		$this->control_groups['form'] = array(
			'title' => esc_html__( 'Form', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['icons'] = array(
			'title' => esc_html__( 'Button style', 'bricks' ) . ' (' . esc_html__( 'Open', 'bricks' ) . ')',
			'tab'   => 'content',
		);

		$this->control_groups['closeIcon'] = array(
			'title' => esc_html__( 'Button style', 'bricks' ) . ' (' . esc_html__( 'Close', 'bricks' ) . ')',
			'tab'   => 'content',
		);

		$this->control_groups['submitButton'] = array(
			'title'    => esc_html__( 'Button style', 'bricks' ) . ' (' . esc_html__( 'Submit', 'bricks' ) . ')',
			'tab'      => 'content',
			'required' => array(
				array( 'maybeLiveSearch', '!=', true ),
				array( 'showSubmitButton', '=', true ),
			),
		);

		$this->control_groups['behaviour'] = array(
			'title' => esc_html__( 'Behavior', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['liveSearch'] = array(
			'title'    => esc_html__( 'Live search', 'bricks' ),
			'tab'      => 'content',
			'required' => array( 'layout', '=', array( 'header_overlay', 'below_header' ) ),
		);
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {

		$this->controls['builderSearchOpen'] = array(
			'tab'    => 'content',
			'inline' => true,
			'small'  => true,
			'label'  => esc_html__( 'Preview', 'bricks' ),
			'type'   => 'checkbox',
		);

		$this->controls['layout'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Layout', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'header_overlay' => esc_html__( 'Header overlay', 'bricksextras' ),
				'below_header'   => esc_html__( 'Below header', 'bricksextras' ),
				'full_screen'    => esc_html__( 'Fullscreen', 'bricks' ),
				'expand'         => esc_html__( 'Expand', 'bricks' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Select', 'bricks' ),
			'default'     => 'header_overlay',
		);

		$this->controls['expandWidth'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Width', 'bricks' ) . ' (' . esc_html__( 'Expanded', 'bricks' ) . ')',
			'type'        => 'number',
			'units'       => 'px',
			'inline'      => true,
			'css'         => array(
				array(
					'selector' => '.x-search-form',
					'property' => '--x-headersearch-expand-width',
				),
			),
			'placeholder' => '260px',
			'required'    => array( 'layout', '=', 'expand' ),
		);

		$this->controls['belowAnimation'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Animation', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'slide' => esc_html__( 'Slide', 'bricks' ),
				'fade'  => esc_html__( 'Fade', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Slide', 'bricks' ),
			'required'    => array(
				array( 'layout', '=', 'below_header' ),
				array( 'maybeLiveSearch', '!=', true ),
			),
		);

		$this->controls['belowHeaderHeight'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Height', 'bricks' ) . ' (' . esc_html__( 'Form', 'bricks' ) . ')',
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '[data-type=below_header][aria-expanded=true] + .x-search-form',
					'property' => '--x-header-slide-height',
				),
				array(
					'selector' => '[data-type=below_header][data-reveal=fade] + .x-search-form',
					'property' => '--x-header-slide-height',
				),
				array(
					'selector' => '&[data-nest=true] [data-type=below_header] + .x-search-form [data-search-width] > .brxe-filter-search',
					'property' => 'height',
				),
			),
			'placeholder' => '80px',
			'required'    => array(
				array( 'layout', '=', 'below_header' ),
			),
		);

		$this->controls['transitionDuration'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Duration', 'bricks' ),
			'inline'      => true,
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '.x-search-form',
					'property' => '--x-header-transiton',
				),
			),
			'placeholder' => '300ms',
		);

		$this->controls['searchWidth'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Max. width', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'contentWidth' => esc_html__( 'Content width', 'bricks' ),
				'fullWidth'    => '100%',
				'customWidth'  => esc_html__( 'Custom', 'bricks' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Content width', 'bricks' ),
		);

			$this->controls['searchWidthCustom'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Width', 'bricks' ),
				'type'        => 'number',
				'units'       => 'px',
				'inline'      => true,
				'css'         => array(
					array(
						'selector' => '.brxe-container[data-search-width=customWidth]',
						'property' => 'width',
					),
				),
				'placeholder' => '1140px',
				'required'    => array( 'searchWidth', '=', 'customWidth' ),
			);

			$this->controls['screenReaderLabel'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Screen reader label', 'bricksextras' ),
				'type'        => 'text',
				'placeholder' => esc_html__( 'Search', 'bricks' ),
				'inline'      => true,
				'required'    => array( 'maybeLiveSearch', '!=', true ),
			);

			$this->controls['placeholder'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Placeholder', 'bricks' ),
				'type'        => 'text',
				'placeholder' => esc_attr__( 'Search', 'bricks' ) . '...',
				'inline'      => true,
				'required'    => array( 'maybeLiveSearch', '!=', true ),
			);

			$this->controls['showSubmitButton'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Submit button', 'bricks' ),
				'type'     => 'checkbox',
				'inline'   => true,
				'required' => array( 'maybeLiveSearch', '!=', true ),
			);

			/* submit button */

			$submit_button_selector = 'input[type=submit]';

			$this->controls['submitButtonText'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Button text', 'bricks' ),
				'type'        => 'text',
				'group'       => 'submitButton',
				'inline'      => true,
				'placeholder' => esc_attr__( 'Search', 'bricks' ),
			);

			$this->controls['submitTypography'] = array(
				'tab'   => 'content',
				'group' => 'submitButton',
				'type'  => 'typography',
				'label' => esc_html__( 'Typography', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => $submit_button_selector,
					),
				),
			);

			$this->controls['submitBackgroundColor'] = array(
				'tab'   => 'content',
				'group' => 'submitButton',
				'type'  => 'color',
				'label' => esc_html__( 'Background', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'background-color',
						'selector' => $submit_button_selector,
					),
				),
			);

			$this->controls['submitBorder'] = array(
				'tab'   => 'content',
				'group' => 'submitButton',
				'type'  => 'border',
				'label' => esc_html__( 'Border', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'border',
						'selector' => $submit_button_selector,
					),
				),
			);

			$this->controls['submitBoxShadow'] = array(
				'tab'   => 'content',
				'group' => 'submitButton',
				'label' => esc_html__( 'Box shadow', 'bricks' ),
				'type'  => 'box-shadow',
				'css'   => array(
					array(
						'property' => 'box-shadow',
						'selector' => $submit_button_selector,
					),
				),
			);

			$this->controls['submitPadding'] = array(
				'tab'   => 'content',
				'group' => 'submitButton',
				'label' => esc_html__( 'Padding', 'bricks' ),
				'type'  => 'spacing',
				'css'   => array(
					array(
						'property' => 'padding',
						'selector' => $submit_button_selector,
					),
				),
			);

			$this->controls['submitMargin'] = array(
				'tab'   => 'content',
				'group' => 'submitButton',
				'label' => esc_html__( 'Margin', 'bricks' ),
				'type'  => 'spacing',
				'css'   => array(
					array(
						'property' => 'margin',
						'selector' => $submit_button_selector,
					),
				),
			);

			/* behaviour */

			$this->controls['autoComplete'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Autocomplete', 'bricks' ),
				'type'        => 'select',
				'inline'      => true,
				'group'       => 'behaviour',
				'options'     => array(
					'on'  => esc_html__( 'True', 'bricks' ),
					'off' => esc_html__( 'False', 'bricks' ),
				),
				'placeholder' => esc_html__( 'False', 'bricks' ),
				'required'    => array( 'maybeLiveSearch', '!=', true ),
			);

			$this->controls['maybeiOSKeyboard'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Show keyboard on iOS', 'bricksextras' ),
				'description' => esc_html__( 'Automatically open keyboard when search opens', 'bricksextras' ),
				'type'        => 'checkbox',
				'inline'      => true,
				'group'       => 'behaviour',
			);

			$this->controls['actionURL'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Action URL', 'bricks' ),
				'type'        => 'text',
				'group'       => 'behaviour',
				'inline'      => true,
				'placeholder' => home_url( '/' ),
				'required'    => array( 'maybeLiveSearch', '!=', true ),
			);

			$this->controls['additionalParams'] = array(
				'label'         => esc_html__( 'Additional parameters', 'bricks' ),
				'type'          => 'repeater',
				'group'         => 'behaviour',
				'titleProperty' => 'paramKey',
				'fields'        => array(
					'paramKey'   => array(
						'label' => esc_html__( 'Key', 'bricks' ),
						'type'  => 'text',
					),
					'paramValue' => array(
						'label' => esc_html__( 'Value', 'bricks' ),
						'type'  => 'text',
					),
				),
				'description'   => esc_html__( 'Added to the search form as hidden input fields.', 'bricks' ),
				'required'      => array( 'maybeLiveSearch', '!=', true ),
			);

			/* form styles */

			$form = '.x-search-form';

			$this->controls['formStart'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'type'  => 'separator',
				'label' => esc_html__( 'Form', 'bricks' ),
			);

			$this->controls['formBackgroundColor'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'type'  => 'color',
				'label' => esc_html__( 'Background', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'background-color',
						'selector' => $form,
					),
				),
			);

			$this->controls['formBorder'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'type'  => 'border',
				'label' => esc_html__( 'Border', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'border',
						'selector' => $form,
					),
				),
			);

			$this->controls['formBoxShadow'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'label' => esc_html__( 'Box shadow', 'bricks' ),
				'type'  => 'box-shadow',
				'css'   => array(
					array(
						'property' => 'box-shadow',
						'selector' => $form,
					),
				),
			);

			$this->controls['formPadding'] = array(
				'tab'         => 'content',
				'group'       => 'form',
				'label'       => esc_html__( 'Padding', 'bricks' ),
				'type'        => 'spacing',
				'placeholder' => array(
					'top'    => '0',
					'right'  => '0',
					'bottom' => '0',
					'left'   => '0',
				),
				'css'         => array(
					array(
						'property' => 'padding',
						'selector' => $form,
					),
				),
			);

			$this->controls['formInput'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'type'  => 'separator',
				'label' => esc_html__( 'Input', 'bricks' ),
			);

			$this->controls['inputTypography'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'type'  => 'typography',
				'label' => esc_html__( 'Typography', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => $form . ' input[type=search]',
					),
					array(
						'property' => 'font',
						'selector' => $form . ' .brxe-filter-search',
					),

					array(
						'property' => 'font',
						'selector' => $form . ' .x-header-search_toggle-close',
					),

				),
			);

			$this->controls['inputTypographyPlaceholder'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'type'  => 'typography',
				'label' => esc_html__( 'Placeholder typography', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => $form . ' input[type=search]::placeholder',
					),
					array(
						'property' => 'font',
						'selector' => $form . ' input[type=search]::-webkit-placeholder',
					),
				),
			);

			$this->controls['inputBackgroundColor'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'type'  => 'color',
				'label' => esc_html__( 'Input background', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'background-color',
						'selector' => $form . ' input[type=search]',
					),
				),
			);

			$this->controls['autoCompleteInputBackgroundColor'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'type'  => 'color',
				'label' => esc_html__( 'Input background', 'bricks' ) . ' (' . esc_html__( 'Autocomplete', 'bricks' ) . ')',
				'css'   => array(
					array(
						'property' => '--x-header-search-autocomplete',
						'selector' => $form,
					),
				),
			);

			$this->controls['inputBorder'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'type'  => 'border',
				'label' => esc_html__( 'Border', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'border',
						'selector' => $form . ' input[type=search]',
					),
				),
			);

			$this->controls['inputBoxShadow'] = array(
				'tab'   => 'content',
				'group' => 'form',
				'label' => esc_html__( 'Box shadow', 'bricks' ),
				'type'  => 'box-shadow',
				'css'   => array(
					array(
						'property' => 'box-shadow',
						'selector' => $form . ' input[type=search]',
					),
				),
			);

			$this->controls['inputPadding'] = array(
				'tab'         => 'content',
				'group'       => 'form',
				'label'       => esc_html__( 'Padding', 'bricks' ),
				'type'        => 'spacing',
				'placeholder' => array(
					'top'    => '0',
					'right'  => '0',
					'bottom' => '0',
					'left'   => '0',
				),
				'css'         => array(
					array(
						'property' => 'padding',
						'selector' => $form . ' input[type=search]',
					),
				),
			);

			/* icons */

			$search_button = 'button.x-header-search_toggle-open';
			$close_button  = '.x-search-form button.x-header-search_toggle-close';

			$this->controls['search_icon'] = array(
				'tab'     => 'content',
				'group'   => 'icons',
				'label'   => esc_html__( 'Icon', 'bricks' ),
				'type'    => 'icon',
				'css'     => array(
					array(
						'selector' => '.x-header-search_toggle-open svg',
					),
				),
				'default' => array(
					'library' => 'themify',
					'icon'    => 'ti-search',
				),
			);

			$this->controls['iconSize'] = array(
				'tab'   => 'content',
				'group' => 'icons',
				'label' => esc_html__( 'Icon size', 'bricks' ),
				'type'  => 'number',
				'units' => true,
				'css'   => array(
					array(
						'property' => 'font-size',
						'selector' => $search_button . ' > *:not(.x-header-search_toggle-open-text)',
					),
				),
			);

			$this->controls['aria_label'] = array(
				'tab'         => 'content',
				'label'       => 'aria-label',
				'type'        => 'text',
				'group'       => 'icons',
				'inline'      => true,
				'placeholder' => esc_attr__( 'Open search', 'bricksextras' ),
			);

			$this->controls['buttonText'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Button text', 'bricks' ),
				'type'        => 'text',
				'group'       => 'icons',
				'inline'      => true,
				'placeholder' => '',
			);

			$this->controls['buttonTypography'] = array(
				'tab'   => 'content',
				'label' => esc_html__( 'Button typography', 'bricks' ),
				'type'  => 'typography',
				'group' => 'icons',
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => '.x-header-search_toggle-open-text',
					),
				),
			);

			$this->controls['iconColor'] = array(
				'tab'   => 'content',
				'group' => 'icons',
				'label' => esc_html__( 'Color', 'bricks' ),
				'type'  => 'color',
				'css'   => array(
					array(
						'property' => 'color',
						'selector' => $search_button,
					),
				),
			);

			$this->controls['iconBackgroundColor'] = array(
				'tab'   => 'content',
				'group' => 'icons',
				'label' => esc_html__( 'Background color', 'bricks' ),
				'type'  => 'color',
				'css'   => array(
					array(
						'property' => 'background-color',
						'selector' => $search_button,
					),
				),
			);

			$this->controls['iconBorder'] = array(
				'tab'   => 'content',
				'label' => esc_html__( 'Border', 'bricks' ),
				'group' => 'icons',
				'type'  => 'border',
				'css'   => array(
					array(
						'property' => 'border',
						'selector' => $search_button,
					),
				),
			);

			$this->controls['iconBoxShadow'] = array(
				'tab'   => 'content',
				'label' => esc_html__( 'Box shadow', 'bricks' ),
				'group' => 'icons',
				'type'  => 'box-shadow',
				'css'   => array(
					array(
						'property' => 'box-shadow',
						'selector' => $search_button,
					),
				),
			);

			$this->controls['button_padding'] = array(
				'tab'         => 'content',
				'group'       => 'icons',
				'label'       => esc_html__( 'Padding', 'bricks' ),
				'type'        => 'spacing',
				'css'         => array(
					array(
						'property' => 'padding',
						'selector' => $search_button,
					),
				),
				'placeholder' => array(
					'top'    => '10px',
					'right'  => '10px',
					'bottom' => '10px',
					'left'   => '10px',
				),
			);

			$this->controls['button_margin'] = array(
				'tab'   => 'content',
				'group' => 'icons',
				'label' => esc_html__( 'Margin', 'bricks' ),
				'type'  => 'spacing',
				'css'   => array(
					array(
						'property' => 'margin',
						'selector' => $search_button,
					),
				),
			);

			$this->controls['markerButtonDirection'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Direction', 'bricks' ),
				'group'    => 'icons',
				'tooltip'  => array(
					'content'  => 'flex-direction',
					'position' => 'top-left',
				),
				'type'     => 'direction',
				'css'      => array(
					array(
						'property' => 'flex-direction',
						'selector' => $search_button,
					),
				),
				'inline'   => true,
				'rerender' => true,
			);

			$this->controls['markerButtonjustifyContent'] = array(
				'tab'     => 'content',
				'label'   => esc_html__( 'Align main axis', 'bricks' ),
				'group'   => 'icons',
				'tooltip' => array(
					'content'  => 'justify-content',
					'position' => 'top-left',
				),
				'type'    => 'justify-content',
				'css'     => array(
					array(
						'property' => 'justify-content',
						'selector' => $search_button,
					),
				),
			);

			$this->controls['markerButtonalignItems'] = array(
				'tab'     => 'content',
				'label'   => esc_html__( 'Align cross axis', 'bricks' ),
				'group'   => 'icons',
				'tooltip' => array(
					'content'  => 'align-items',
					'position' => 'top-left',
				),
				'type'    => 'align-items',
				'css'     => array(
					array(
						'property' => 'align-items',
						'selector' => $search_button,
					),
				),
			);

			$this->controls['markerButtoncolumnGap'] = array(
				'tab'   => 'content',
				'label' => esc_html__( 'Gap', 'bricks' ),
				'group' => 'icons',
				'type'  => 'number',
				'units' => true,
				'css'   => array(
					array(
						'property' => 'gap',
						'selector' => $search_button,
					),
				),
			);

			$this->controls['maybe_remove_close'] = array(
				'tab'   => 'content',
				'label' => esc_html__( 'Disable', 'bricks' ),
				'type'  => 'checkbox',
				'group' => 'closeIcon',
			);

			$this->controls['close_icon'] = array(
				'tab'      => 'content',
				'group'    => 'closeIcon',
				'label'    => esc_html__( 'Icon', 'bricks' ),
				'type'     => 'icon',
				'css'      => array(
					array(
						'selector' => '.x-header-search_toggle-close svg',
					),
				),
				'default'  => array(
					'library' => 'themify',
					'icon'    => 'ti-close',
				),
				'required' => array( 'maybe_remove_close', '!=', true ),
			);

			$this->controls['close_aria_label'] = array(
				'tab'         => 'content',
				'label'       => 'aria-label',
				'type'        => 'text',
				'group'       => 'closeIcon',
				'inline'      => true,
				'placeholder' => esc_attr__( 'Close search', 'bricks' ),
				'required'    => array( 'maybe_remove_close', '!=', true ),
			);

			$this->controls['closeIconSize'] = array(
				'tab'      => 'content',
				'group'    => 'closeIcon',
				'label'    => esc_html__( 'Icon size', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'font-size',
						'selector' => $close_button,
					),
				),
				'required' => array( 'maybe_remove_close', '!=', true ),
			);

			$this->controls['closeIconColor'] = array(
				'tab'      => 'content',
				'group'    => 'closeIcon',
				'label'    => esc_html__( 'Color', 'bricks' ),
				'type'     => 'color',
				'css'      => array(
					array(
						'property' => 'color',
						'selector' => $close_button,
					),
				),
				'required' => array( 'maybe_remove_close', '!=', true ),
			);

			$this->controls['closeIconBackgroundColor'] = array(
				'tab'      => 'content',
				'group'    => 'closeIcon',
				'label'    => esc_html__( 'Background color', 'bricks' ),
				'type'     => 'color',
				'css'      => array(
					array(
						'property' => 'background-color',
						'selector' => $close_button,
					),
				),
				'required' => array( 'maybe_remove_close', '!=', true ),
			);

			$this->controls['closeIconBorder'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Border', 'bricks' ),
				'group'    => 'closeIcon',
				'type'     => 'border',
				'css'      => array(
					array(
						'property' => 'border',
						'selector' => $close_button,
					),
				),
				'required' => array( 'maybe_remove_close', '!=', true ),
			);

			$this->controls['closeIconBoxShadow'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Box shadow', 'bricks' ),
				'group'    => 'closeIcon',
				'type'     => 'box-shadow',
				'css'      => array(
					array(
						'property' => 'box-shadow',
						'selector' => $close_button,
					),
				),
				'required' => array( 'maybe_remove_close', '!=', true ),
			);

			$this->controls['closeButtonPadding'] = array(
				'tab'         => 'content',
				'group'       => 'closeIcon',
				'label'       => esc_html__( 'Padding', 'bricks' ),
				'type'        => 'spacing',
				'css'         => array(
					array(
						'property' => 'padding',
						'selector' => $close_button,
					),
				),
				'placeholder' => array(
					'top'    => '10px',
					'right'  => '10px',
					'bottom' => '10px',
					'left'   => '10px',
				),
				'required'    => array( 'maybe_remove_close', '!=', true ),
			);

			$this->controls['closeButtonMargin'] = array(
				'tab'      => 'content',
				'group'    => 'closeIcon',
				'label'    => esc_html__( 'Margin', 'bricks' ),
				'type'     => 'spacing',
				'css'      => array(
					array(
						'property' => 'margin',
						'selector' => $close_button,
					),
				),
				'required' => array( 'maybe_remove_close', '!=', true ),
			);

			$this->controls['maybeLiveSearch'] = array(
				'tab'    => 'content',
				'inline' => true,
				'small'  => true,
				'group'  => 'liveSearch',
				'label'  => esc_html__( 'Live search', 'bricks' ) . ' (' . esc_html__( 'Nestable', 'bricks' ) . ')',
				'info'   => esc_html__( 'Use the Filter Search element inside this element', 'bricksextras' ),
				'type'   => 'checkbox',
			);

			$this->controls['maybeEnterKeyRedirect'] = array(
				'tab'      => 'content',
				'inline'   => true,
				'small'    => true,
				'group'    => 'liveSearch',
				'label'    => esc_html__( 'Redirect to search results page', 'bricksextras' ),
				'type'     => 'checkbox',
				'required' => array( 'maybeLiveSearch', '=', true ),
			);
	}


	/**
	 * Enqueue scripts.
	 */
	public function enqueue_scripts() {

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'x-header-search', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'headersearch' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );

		if ( ! self::$script_localized ) {

			wp_localize_script(
				'x-header-search',
				'xSearch',
				array(
					'searchURL' => esc_url( get_site_url() ) . '/',
				)
			);

			self::$script_localized = true;

		}

		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-header-search', BRICKSEXTRAS_URL . 'components/assets/css/headersearch.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}


	/**
	 * Render element output.
	 */
	public function render() {

		$layout = isset( $this->settings['layout'] ) ? esc_attr( $this->settings['layout'] ) : '';
		$reveal = isset( $this->settings['belowAnimation'] ) ? esc_attr( $this->settings['belowAnimation'] ) : 'slide';

		$maybe_ios_keyboard = isset( $this->settings['maybeiOSKeyboard'] );

		$this->set_attribute( 'x-header-search_toggle-open', 'class', 'x-header-search_toggle-open' );
		$this->set_attribute( 'x-header-search_toggle-open', 'data-type', $layout );
		$this->set_attribute( 'x-header-search_toggle-open', 'data-reveal', $reveal );

		if ( ! isset( $this->settings['buttonText'] ) ) {
			$this->set_attribute( 'x-header-search_toggle-open', 'aria-label', isset( $this->settings['aria_label'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['aria_label'] ) ) : esc_attr__( 'Open search', 'bricks' ) );
		}

		$identifier = \BricksExtras\Helpers::generate_unique_identifier( $this->element, $this->id );

		$this->set_attribute( 'x-header-search_toggle-open', 'aria-controls', 'x-header-search_form-' . $identifier );
		$this->set_attribute( 'x-header-search_toggle-open', 'aria-expanded', 'false' );

		$this->set_attribute( 'x-header-search_toggle-close', 'class', 'x-header-search_toggle-close' );

		$this->set_attribute( 'x-header-search_toggle-close', 'aria-label', isset( $this->settings['close_aria_label'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['close_aria_label'] ) ) : esc_attr__( 'Close Search', 'bricks' ) );
		$this->set_attribute( 'x-header-search_toggle-close', 'aria-controls', 'x-header-search_form-' . $identifier );
		$this->set_attribute( 'x-header-search_toggle-close', 'aria-expanded', 'false' );

		$this->set_attribute( 'x-header-search_toggle-text', 'class', 'x-header-search_toggle-text' );

		if ( isset( $this->settings['maybeLiveSearch'] ) ) {
			$this->set_attribute( '_root', 'data-nest', 'true' );

			if ( isset( $this->settings['maybeEnterKeyRedirect'] ) ) {
				$this->set_attribute( '_root', 'data-search-redirect', 'true' );
			}
		}

		if ( $maybe_ios_keyboard ) {
			$this->set_attribute( '_root', 'data-ios-focus', 'true' );
		}

		$this->set_attribute( '_root', 'data-type', $layout );
		$this->set_attribute( '_root', 'data-close-label', isset( $this->settings['close_aria_label'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['close_aria_label'] ) ) : esc_attr__( 'Close Search', 'bricksextras' ) );

		$output = '';

		$output .= "<div {$this->render_attributes( '_root' )}>";

		$search_icon = empty( $this->settings['search_icon'] ) ? false : self::render_icon( $this->settings['search_icon'] );
		$close_icon  = empty( $this->settings['close_icon'] ) ? false : self::render_icon( $this->settings['close_icon'] );

		$search_width = isset( $this->settings['searchWidth'] ) ? esc_attr( $this->settings['searchWidth'] ) : 'contentWidth';

		$config = array();

		if ( $search_icon ) {

			$output .= "<button {$this->render_attributes( 'x-header-search_toggle-open' )}>";
			if ( isset( $this->settings['buttonText'] ) && $this->settings['buttonText'] ) {
				$output .= '<span class="x-header-search_toggle-open-text"> ' . esc_html( bricks_render_dynamic_data( $this->settings['buttonText'] ) ) . '</span>';
			}
			$output .= $search_icon;
			$output .= '</button>';

		}

		if ( ! empty( $this->settings['additionalParams'] ) ) {
			$additional_params = array();

			foreach ( $this->settings['additionalParams'] as $param ) {
				$key   = bricks_render_dynamic_data( sanitize_text_field( $param['paramKey'] ?? '' ) );
				$value = bricks_render_dynamic_data( sanitize_text_field( $param['paramValue'] ?? '' ) );

				if ( empty( $key ) || empty( $value ) ) {
					continue;
				}

				if ( 's' === $key ) {
					$pre_search_value = $value;
					continue;
				}

				$additional_params[ $key ] = $value;
			}

			$this->settings['additionalParams'] = $additional_params;
		}

		$hidden_inputs = '';

		// Add additional hidden input parameters.
		if ( ! empty( $this->settings['additionalParams'] ) ) {
			foreach ( $this->settings['additionalParams'] as $key => $value ) {
				$input_html = sprintf(
					'<input type="hidden" name="%s" value="%s" />',
					esc_attr( $key ),
					esc_attr( $value )
				);

				$hidden_inputs .= $input_html;
			}
		}

		// Build action URL.
		$action_url = apply_filters( 'bricks/search_form/home_url', home_url( '/' ) );
		if ( ! empty( $this->settings['actionURL'] ) ) {
			$this->settings['actionURL'] = bricks_render_dynamic_data( $this->settings['actionURL'] );
			$action_url                  = trailingslashit( $this->settings['actionURL'] );
		}

		// Get placeholder text.
		$placeholder = isset( $this->settings['placeholder'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['placeholder'] ) ) : esc_attr__( 'Search', 'bricks' ) . '...';

		// Get screen reader label (separate from placeholder to avoid duplication).
		$screen_reader_label = isset( $this->settings['screenReaderLabel'] ) ? esc_html( bricks_render_dynamic_data( $this->settings['screenReaderLabel'] ) ) : esc_html__( 'Search', 'bricks' );

		// Get submit button settings.
		$show_submit  = isset( $this->settings['showSubmitButton'] );
		$submit_text  = isset( $this->settings['submitButtonText'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['submitButtonText'] ) ) : esc_attr__( 'Search', 'bricks' );
		$submit_class = 'search-submit x-search-submit';
		$submit_attrs = '';

		if ( ! $show_submit ) {
			$submit_class .= ' x-submit-hidden';
			$submit_attrs  = ' tabindex="-1" aria-hidden="true"';
		}

		// Build search form HTML.
		$html = sprintf(
			'<form role="search" autocomplete="%s" method="get" class="x-search-form" id="x-header-search_form-%s" action="%s">' .
			'<div data-search-width="%s" class="brxe-container">' .
			'<label>' .
			'<span class="screen-reader-text">%s</span>' .
			'<input type="search" placeholder="%s" value="%s" name="s">' .
			'</label>' .
			'%s' .
			'<input type="submit" class="%s" value="%s"%s>',
			esc_attr( isset( $this->settings['autoComplete'] ) ? $this->settings['autoComplete'] : 'off' ),
			esc_attr( $identifier ),
			esc_url( $action_url ),
			esc_attr( $search_width ),
			$screen_reader_label,
			esc_attr( $placeholder ),
			esc_attr( get_search_query() ),
			$hidden_inputs,
			esc_attr( $submit_class ),
			$submit_text,
			$submit_attrs
		);

		if ( $close_icon && ! isset( $this->settings['maybe_remove_close'] ) ) {

			$html .= "<button {$this->render_attributes( 'x-header-search_toggle-close' )}>";
			$html .= $close_icon;
			$html .= '</button>';

		}

		$html .= '</div></form>';

		if ( ( 'below_header' === $layout || 'header_overlay' === $layout ) && isset( $this->settings['maybeLiveSearch'] ) ) {

			$this->set_attribute( 'x-search-form', 'class', 'x-search-form' );
			$this->set_attribute( 'x-search-form', 'id', 'x-header-search_form-' . $identifier );
			$this->set_attribute( 'x-search-form', 'role', 'search' );
			$this->set_attribute( 'x-search-form', 'data-x-search', wp_json_encode( $config ) );

			$this->set_attribute( 'x-search-form_container', 'class', 'brxe-container' );
			$this->set_attribute( 'x-search-form_container', 'data-search-width', $search_width );

			$form_output  = "<div {$this->render_attributes( 'x-search-form' )}>";
			$form_output .= "<div {$this->render_attributes( 'x-search-form_container' )}>";

			if ( method_exists( '\Bricks\Frontend', 'render_children' ) ) {
				$form_output .= \Bricks\Frontend::render_children( $this );
			}

			if ( $close_icon && ! isset( $this->settings['maybe_remove_close'] ) ) {

				$form_output .= "<button {$this->render_attributes( 'x-header-search_toggle-close' )}>";
				$form_output .= $close_icon;
				$form_output .= '</button>';

			}

			$form_output .= '</div></div>';

		} else {
			$form_output = apply_filters( 'get_search_form', $html );
		}

		$output .= $form_output;

		$output .= '</div>';

		echo $output;
	}



	/**
	 * Render builder template.
	 */
	public static function render_builder() {
		?>

		<script type="text/x-template" id="tmpl-bricks-element-xheadersearch">
			<component
				class="brxe-xheadersearch"
				:data-type="settings.layout"
				:data-nest="settings.maybeLiveSearch"
			>
				
		<button 
			aria-label="Open search" 
			class="x-header-search_toggle-open"
			
			:data-type="settings.layout"
			:data-reveal="null != settings.belowAnimation ? settings.belowAnimation : 'slide'"
			:aria-expanded="settings.builderSearchOpen ? 'true' : 'false'"
			>

			<contenteditable
			v-if="settings.buttonText"
			tag="span"
			class="x-header-search_toggle-open-text"
			:name="name"
			controlKey="buttonText"
			toolbar="style"
			:settings="settings"
		/>


		<icon-svg 
		:iconSettings="settings.search_icon"
		/>
		</button>

		<form v-if="!settings.maybeLiveSearch" role="search" method="get" class="x-search-form" action="/">
				<div 
				:data-search-width="settings.searchWidth ? settings.searchWidth : 'contentWidth'" 
				class="brxe-container"
				>
				<label>
					<span class="screen-reader-text">Search</span>
					<input 
					type="search" 
					:placeholder="null != settings.placeholder ? settings.placeholder : '<?php echo esc_js( __( 'Search', 'bricks' ) ); ?>...'"
					value="" 
					name="s"> 
				</label>
			  
				<input 
					type="submit" 
					:class="'x-search-submit search-submit' + (settings.showSubmitButton ? '' : ' x-submit-hidden')" 
					:value="settings.submitButtonText ? settings.submitButtonText : '<?php echo esc_js( __( 'Search', 'bricks' ) ); ?>'"
				>

				<button 
						v-if="!settings.maybe_remove_close"
						aria-label="close search" 
						class="x-header-search_toggle-close"
						:data-type="settings.layout"
						:aria-expanded="settings.builderSearchOpen ? 'true' : 'false'"
					>

					<icon-svg 
						:iconSettings="settings.close_icon"
					/>
					</button>
				</div>
		</form>

		<div v-else class="x-search-form">  
		<div 
		:data-search-width="settings.searchWidth ? settings.searchWidth : 'contentWidth'" 
		class="brxe-container"
		>

		<bricks-element-children
			:element="element"
		/>

		<button 
			v-if="!settings.maybe_remove_close"
			aria-label="close search" 
			class="x-header-search_toggle-close"
			:data-type="settings.layout"
			:aria-expanded="settings.builderSearchOpen ? 'true' : 'false'"
			>

			<icon-svg 
			:iconSettings="settings.close_icon"
			/>
			</button>

			</div>

		</div>

	 
			</component>	
		</script>

		<?php
	}
}