<?php
/**
 * Porto Customizer Header Builder
 *
 * @author     Porto Themes
 * @category   Admin Functions
 * @since      4.8.0
 */

defined( 'ABSPATH' ) || exit;

class Porto_Header_Builder {

	public $transport = 'postMessage';

	public $elements;

	protected $container_elements = array( 'row' );

	protected $infinite_elements = array( 'row', 'porto_block', 'html', 'divider' );

	protected $desktop_elements = array( 'main-menu', 'secondary-menu' );

	protected $mobile_elements = array();

	/**
	 * Constructor.
	 */
	public function __construct() {

		global $wp_customize;
		if ( ! isset( $wp_customize->selective_refresh ) ) {
			$this->transport = 'refresh';
		}
		$this->elements = array(
			'logo'              => __( 'Logo', 'porto' ),
			'mini-cart'         => __( 'Mini Cart', 'porto' ),
			'menu-icon'         => __( '☰ Mobile Menu Icon', 'porto' ),
			'main-menu'         => __( 'Main Menu', 'porto' ),
			'main-toggle-menu'  => __( 'Main Toggle Menu', 'porto' ),
			'secondary-menu'    => __( 'Secondary Menu', 'porto' ),
			'nav-top'           => __( 'Top Menu', 'porto' ),
			'menu-block'        => __( 'Custom Menu', 'porto' ),
			'search-form'       => __( 'Search Form', 'porto' ),
			'social'            => __( 'Social Icons', 'porto' ),
			'contact'           => __( 'Contact', 'porto' ),
			'currency-switcher' => __( 'Currency Switcher', 'porto' ),
			'language-switcher' => __( 'Language Switcher', 'porto' ),
			'myaccount'         => __( 'My Account', 'porto' ),
			'wishlist'          => __( 'Wishlist', 'porto' ),
			'porto_block'       => __( 'Porto Block', 'porto' ),
			'html'              => __( 'HTML', 'porto' ),
			'row'               => __( 'Row', 'porto' ),
			'divider'           => __( ' | ', 'porto' ),
		);
		$this->elements = apply_filters( 'porto_header_elements', $this->elements );

		$this->header_elements = array(
			'top_left'             => __( 'Header Top Left', 'porto' ),
			'top_center'           => __( 'Header Top Center', 'porto' ),
			'top_right'            => __( 'Header Top Right', 'porto' ),
			'main_left'            => __( 'Header Main Left', 'porto' ),
			'main_center'          => __( 'Header Main Center', 'porto' ),
			'main_right'           => __( 'Header Main Right', 'porto' ),
			'bottom_left'          => __( 'Header Bottom Left', 'porto' ),
			'bottom_center'        => __( 'Header Bottom Center', 'porto' ),
			'bottom_right'         => __( 'Header Bottom Right', 'porto' ),
			'mobile_top_left'      => __( 'Mobile Header Top Left', 'porto' ),
			'mobile_top_center'    => __( 'Mobile Header Top Center', 'porto' ),
			'mobile_top_right'     => __( 'Mobile Header Top Right', 'porto' ),
			'mobile_main_left'     => __( 'Mobile Header Main Left', 'porto' ),
			'mobile_main_center'   => __( 'Mobile Header Main Center', 'porto' ),
			'mobile_main_right'    => __( 'Mobile Header Main Right', 'porto' ),
			'mobile_bottom_left'   => __( 'Mobile Header Bottom Left', 'porto' ),
			'mobile_bottom_center' => __( 'Mobile Header Bottom Center', 'porto' ),
			'mobile_bottom_right'  => __( 'Mobile Header Bottom Right', 'porto' ),
		);
		add_action( 'customize_register', array( $this, 'add_section' ) );
		add_action( 'customize_controls_print_scripts', array( $this, 'add_scripts' ) );
		add_action( 'customize_controls_enqueue_scripts', array( $this, 'add_js' ) );
		add_action( 'customize_controls_print_footer_scripts', array( $this, 'add_header_builder_content' ) );

		add_action( 'customize_save_after', array( $this, 'save_header_layout_values' ) );

		add_action( 'wp_ajax_porto_add_new_header_layout', array( $this, 'add_new_header_layout' ) );
		add_action( 'wp_ajax_nopriv_porto_add_new_header_layout', array( $this, 'add_new_header_layout' ) );
		add_action( 'wp_ajax_porto_delete_header_layout', array( $this, 'delete_header_layout' ) );
		add_action( 'wp_ajax_nopriv_porto_delete_header_layout', array( $this, 'delete_header_layout' ) );
		add_action( 'wp_ajax_porto_load_header_elements', array( $this, 'load_header_elements' ) );
		add_action( 'wp_ajax_nopriv_porto_load_header_elements', array( $this, 'load_header_elements' ) );
	}

