<?php
/**
 * Slide Menu element.
 *
 * @package BricksExtras
 */

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

/**
 * Slide Menu element class.
 */
class X_Slide_Menu extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xslidemenu';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-view-list-alt';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';
	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xSlideMenu' );
	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;

	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Slide menu', 'bricksextras' );
	}

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

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

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

		$this->control_groups['sub-menu'] = array(
			'title' => esc_html__( 'Sub menu', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['icons'] = array(
			'title' => esc_html__( 'Toggle Icons', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['state'] = array(
			'title' => esc_html__( 'Initial state', 'bricksextras' ),
			'tab'   => 'content',
		);
	}

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

		$nav_menus = array();

		if ( bricks_is_builder() ) {
			foreach ( wp_get_nav_menus() as $menu ) {
				$nav_menus[ $menu->term_id ] = $menu->name;
			}
		}

		$this->controls['menuSource'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Source', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'dropdown' => esc_html__( 'Select', 'bricks' ),
				'dynamic'  => esc_html__( 'Dynamic data', 'bricks' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Select option', 'bricks' ),
		);

		$this->controls['menu_id'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Menu name, menu slug or menu ID', 'bricksextras' ),
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => '',
			'required'    => array( 'menuSource', '=', 'dynamic' ),
		);

		$this->controls['menu'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Menu', 'bricks' ),
			'type'        => 'select',
			'options'     => $nav_menus,
			'placeholder' => esc_html__( 'Select nav menu', 'bricks' ),
			'description' => sprintf( '<a href="' . admin_url( 'nav-menus.php' ) . '" target="_blank">' . esc_html__( 'Manage my menus in WordPress.', 'bricks' ) . '</a>' ),
			'required'    => array( 'menuSource', '!=', 'dynamic' ),
		);

		$this->controls['menu_width'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Width', 'bricks' ),
			'inline'      => true,
			'type'        => 'number',
			'units'       => true,
			'placeholder' => '100%',
			'css'         => array(
				array(
					'selector' => '',
					'property' => 'width',
				),
			),
		);

		$this->controls['slideDuration'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Duration', 'bricks' ) . ' (ms)',
			'type'        => 'number',
			'min'         => 0,
			'max'         => 1000,
			'step'        => 1,
			'inline'      => true,
			'placeholder' => '200',
		);

		$this->controls['maybeNestable'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Add elements', 'bricks' ) . ' (' . esc_html__( 'Nestable', 'bricks' ) . ')',
			'type'        => 'select',
			'inline'      => true,
			'options'     => array(
				'disable' => esc_html__( 'Disable', 'bricks' ),
				'above'   => esc_html__( 'Before', 'bricks' ),
				'below'   => esc_html__( 'After', 'bricks' ),
			),
			'clearable'   => false,
			'placeholder' => esc_html__( 'Disable', 'bricks' ),
		);

		$this->controls['menuDirection'] = array(
			'tab'         => 'content',
			'type'        => 'select',
			'inline'      => true,
			'label'       => esc_html__( 'Direction', 'bricks' ),
			'options'     => array(
				'ltr' => esc_html__( 'Left to right', 'bricks' ),
				'rtl' => esc_html__( 'Right to left', 'bricks' ),
			),
			'css'         => array(
				array(
					'property' => 'direction',
					'selector' => '',
				),
			),
			'placeholder' => esc_html__( 'Left to right', 'bricks' ),
		);

		/* menu items */

		$menu_item_link_selector = '.menu-item a';

		$this->controls['menu_sep'] = array(
			'tab'   => 'content',
			'group' => 'menu',
			'type'  => 'separator',
			'label' => esc_html__( 'Links', 'bricks' ),
		);

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

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

		$this->controls['menuTypography'] = array(
			'tab'   => 'content',
			'group' => 'menu',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => $menu_item_link_selector,
				),
				array(
					'property' => 'font',
					'selector' => '.menu-item',
				),
			),
		);

		$this->controls['menuPadding_sep'] = array(
			'tab'   => 'content',
			'group' => 'menu',
			'type'  => 'separator',
		);

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

		$this->controls['menuMargin'] = array(
			'tab'   => 'content',
			'group' => 'menu',
			'label' => esc_html__( 'Margin', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'margin',
					'selector' => '.x-slide-menu_icon-wrapper',
				),
				array(
					'property' => 'margin',
					'selector' => '.menu-item a',
				),
			),
		);

		$this->controls['menu_active_sep'] = array(
			'tab'   => 'content',
			'group' => 'menu',
			'type'  => 'separator',
			'label' => esc_html__( 'Links', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
		);

		$this->controls['menuActiveBackground'] = array(
			'tab'   => 'content',
			'group' => 'menu',
			'label' => esc_html__( 'Background', 'bricks' ),
			'type'  => 'background',
			'css'   => array(
				array(
					'property' => 'background',
					'selector' => '.x-slide-menu_list > .current-menu-item > a',
				),
				array(
					'property' => 'background',
					'selector' => '.x-slide-menu_list > .current-menu-ancestor > a',
				),
				array(
					'property' => 'background',
					'selector' => '.x-slide-menu_list > .current-menu-parent > a',
				),
			),
		);

		$this->controls['menuActiveBorder'] = array(
			'tab'   => 'content',
			'group' => 'menu',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-slide-menu_list > .current-menu-item > a',
				),
				array(
					'property' => 'border',
					'selector' => '.x-slide-menu_list > .current-menu-ancestor > a',
				),
				array(
					'property' => 'border',
					'selector' => '.x-slide-menu_list > .current-menu-parent > a',
				),
			),
		);

		$this->controls['menuActiveTypography'] = array(
			'tab'   => 'content',
			'group' => 'menu',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-slide-menu_list > .current-menu-item > a',
				),
				array(
					'property' => 'font',
					'selector' => '.x-slide-menu_list > .current-menu-ancestor > a',
				),
				array(
					'property' => 'font',
					'selector' => '.x-slide-menu_list > .current-menu-parent > a',
				),
			),
		);

		/* sub menu */

		$this->controls['megaMenu'] = array(
			'group' => 'sub-menu',
			'type'  => 'checkbox',
			'label' => esc_html__( 'Template', 'bricks' ) . ' (' . esc_html__( 'Mega menu', 'bricks' ) . ')',
		);

		// Sub menu - Item.
		$this->controls['subMenuItemSeparator'] = array(
			'tab'   => 'content',
			'group' => 'sub-menu',
			'label' => esc_html__( 'Links', 'bricks' ) . ' (' . esc_html__( 'Sub menu', 'bricks' ) . ')',
			'type'  => 'separator',
		);

		$this->controls['subMenuBackground'] = array(
			'tab'   => 'content',
			'group' => 'sub-menu',
			'type'  => 'background',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background',
					'selector' => '.x-slide-menu_list .sub-menu li.menu-item > a',
				),
			),
		);

		$this->controls['subMenuItemBorder'] = array(
			'tab'   => 'content',
			'group' => 'sub-menu',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-slide-menu_list .sub-menu > li > a',
				),
			),
		);

		$this->controls['subMenuTypography'] = array(
			'tab'   => 'content',
			'group' => 'sub-menu',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-slide-menu_list .sub-menu > li.menu-item > a',
				),
			),
		);

		$this->controls['subMenuTextIndent'] = array(
			'tab'         => 'content',
			'group'       => 'sub-menu',
			'type'        => 'number',
			'step'        => '1',
			'units'       => 'px',
			'label'       => esc_html__( 'Sub menu text indent', 'bricksextras' ),
			'placeholder' => '',
			'css'         => array(
				array(
					'property' => '--x-slide-menu-indent',
					'selector' => '.x-slide-menu_list',
				),
			),
		);

		$this->controls['subMenuPadding'] = array(
			'tab'   => 'content',
			'group' => 'sub-menu',
			'type'  => 'spacing',
			'label' => esc_html__( 'Padding', 'bricks' ) . ' (' . esc_html__( 'Links', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => '.x-slide-menu_list .sub-menu > li.menu-item > a',
				),
			),
		);

		$this->controls['subMenuAriaLabel_sep'] = array(
			'tab'   => 'content',
			'group' => 'sub-menu',
			'type'  => 'separator',
		);

		$this->controls['subMenuAriaLabel'] = array(
			'tab'         => 'content',
			'group'       => 'sub-menu',
			'label'       => 'aria-label (' . esc_html__( 'Toggle', 'bricks' ) . ')',
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => 'Toggle sub menu',
		);

		$this->controls['sub_menu_active_sep'] = array(
			'tab'   => 'content',
			'group' => 'sub-menu',
			'type'  => 'separator',
			'label' => esc_html__( 'Links', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
		);

		$this->controls['subMenuActiveBackground'] = array(
			'tab'   => 'content',
			'group' => 'sub-menu',
			'type'  => 'background',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background',
					'selector' => '.x-slide-menu_list .sub-menu > li.current-menu-item > a',
				),
			),
		);

		$this->controls['subMenuItemActiveBorder'] = array(
			'tab'   => 'content',
			'group' => 'sub-menu',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-slide-menu_list .sub-menu > li.current-menu-item > a',
				),
			),
		);

		$this->controls['subMenuActiveTypography'] = array(
			'tab'   => 'content',
			'group' => 'sub-menu',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-slide-menu_list .sub-menu > li.current-menu-item > a',
				),
			),
		);

		/* icons */

		$this->controls['icon'] = array(
			'tab'   => 'content',
			'group' => 'icons',
			'label' => esc_html__( 'Toggle Icon', 'bricks' ),
			'type'  => 'icon',
			'css'   => array(
				array(
					'selector' => '.x-slide-menu_dropdown-icon > *',
				),
			),
		);

		$this->controls['subMenuArrowSize'] = array(
			'tab'         => 'content',
			'group'       => 'icons',
			'type'        => 'number',
			'min'         => 0,
			'max'         => 10,
			'step'        => '.1',
			'units'       => 'em',
			'label'       => esc_html__( 'Icon size', 'bricks' ),
			'placeholder' => '1em',
			'css'         => array(
				array(
					'property' => 'font-size',
					'selector' => '.x-slide-menu_dropdown-icon',
				),
			),
		);

		$this->controls['menuStructure'] = array(
			'tab'         => 'content',
			'group'       => 'icons',
			'label'       => esc_html__( 'Positioning', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'nested'  => esc_html__( 'Nested', 'bricksextras' ),
				'sibling' => esc_html__( 'Sibling', 'bricksextras' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Nested', 'bricksextras' ),
		);

		$this->controls['iconBackgroundColor'] = array(
			'group' => 'icons',
			'label' => esc_html__( 'Toggle background', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-slide-menu_dropdown-icon',
				),
			),
		);

		$this->controls['iconBorder'] = array(
			'group' => 'icons',
			'label' => esc_html__( 'Toggle border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-slide-menu_dropdown-icon',
				),
			),
		);

		$this->controls['iconWidth'] = array(
			'group'       => 'icons',
			'label'       => esc_html__( 'Toggle width', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'width',
					'selector' => '.x-slide-menu_dropdown-icon',
				),
			),
			'placeholder' => '2em',
		);

		$this->controls['iconHeight'] = array(
			'group'       => 'icons',
			'label'       => esc_html__( 'Toggle height', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'height',
					'selector' => '.x-slide-menu_dropdown-icon',
				),
			),
			'placeholder' => '2em',
		);

		$this->controls['iconPadding'] = array(
			'group' => 'icons',
			'label' => esc_html__( 'Toggle padding', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => '.x-slide-menu_dropdown-icon',
				),
			),
		);

		$this->controls['iconMargin'] = array(
			'group' => 'icons',
			'label' => esc_html__( 'Toggle margin', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'margin',
					'selector' => '.x-slide-menu_dropdown-icon',
				),
			),
		);

		$this->controls['iconTypography'] = array(
			'group' => 'icons',
			'label' => esc_html__( 'Icon typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-slide-menu_dropdown-icon',
				),
			),
		);

		$this->controls['iconTypographyOpened'] = array(
			'group' => 'icons',
			'label' => esc_html__( 'Icon typography', 'bricks' ) . ' (' . esc_html__( 'Expanded', 'bricks' ) . ')',
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-slide-menu_dropdown-icon[aria-expanded=true]',
				),
			),
		);

		$this->controls['iconBackgroundColorOpened'] = array(
			'group' => 'icons',
			'label' => esc_html__( 'Toggle background', 'bricks' ) . ' (' . esc_html__( 'Expanded', 'bricks' ) . ')',
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-slide-menu_dropdown-icon[aria-expanded=true]',
				),
			),
		);

		$this->controls['iconTransform'] = array(
			'tab'     => 'style',
			'group'   => 'icons',
			'type'    => 'transform',
			'label'   => esc_html__( 'Icon transform', 'bricks' ) . ' (' . esc_html__( 'Expanded', 'bricks' ) . ')',
			'css'     => array(
				array(
					'selector' => '&.brxe-xslidemenu .x-slide-menu_dropdown-icon[aria-expanded=true] > *',
					'property' => 'transform',
				),
			),
			'default' => array(
				'rotateX' => '180deg',
			),
			'inline'  => true,
			'small'   => true,
		);

		/* state */

		$this->controls['defaultState'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Initial state', 'bricksextras' ),
			'group'       => 'state',
			'type'        => 'select',
			'options'     => array(
				'open'   => esc_html__( 'Open', 'bricks' ),
				'hidden' => esc_html__( 'Hidden', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Open', 'bricks' ),
			'clearable'   => false,
		);

		$this->controls['clickSelector'] = array(
			'tab'            => 'content',
			'label'          => esc_html__( 'CSS selector', 'bricks' ) . ' (' . esc_html__( 'Trigger', 'bricks' ) . ')',
			'group'          => 'state',
			'type'           => 'text',
			'inline'         => true,
			'placeholder'    => '.my-element',
			'required'       => array( 'defaultState', '=', 'hidden' ),
			'hasDynamicData' => false,
			'rerender'       => false,
		);

		$this->controls['builderPreview'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Preview', 'bricks' ) . ' (' . esc_html__( 'Builder', 'bricks' ) . ')',
			'group'       => 'state',
			'type'        => 'select',
			'options'     => array(
				'open'   => esc_html__( 'Open', 'bricks' ),
				'hidden' => esc_html__( 'Hidden', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Hidden', 'bricks' ),
			'clearable'   => false,
			'required'    => array( 'defaultState', '=', 'hidden' ),
		);

		$this->controls['maybeExpandActive'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Expand to show active item', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'enable'  => esc_html__( 'Enable', 'bricks' ),
				'disable' => esc_html__( 'Disable', 'bricks' ),
			),
			'clearable'   => false,
			'inline'      => true,
			'placeholder' => esc_html__( 'Disable', 'bricks' ),
			'group'       => 'state',
		);
	}


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

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'x-slide-menu', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'slidemenu' ) . '.js', array( 'x-frontend' ), \BricksExtras\Plugin::VERSION, true );

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

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

		$menu_source         = isset( $this->settings['menuSource'] ) ? esc_attr( $this->settings['menuSource'] ) : 'dropdown';
		$maybe_nestable      = isset( $this->settings['maybeNestable'] ) ? $this->settings['maybeNestable'] : 'disable';
		$sub_menu_aria_label = isset( $this->settings['subMenuAriaLabel'] ) ? bricks_render_dynamic_data( $this->settings['subMenuAriaLabel'] ) : 'Toggle sub menu';

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

		if ( 'dropdown' === $menu_source ) {
			$menu = ! empty( $this->settings['menu'] ) ? $this->settings['menu'] : '';

			if ( ! $menu || ! is_nav_menu( $menu ) ) {
				// Use first registered menu.
				foreach ( wp_get_nav_menus() as $menu ) {
					$menu = $menu->term_id;
				}

				if ( ! $menu || ! is_nav_menu( $menu ) ) {
					return $this->render_element_placeholder(
						array(
							'title' => esc_html__( 'No nav menu found.', 'bricks' ),
						)
					);
				}
			}
		} else {
					$menu = ! empty( $this->settings['menu_id'] ) ? strstr( $this->settings['menu_id'], '{' ) ? $this->render_dynamic_data_tag( $this->settings['menu_id'], 'text' ) : $this->settings['menu_id'] : '';
		}

		$default_state       = isset( $this->settings['defaultState'] ) ? $this->settings['defaultState'] : 'open';
		$builder_preview     = isset( $this->settings['builderPreview'] ) ? $this->settings['builderPreview'] : 'hidden';
		$maybe_expand_active = isset( $this->settings['maybeExpandActive'] ) ? 'enable' === esc_attr( $this->settings['maybeExpandActive'] ) : false;

		$menu_structure = isset( $this->settings['menuStructure'] ) ? $this->settings['menuStructure'] : 'nested';

		$menu_config = array(
			'slideDuration'     => ! empty( $this->settings['slideDuration'] ) ? intval( $this->settings['slideDuration'] ) : 200,
			'subMenuAriaLabel'  => $sub_menu_aria_label,
			'maybeExpandActive' => $maybe_expand_active,
			'menuStructure'     => $menu_structure,
		);

		if ( 'hidden' === $default_state ) {

			$menu_config += array(
				'clickSelector' => ! empty( $this->settings['clickSelector'] ) ? $this->settings['clickSelector'] : null,
			);

		}

		if ( 'hidden' !== $builder_preview ) {

			$menu_config += array(
				'hidden' => 'true',
			);

		}

		if ( $maybe_expand_active ) {
			$this->set_attribute( '_root', 'data-x-expand-current', 'true' );
		}

		// Generate and set a unique identifier for this instance.
		$indentifier = \BricksExtras\Helpers::set_identifier_attribute( $this );

		$this->set_attribute( '_root', 'data-x-slide-menu', wp_json_encode( $menu_config ) );

		if ( $menu && is_nav_menu( $menu ) ) {

			$output = '';

			// Hook for mega menu template rendering.
			add_filter( 'nav_menu_css_class', array( $this, 'nav_menu_css_class' ), 10, 4 );
			add_filter( 'walker_nav_menu_start_el', array( $this, 'walker_nav_menu_start_el' ), 10, 4 );

			// Add filter to remove sub-menu items for menu items with mega menu templates.
			add_filter( 'wp_get_nav_menu_items', array( $this, 'filter_mega_menu_children' ), 10, 3 );

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

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

			ob_start();

			wp_nav_menu(
				array(
					'menu'       => $menu,
					'menu_class' => 'x-slide-menu_list',
					'container'  => 'false',
				)
			);

			$nav_menu_output = ob_get_clean();

			// Remove filters after menu has been generated.
			remove_filter( 'wp_get_nav_menu_items', array( $this, 'filter_mega_menu_children' ), 10 );
			remove_filter( 'nav_menu_css_class', array( $this, 'nav_menu_css_class' ), 10 );
			remove_filter( 'walker_nav_menu_start_el', array( $this, 'walker_nav_menu_start_el' ), 10 );

			$output .= $nav_menu_output;

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

			if ( $icon ) {
				$output .= '<div style="display:none;" class="x-sub-menu-icon">' . $icon . '</div>';
			}

			$output .= '</nav>';

			echo $output;

		}
	}


	/**
	 * Walker nav menu start element (outputting mega menu template).
	 *
	 * @param string $output Menu item output.
	 * @param object $item Menu item object.
	 * @param int    $depth Menu item depth.
	 * @param object $args Menu arguments.
	 */
	public function walker_nav_menu_start_el( $output, $item, $depth, $args ) {

		$mega_menu_template_id = $this->get_mega_menu_template_id( $item->ID );

		// abort if no mega menu template.
		if ( is_array( $item->classes ) && ! in_array( 'menu-item-has-children', $item->classes, true ) && ! $mega_menu_template_id ) {
			return $output;
		}

		// Append mega menu template HTML to menu item.
		if ( $mega_menu_template_id ) {
			$output .= '<div class="brxe-xslidemenu_mega-menu sub-menu" data-menu-id="' . $item->ID . '">';
			$output .= do_shortcode( "[bricks_template id=\"$mega_menu_template_id\"]" );
			$output .= '</div>';
		}

		return $output;
	}

	/**
	 * Add nav menu CSS class.
	 *
	 * @param array  $classes CSS classes array.
	 * @param object $menu_item Menu item object.
	 * @param object $args Menu arguments.
	 * @param int    $depth Menu item depth.
	 */
	public function nav_menu_css_class( $classes, $menu_item, $args, $depth ) {

		if ( isset( $this->settings['megaMenu'] ) && isset( $args->menu_class ) && 'x-slide-menu_list' === $args->menu_class ) {

			$mega_menu_template_id = $this->get_mega_menu_template_id( $menu_item->ID );

			if ( $mega_menu_template_id ) {
				if ( ! in_array( 'menu-item-has-children', $classes, true ) ) {
					$classes[] = 'menu-item-has-children';
				}
			}
		}

		if ( ! bricks_is_builder() && ! bricks_is_builder_call() ) {
			return $classes;
		}

		return $classes;
	}

	/**
	 * Filter menu items to remove children of items with mega menu templates
	 *
	 * @param array  $items Array of menu items.
	 * @param object $menu The menu object.
	 * @param array  $args The arguments used to retrieve menu item objects.
	 * @return array Filtered menu items.
	 */
	public function filter_mega_menu_children( $items, $menu, $args ) {

		if ( empty( $items ) || ! isset( $this->settings['megaMenu'] ) ) {
			return $items;
		}

		$mega_menu_parents = array();

		// First, identify all menu items with mega menu templates.
		foreach ( $items as $item ) {
			$mega_menu_template_id = $this->get_mega_menu_template_id( $item->ID );
			if ( $mega_menu_template_id ) {
				$mega_menu_parents[] = $item->ID;
			}
		}

		// Then remove all children of those menu items.
		if ( ! empty( $mega_menu_parents ) ) {
			foreach ( $items as $key => $item ) {
				if ( in_array( $item->menu_item_parent, $mega_menu_parents, true ) ) {
					unset( $items[ $key ] );
				}
			}
		}

		return $items;
	}


	/**
	 * Get mega menu template ID.
	 *
	 * @param int $menu_item_id Menu item ID.
	 */
	public function get_mega_menu_template_id( $menu_item_id ) {

		if ( ! isset( $this->settings['megaMenu'] ) ) {
			return;
		}

		return get_post_meta( $menu_item_id, '_bricks_mega_menu_template_id', true );
	}
}