	public function add_section( $wp_customize ) {
		$options_style = get_theme_mod( 'theme_options_use_new_style', false );

		// add section to select header types
		if ( $options_style ) {
			$wp_customize->add_section(
				'porto_header_layouts',
				array(
					'title'       => __( 'Header Builder', 'porto' ),
					'description' => '',
					'priority'    => -479,
					'panel'       => 'header-settings',
				)
			);
		} else {
			$wp_customize->add_section(
				'porto_header_layouts',
				array(
					'title'       => __( 'Header Builder', 'porto' ),
					'description' => '',
					'priority'    => 10,
				)
			);
		}

		$wp_customize->add_setting(
			'porto_header_builder[on_section]',
			array(
				'default'           => '',
				'capability'        => 'edit_theme_options',
				'type'              => 'option',
				'transport'         => $this->transport,
				'sanitize_callback' => array( $this, 'sanitize_boolean_value' ),
			)
		);
		$wp_customize->add_control(
			'porto_is_header_builder_section',
			array(
				'settings' => 'porto_header_builder[on_section]',
				'label'    => '',
				'section'  => 'porto_header_layouts',
				'type'     => 'text',
			)
		);

		$wp_customize->add_setting(
			'porto_header_builder[selected_layout]',
			array(
				'default'           => '',
				'capability'        => 'edit_theme_options',
				'type'              => 'option',
				'transport'         => $this->transport,
				'sanitize_callback' => 'sanitize_text_field',
			)
		);

		$header_layouts = get_option( 'porto_header_builder_layouts', array() );
		if ( ! empty( $header_layouts ) ) {
			foreach ( $header_layouts as $key => $layout ) {
				$header_layouts[ $key ] = $layout['name'];
			}
		}
		$header_layouts = array_merge( array( '' => __( 'Select Header Layout...', 'porto' ) ), $header_layouts );
		$wp_customize->add_control(
			'porto_header_layouts_select',
			array(
				'settings' => 'porto_header_builder[selected_layout]',
				'label'    => __( 'Select a header layout to edit:', 'porto' ),
				'section'  => 'porto_header_layouts',
				'type'     => 'select',
				'choices'  => $header_layouts,
			)
		);
		$wp_customize->add_setting(
			'porto_header_layouts_create_text',
			array(
				'default'           => '',
				'transport'         => $this->transport,
				'sanitize_callback' => 'wp_filter_nohtml_kses',
			)
		);
		include_once 'classes/simple-notice-control.php';
		$wp_customize->add_control(
			new Porto_Simple_Notice_Custom_Control(
				$wp_customize,
				'porto_header_layouts_create_text',
				array(
					'description' => '<a href="#" class="porto_create_new_header_layout_link">' . esc_html__( 'Create a new header layout', 'porto' ) . '</a>',
					'section'     => 'porto_header_layouts',
				)
			)
		);

		$wp_customize->add_control(
			'porto_header_layouts_title',
			array(
				'type'     => 'text',
				'label'    => __( 'Header Type Title', 'porto' ),
				'section'  => 'porto_header_layouts',
				'settings' => array(),
			)
		);

		$wp_customize->add_control(
			'porto_header_layouts_create_button',
			array(
				'type'        => 'button',
				'settings'    => array(),
				'priority'    => 10,
				'section'     => 'porto_header_layouts',
				'input_attrs' => array(
					'value' => __( 'Add Header Layout', 'porto' ),
					'class' => 'button button-primary porto_header_builder_new',
				),
			)
		);

		$wp_customize->add_setting(
			'porto_header_layouts_delete',
			array(
				'default'           => '',
				'transport'         => $this->transport,
				'sanitize_callback' => 'wp_filter_nohtml_kses',
			)
		);
		$wp_customize->add_control(
			new Porto_Simple_Notice_Custom_Control(
				$wp_customize,
				'porto_header_layouts_delete',
				array(
					'description' => '<a href="#" class="porto_delete_header_layout_link">' . esc_html__( 'Delete header layout', 'porto' ) . '</a>',
					'section'     => 'porto_header_layouts',
				)
			)
		);

		$preset_img_html  = '<div class="porto_header_presets">';
		$preset_img_html .= '<h3 class="preset-title">' . esc_html__( 'Header Presets', 'porto' ) . '</h3>';
		$header_presets   = array( '' => '' );
		foreach ( porto_header_builder_presets() as $key => $preset ) {
			$header_presets[ $key ] = $preset['title'];
			$img_class              = '';
			if ( strpos( $key, '_side_' ) !== false ) {
				$img_class = 'side';
			}
			$preset_img_html .= '<img src="' . esc_url( PORTO_OPTIONS_URI . '/header_builder_presets/' . $preset['img'] ) . '"' . ( $img_class ? ' class="' . $img_class . '"' : '' ) . ' alt="' . esc_attr( $preset['title'] ) . '" data-preset="' . esc_attr( $key ) . '" />';
		}
		$preset_img_html .= '</div>';

		$wp_customize->add_setting(
			'porto_header_builder[preset]',
			array(
				'default'           => '',
				'transport'         => $this->transport,
				'capability'        => 'edit_theme_options',
				'type'              => 'option',
				'sanitize_callback' => 'sanitize_text_field',
			)
		);
		$wp_customize->add_control(
			'porto_header_layouts_preset',
			array(
				'type'     => 'select',
				'label'    => __( 'Preset', 'porto' ),
				'section'  => 'porto_header_layouts',
				'settings' => 'porto_header_builder[preset]',
				'choices'  => $header_presets,
			)
		);
		$wp_customize->add_setting(
			'porto_header_layouts_preset_img',
			array(
				'default'           => '',
				'transport'         => $this->transport,
				'sanitize_callback' => 'wp_filter_nohtml_kses',
			)
		);
		$wp_customize->add_control(
			new Porto_Simple_Notice_Custom_Control(
				$wp_customize,
				'porto_header_layouts_preset_img',
				array(
					'description' => $preset_img_html,
					'section'     => 'porto_header_layouts',
				)
			)
		);

		$wp_customize->add_setting(
			'porto_header_builder[type]',
			array(
				'default'           => '',
				'transport'         => $this->transport,
				'capability'        => 'edit_theme_options',
				'type'              => 'option',
				'sanitize_callback' => 'sanitize_text_field',
			)
		);
		$wp_customize->add_control(
			'porto_header_layouts_type',
			array(
				'type'     => 'select',
				'label'    => __( 'Type', 'porto' ),
				'section'  => 'porto_header_layouts',
				'settings' => 'porto_header_builder[type]',
				'choices'  => array(
					''     => __( 'Default', 'porto' ),
					'side' => __( 'Side Header', 'porto' ),
				),
			)
		);

		// side header options
		$wp_customize->add_setting(
			'porto_header_builder[side_header_toggle]',
			array(
				'default'           => '',
				'transport'         => $this->transport,
				'capability'        => 'edit_theme_options',
				'type'              => 'option',
				'sanitize_callback' => 'sanitize_text_field',
			)
		);
		$wp_customize->add_control(
			'porto_header_layouts_side_header_toggle',
			array(
				'type'     => 'select',
				'label'    => __( 'Side Header Toggle', 'porto' ),
				'section'  => 'porto_header_layouts',
				'settings' => 'porto_header_builder[side_header_toggle]',
				'choices'  => array(
					''     => __( 'No Toggle', 'porto' ),
					'side' => __( 'In Side Bar', 'porto' ),
					'top'  => __( 'In Top Bar', 'porto' ),
				),
			)
		);
		$wp_customize->add_setting(
			'porto_header_builder[side_header_toggle_logo]',
			array(
				'default'           => '',
				'transport'         => $this->transport,
				'capability'        => 'edit_theme_options',
				'type'              => 'option',
				'sanitize_callback' => 'esc_url',
			)
		);
		$wp_customize->add_control(
			new WP_Customize_Image_Control(
				$wp_customize,
				'porto_header_layouts_side_header_toggle_logo',
				array(
					'label'    => __( 'Upload a Logo in Toggle bar', 'porto' ),
					'section'  => 'porto_header_layouts',
					'settings' => 'porto_header_builder[side_header_toggle_logo]',
				)
			)
		);
		$wp_customize->add_setting(
			'porto_header_builder[side_header_disable_overlay]',
			array(
				'default'           => '',
				'transport'         => $this->transport,
				'capability'        => 'edit_theme_options',
				'type'              => 'option',
				'sanitize_callback' => 'sanitize_text_field',
			)
		);
		$wp_customize->add_control(
			'porto_header_layouts_side_header_disable_overlay',
			array(
				'type'     => 'checkbox',
				'label'    => __( 'Disable Overlay', 'porto' ),
				'section'  => 'porto_header_layouts',
				'settings' => 'porto_header_builder[side_header_disable_overlay]',
			)
		);
		$wp_customize->add_setting(
			'porto_header_builder[side_header_toggle_desc]',
			array(
				'default'           => '',
				'transport'         => $this->transport,
				'capability'        => 'edit_theme_options',
				'type'              => 'option',
				'sanitize_callback' => 'porto_strip_script_tags',
			)
		);
		$wp_customize->add_control(
			'porto_header_layouts_side_header_toggle_desc',
			array(
				'type'     => 'textarea',
				'label'    => __( 'Description in Toggle bar', 'porto' ),
				'section'  => 'porto_header_layouts',
				'settings' => 'porto_header_builder[side_header_toggle_desc]',
			)
		);
		$wp_customize->add_setting(
			'porto_header_builder[side_header_width]',
			array(
				'default'           => '256',
				'transport'         => $this->transport,
				'capability'        => 'edit_theme_options',
				'type'              => 'option',
				'sanitize_callback' => array( $this, 'sanitize_number_value' ),
			)
		);
		$wp_customize->add_control(
			'porto_header_layouts_side_header_width',
			array(
				'type'     => 'number',
				'label'    => __( 'Side Header Width (px)', 'porto' ),
				'section'  => 'porto_header_layouts',
				'settings' => 'porto_header_builder[side_header_width]',
			)
		);

		// html and porto block
		$blocks = porto_get_post_type_items( 'block' );
		$wp_customize->add_control(
			'porto_header_layouts_block_element',
			array(
				'type'     => 'select',
				'label'    => __( 'Select a block', 'porto' ),
				'section'  => 'porto_header_layouts',
				'settings' => array(),
				'choices'  => $blocks,
			)
		);
		$wp_customize->add_control(
			'porto_header_layouts_html_element',
			array(
				'type'     => 'textarea',
				'label'    => __( 'HTML', 'porto' ),
				'section'  => 'porto_header_layouts',
				'settings' => array(),
			)
		);
		$wp_customize->add_control(
			'porto_header_layouts_el_class',
			array(
				'type'     => 'text',
				'label'    => __( 'Custom CSS Class', 'porto' ),
				'section'  => 'porto_header_layouts',
				'settings' => array(),
			)
		);
		$wp_customize->add_control(
			'porto_header_layouts_save_html_button',
			array(
				'type'        => 'button',
				'settings'    => array(),
				'priority'    => 10,
				'section'     => 'porto_header_layouts',
				'description' => __( 'Note: You need to click Save button below to make changes.', 'porto' ),
				'input_attrs' => array(
					'value' => __( 'Save', 'porto' ),
					'class' => 'button button-primary porto_header_builder_save_html porto_header_builder_popup',
				),
			)
		);

		// custom css
		$wp_customize->add_setting(
			'porto_header_builder[custom_css]',
			array(
				'default'           => '',
				'transport'         => $this->transport,
				'capability'        => 'edit_theme_options',
				'type'              => 'option',
				'sanitize_callback' => 'wp_filter_nohtml_kses',
			)
		);
		$wp_customize->add_control(
			new WP_Customize_Code_Editor_Control(
				$wp_customize,
				'porto_header_layouts_custom_css',
				array(
					'label'     => __( 'Additional CSS', 'porto' ),
					'section'   => 'porto_header_layouts',
					'settings'  => 'porto_header_builder[custom_css]',
					'code_type' => 'text/css',
				)
			)
		);

		// header builder section
		$wp_customize->add_section(
			'porto_header_builder',
			array(
				'title'    => __( 'Header Builder Elements', 'porto' ),
				'priority' => 125,
			)
		);
		foreach ( $this->header_elements as $key => $element ) {
			$wp_customize->add_setting(
				'porto_header_builder_elements[' . $key . ']',
				array(
					'default'           => '',
					'capability'        => 'edit_theme_options',
					'type'              => 'option',
					'transport'         => $this->transport,
					'sanitize_callback' => 'porto_strip_script_tags',
				)
			);
			$wp_customize->add_control(
				'porto_header_builder_elements_' . $key,
				array(
					'type'     => 'text',
					'label'    => esc_html( $element ),
					'section'  => 'porto_header_builder',
					'settings' => 'porto_header_builder_elements[' . $key . ']',
				)
			);
		}

		// selective refresh
		$settings = array( 'porto_header_builder[selected_layout]', 'porto_header_layouts_delete', 'porto_header_builder[type]', 'porto_header_builder[side_header_toggle]', 'porto_header_builder[side_header_toggle_logo]', 'porto_header_builder[side_header_disable_overlay]', 'porto_header_builder[side_header_toggle_desc]' );

		$header_elements = array(
			'top_left',
			'top_center',
			'top_right',
			'main_left',
			'main_center',
			'main_right',
			'bottom_left',
			'bottom_center',
			'bottom_right',
			'mobile_top_left',
			'mobile_top_center',
			'mobile_top_right',
			'mobile_main_left',
			'mobile_main_center',
			'mobile_main_right',
			'mobile_bottom_left',
			'mobile_bottom_center',
			'mobile_bottom_right',
		);
		foreach ( $header_elements as $key ) {
			$settings[] = 'porto_header_builder_elements[' . $key . ']';
		}
		$wp_customize->selective_refresh->add_partial(
			'header-wrapper',
			array(
				'selector'        => '.header-wrapper',
				'settings'        => $settings,
				'render_callback' => function() {
					global $porto_settings;
					$porto_settings['header-type-select'] = 'header_builder';
					return get_template_part( 'header/header_builder' );
				},
			)
		);

		$wp_customize->selective_refresh->add_partial(
			'refresh_css_header_builder',
			array(
				'selector'            => 'head > style#porto-style-inline-css',
				'container_inclusive' => false,
				'settings'            => array( 'porto_header_builder[type]', 'porto_header_builder[on_section]', 'porto_header_builder[side_header_toggle]', 'porto_header_builder[side_header_toggle]', 'porto_header_builder[side_header_toggle_desc]', 'porto_header_builder[side_header_width]' ),
				'render_callback'     => function() {
					global $porto_dynamic_style, $porto_settings;
					$porto_settings['header-type-select'] = 'header_builder';
					if ( $porto_dynamic_style ) {
						return $porto_dynamic_style->output_dynamic_styles( true );
					}
				},
			)
		);
	}

	public function add_new_header_layout() {
		if ( wp_verify_nonce( $_POST['nonce'], 'porto-header-builder' ) && isset( $_POST['header_layout_title'] ) ) {
			$header_layouts                                  = get_option( 'porto_header_builder_layouts', array() );
			$header_layouts[ $_POST['header_layout_title'] ] = array( 'name' => $_POST['header_layout_title'] );
			update_option( 'porto_header_builder_layouts', $header_layouts );
			echo json_encode( array( 'result' => 'success' ) );
			die();
		}
	}

	public function delete_header_layout() {
		if ( wp_verify_nonce( $_POST['nonce'], 'porto-header-builder' ) && isset( $_POST['header_layout'] ) && $_POST['header_layout'] ) {
			$header_layouts = get_option( 'porto_header_builder_layouts', array() );
			unset( $header_layouts[ $_POST['header_layout'] ] );
			update_option( 'porto_header_builder_layouts', $header_layouts );

			echo json_encode( array( 'result' => 'success' ) );
			die();
		}
	}

	public function load_header_elements() {
		if ( wp_verify_nonce( $_POST['nonce'], 'porto-customizer' ) && isset( $_POST['header_layout'] ) ) {
			$header_layouts = get_option( 'porto_header_builder_layouts', array() );
			if ( ! empty( $_POST['header_layout'] ) && isset( $header_layouts[ $_POST['header_layout'] ] ) && isset( $header_layouts[ $_POST['header_layout'] ]['elements'] ) ) {
				echo json_encode( $header_layouts[ $_POST['header_layout'] ] );
			}
		}
		die();
	}

	public function save_header_layout_values( $obj ) {
		$porto_header_builder_elements = get_option( 'porto_header_builder_elements', array() );
		$current_header                = get_option( 'porto_header_builder', array() );
		if ( isset( $current_header['selected_layout'] ) && $current_header['selected_layout'] ) {
			$header_layouts = get_option( 'porto_header_builder_layouts', array() );
			$header_layouts[ $current_header['selected_layout'] ]['elements'] = $porto_header_builder_elements;

			if ( isset( $current_header['custom_css'] ) && $current_header['custom_css'] ) {
				$header_layouts[ $current_header['selected_layout'] ]['custom_css'] = $current_header['custom_css'];
			}
			if ( isset( $current_header['type'] ) ) {
				$header_layouts[ $current_header['selected_layout'] ]['type'] = $current_header['type'];

				if ( 'side' == $current_header['type'] ) {
					if ( isset( $current_header['side_header_toggle'] ) ) {
						$header_layouts[ $current_header['selected_layout'] ]['side_header_toggle'] = $current_header['side_header_toggle'];
					}
					if ( isset( $current_header['side_header_toggle_logo'] ) ) {
						$header_layouts[ $current_header['selected_layout'] ]['side_header_toggle_logo'] = $current_header['side_header_toggle_logo'];
					}
					if ( isset( $current_header['side_header_disable_overlay'] ) ) {
						$header_layouts[ $current_header['selected_layout'] ]['side_header_disable_overlay'] = $current_header['side_header_disable_overlay'];
					}
					if ( isset( $current_header['side_header_toggle_desc'] ) ) {
						$header_layouts[ $current_header['selected_layout'] ]['side_header_toggle_desc'] = $current_header['side_header_toggle_desc'];
					}
					if ( isset( $current_header['side_header_width'] ) ) {
						$header_layouts[ $current_header['selected_layout'] ]['side_header_width'] = $current_header['side_header_width'];
					}
				}
			}

			update_option( 'porto_header_builder_layouts', $header_layouts );

			// save default theme options when using header preset
			if ( isset( $current_header['preset'] ) && $current_header['preset'] && ! get_theme_mod( 'theme_options_use_new_style', false ) ) {
				$header_presets = porto_header_builder_presets();
				if ( isset( $header_presets[ $current_header['preset'] ] ) && isset( $header_presets[ $current_header['preset'] ]['options'] ) ) {
					$defalt_options = $header_presets[ $current_header['preset'] ]['options'];

					global $reduxPortoSettings;
					if ( empty( $reduxPortoSettings->ReduxFramework->options ) ) {
						$reduxPortoSettings->ReduxFramework->get_options();
					}
					$orig_options = $reduxPortoSettings->ReduxFramework->options;
					$changed      = false;
					foreach ( $defalt_options as $key => $value ) {
						if ( ! isset( $orig_options[ $key ] ) || $orig_options[ $key ] != $value || ( isset( $orig_options[ $key ] ) && ! empty( $orig_options[ $key ] ) && empty( $value ) ) ) {
							$orig_options[ $key ] = $value;
							$changed              = true;
						}
					}

					if ( $changed ) {
						$reduxPortoSettings->ReduxFramework->set_options( $orig_options );
					}

					$current_header['preset'] = '';
					update_option( 'porto_header_builder', $current_header );
				}
			}

			porto_save_theme_settings();
		}
	}

	public function add_header_builder_content() {
		?>
		<div class="porto-header-builder">
			<div class="header-builder-header">
				<h3><?php esc_html_e( 'Header Builder', 'porto' ); ?></h3>
				<div class="devices-wrapper">
					<a href="#" class="preview-desktop active"></a>
					<a href="#" class="preview-mobile"></a>
				</div>
				<div class="actions">
					<a href="https://youtu.be/pk2W281QUa8" class="button" target="_blank"><?php esc_html_e( 'Tutorial', 'porto' ); ?></a>
					<a href="#" class="button button-clear"><?php esc_html_e( 'Clear All', 'porto' ); ?></a>
					<a href="#" class="button button-close"><?php esc_html_e( 'Close', 'porto' ); ?></a>
				</div>
			</div>
			<div class="header-wrapper-desktop">
				<div class="header-builder porto-header-builder-items porto-lg-visible">
					<p class="description"><strong><?php esc_html_e( 'Elements', 'porto' ); ?></strong><br /><?php esc_html_e( 'Drag &amp; Drop', 'porto' ); ?></p>
					<div class="porto-header-builder-list porto-drop-item">
						<?php
						foreach ( $this->elements as $key => $value ) {
							if ( in_array( $key, $this->mobile_elements ) ) {
								continue;
							}
							$class = array();
							if ( in_array( $key, $this->container_elements ) ) {
								$class[] = 'element-cont';
							}
							if ( in_array( $key, $this->infinite_elements ) ) {
								$class[] = 'element-infinite';
							}
							if ( ! empty( $class ) ) {
								$class = 'class="' . implode( ' ', $class ) . '"';
							} else {
								$class = '';
							}
							if ( in_array( $key, $this->container_elements ) ) {
								echo '<span data-id="' . $key . '"' . $class . '>' . $value . '<b class="dashicons dashicons dashicons-plus"></b></span>';
							} else {
								echo '<span data-id="' . $key . '"' . $class . '>' . $value . '<i class="dashicons dashicons-admin-generic"></i></span>';
							}
						}
						?>
					</div>
				</div>
				<div class="header-builder-desktop header-builder-wrapper">
					<div class="header-builder porto-header-builder-top">
						<a class="porto-header-builder-tooltip" href="#" data-id="porto_settings[header-top-bg-color]" data-type="control"><?php esc_html_e( 'Header Top', 'porto' ); ?><i class="dashicons dashicons-admin-generic"></i></a>
						<div class="porto-header-builder-left porto-drop-item" data-id="porto_header_builder_elements[top_left]">
						</div>
						<div class="porto-header-builder-center porto-drop-item" data-id="porto_header_builder_elements[top_center]">
						</div>
						<div class="porto-header-builder-right porto-drop-item" data-id="porto_header_builder_elements[top_right]">
						</div>
					</div>
					<div class="header-builder porto-header-builder-main">
						<a class="porto-header-builder-tooltip" href="#" data-id="porto_settings[header-bg]" data-type="control"><?php esc_html_e( 'Header Main', 'porto' ); ?><i class="dashicons dashicons-admin-generic"></i></a>
						<div class="porto-header-builder-left porto-drop-item" data-id="porto_header_builder_elements[main_left]">
						</div>
						<div class="porto-header-builder-center porto-drop-item" data-id="porto_header_builder_elements[main_center]">
						</div>
						<div class="porto-header-builder-right porto-drop-item" data-id="porto_header_builder_elements[main_right]">
						</div>
					</div>
					<div class="header-builder porto-header-builder-bottom">
						<a class="porto-header-builder-tooltip" href="#" data-id="porto_settings[header-bottom-text-color]" data-type="control"><?php esc_html_e( 'Header Bottom', 'porto' ); ?><i class="dashicons dashicons-admin-generic"></i></a>
						<div class="porto-header-builder-left porto-drop-item" data-id="porto_header_builder_elements[bottom_left]">
						</div>
						<div class="porto-header-builder-center porto-drop-item" data-id="porto_header_builder_elements[bottom_center]">
						</div>
						<div class="porto-header-builder-right porto-drop-item" data-id="porto_header_builder_elements[bottom_right]">
						</div>
					</div>
				</div>
			</div>
			<div class="header-wrapper-mobile">
				<div class="header-builder porto-header-builder-items porto-sm-visible">
					<p class="description"><strong><?php esc_html_e( 'Elements', 'porto' ); ?></strong><br /><?php esc_html_e( 'Drag &amp; Drop', 'porto' ); ?></p>
					<div class="porto-header-builder-list porto-drop-item-mobile">
						<?php
						foreach ( $this->elements as $key => $value ) {
							if ( in_array( $key, $this->desktop_elements ) ) {
								continue;
							}
							$class = array();
							if ( in_array( $key, $this->container_elements ) ) {
								$class[] = 'element-cont';
							}
							if ( in_array( $key, $this->infinite_elements ) ) {
								$class[] = 'element-infinite';
							}
							if ( ! empty( $class ) ) {
								$class = 'class="' . implode( ' ', $class ) . '"';
							} else {
								$class = '';
							}
							if ( in_array( $key, $this->container_elements ) ) {
								echo '<span data-id="' . $key . '"' . $class . '>' . $value . '<b class="dashicons dashicons dashicons-plus"></b></span>';
							} else {
								echo '<span data-id="' . $key . '"' . $class . '>' . $value . '<i class="dashicons dashicons-admin-generic"></i></span>';
							}
						}
						?>
					</div>
				</div>
				<div class="header-builder-mobile header-builder-wrapper">
					<div class="header-builder porto-header-builder-top">
						<a class="porto-header-builder-tooltip" href="#" data-id="porto_settings[header-bg]" data-type="control"><?php esc_html_e( 'Header Main', 'porto' ); ?><i class="dashicons dashicons-admin-generic"></i></a>
						<div class="porto-header-builder-left porto-drop-item-mobile" data-id="porto_header_builder_elements[mobile_top_left]">
						</div>
						<div class="porto-header-builder-center porto-drop-item-mobile" data-id="porto_header_builder_elements[mobile_top_center]">
						</div>
						<div class="porto-header-builder-right porto-drop-item-mobile" data-id="porto_header_builder_elements[mobile_top_right]">
						</div>
					</div>
					<div class="header-builder porto-header-builder-main">
						<a class="porto-header-builder-tooltip" href="#" data-id="porto_settings[header-bg]" data-type="control"><?php esc_html_e( 'Header Main', 'porto' ); ?><i class="dashicons dashicons-admin-generic"></i></a>
						<div class="porto-header-builder-left porto-drop-item-mobile" data-id="porto_header_builder_elements[mobile_main_left]">
						</div>
						<div class="porto-header-builder-center porto-drop-item-mobile" data-id="porto_header_builder_elements[mobile_main_center]">
						</div>
						<div class="porto-header-builder-right porto-drop-item-mobile" data-id="porto_header_builder_elements[mobile_main_right]">
						</div>
					</div>
					<div class="header-builder porto-header-builder-bottom">
						<a class="porto-header-builder-tooltip" href="#" data-id="porto_settings[header-bottom-text-color]" data-type="control"><?php esc_html_e( 'Header Bottom', 'porto' ); ?><i class="dashicons dashicons-admin-generic"></i></a>
						<div class="porto-header-builder-left porto-drop-item-mobile" data-id="porto_header_builder_elements[mobile_bottom_left]">
						</div>
						<div class="porto-header-builder-center porto-drop-item-mobile" data-id="porto_header_builder_elements[mobile_bottom_center]">
						</div>
						<div class="porto-header-builder-right porto-drop-item-mobile" data-id="porto_header_builder_elements[mobile_bottom_right]">
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php
	}

	public function add_scripts() {
		?>
		<script type="text/javascript">
			jQuery( document ).ready( function( $ ) {
				wp.customize.bind( 'ready', function() { // Ready?
					var selectedLayout = wp.customize.instance('porto_header_builder[selected_layout]').get();
					if (!selectedLayout) {
						$('.porto_delete_header_layout_link, #customize-control-porto_header_layouts_custom_css').hide();
					}
					$('#customize-control-porto_header_layouts_title, #customize-control-porto_header_layouts_create_button').hide();
					$('.porto_create_new_header_layout_link').on('click', function() {
						$('#customize-control-porto_header_layouts_title, #customize-control-porto_header_layouts_create_button').slideDown();
						$('#customize-control-porto_header_layouts_title input[type=text]').focus();
					});
					$('#customize-control-porto_header_layouts_title input[type=text]').on('keyup', function(e) {
						if (typeof e.keyCode != 'undefined' && e.keyCode === 13) {
							$('.porto_header_builder_new').trigger('click');
						}
					});

					$('#customize-control-porto_header_layouts_block_element, #customize-control-porto_header_layouts_html_element, #customize-control-porto_header_layouts_el_class, #customize-control-porto_header_layouts_save_html_button').hide();

					var sideHeaderOptions = ['porto_header_layouts_side_header_toggle', 'porto_header_layouts_side_header_toggle_logo', 'porto_header_layouts_side_header_toggle_desc', 'porto_header_layouts_side_header_width'],
						sideHeaderToggleOptions = ['porto_header_layouts_side_header_toggle_logo', 'porto_header_layouts_side_header_toggle_desc'];
					if (wp.customize.instance('porto_header_builder[type]').get() != 'side') {
						for (var i in sideHeaderOptions) {
							wp.customize.control(sideHeaderOptions[i]).container.hide();
						}
					}
					if (wp.customize.instance('porto_header_builder[side_header_toggle]').get() == '') {
						for (var i in sideHeaderToggleOptions) {
							wp.customize.control(sideHeaderToggleOptions[i]).container.hide();
						}
					}
					wp.customize.control('porto_header_layouts_type').container.find('select').on('change', function() {
						if ('side' == $(this).val()) {
							for (var i in sideHeaderOptions) {
								wp.customize.control(sideHeaderOptions[i]).container.show();
							}
						} else {
							for (var i in sideHeaderOptions) {
								wp.customize.control(sideHeaderOptions[i]).container.hide();
							}
						}
						wp.customize.control('porto_header_layouts_side_header_toggle').container.find('select').trigger('change');
					});
					wp.customize.control('porto_header_layouts_side_header_toggle').container.find('select').on('change', function() {
						if ($(this).val()) {
							for (var i in sideHeaderToggleOptions) {
								wp.customize.control(sideHeaderToggleOptions[i]).container.show();
							}
						} else {
							for (var i in sideHeaderToggleOptions) {
								wp.customize.control(sideHeaderToggleOptions[i]).container.hide();
							}
						}
						if ('top' == $(this).val()) {
							wp.customize.control('porto_header_layouts_side_header_disable_overlay').container.show();
						} else {
							wp.customize.control('porto_header_layouts_side_header_disable_overlay').container.hide();
						}
					});
				});

				$(document.body).on('click', '.porto_header_builder_new', function(e) {
					var title = $('#customize-control-porto_header_layouts_title input[type="text"]').val().trim(),
						$this = $(this);
					if (!title) {
						return;
					}
					$this.attr('disabled', 'disabled');
					$.ajax({
						url: '<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>',
						data:{ wp_customize: 'on', action: 'porto_add_new_header_layout', nonce: '<?php echo wp_create_nonce( 'porto-header-builder' ); ?>', header_layout_title: title},
						type: 'post',
						success: function(response) {
							$this.removeAttr('disabled');
							$('#customize-control-porto_header_layouts_title, #customize-control-porto_header_layouts_create_button').slideUp();
							if (!$('#customize-control-porto_header_layouts_select select option[val="' + title + '"]').length) {
								$('#customize-control-porto_header_layouts_select select').append('<option val="' + title + '">' + title + '</option>');
							}
							$('#customize-control-porto_header_layouts_select select option').removeAttr('selected');
							$('#customize-control-porto_header_layouts_select select option[val="' + title + '"]').attr('selected', 'selected');
							$('#customize-control-porto_header_layouts_select select').trigger('change');
						}
					})
				});
				$(document.body).on('click', '.porto_delete_header_layout_link', function(e) {
					if (confirm('You are about to permanently delete this header layout.\n\'Cancel\' to stop, \'OK\' to delete.')) {
						var $this = $(this);
						if ($this.hasClass('disabled')) {
							return false;
						}
						$this.addClass('disabled');
						$.ajax({
							url: '<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>',
							data:{ wp_customize: 'on', action: 'porto_delete_header_layout', nonce: '<?php echo wp_create_nonce( 'porto-header-builder' ); ?>', header_layout: $('#customize-control-porto_header_layouts_select select').val()},
							type: 'post',
							success: function(response) {
								$this.removeClass('disabled');
								$('#customize-control-porto_header_layouts_select select option:selected').remove();
								$('#customize-control-porto_header_layouts_select select').trigger('change');
							}
						});
					}
				});
			});
		</script>
		<?php
	}

	public function add_js() {
		$admin_vars = array(
			'header_builder_presets' => json_encode( porto_header_builder_presets() ),
		);
		wp_localize_script( 'porto-admin', 'js_porto_hb_vars', $admin_vars );
	}

	public function sanitize_number_value( $value ) {
		if ( ! preg_match( '#[0-9]#', $value ) ) {
			return '';
		}
		return $value;
	}
	public function sanitize_boolean_value( $value ) {
		if ( $value ) {
			return '1';
		}
		return '';
	}
}

new Porto_Header_Builder();
