<?php
namespace Elementor;

use \Elementor\ElementsKit_Widget_Gallery_Handler as Handler;
use \ElementsKit_Lite\Modules\Controls\Controls_Manager as ElementsKit_Controls_Manager;

defined('ABSPATH') || exit;

class ElementsKit_Widget_Gallery extends Widget_Base
{
    use \ElementsKit_Lite\Widgets\Widget_Notice;

    public $base;

    public function __construct( $data = [], $args = null ) {
        parent::__construct( $data, $args );
	}

	public function get_script_depends() {
		$deps = ['imagesloaded', 'isotope'];

		if ( Plugin::$instance->editor->is_edit_mode() || Plugin::$instance->preview->is_preview_mode() ) {
			$deps[] = 'tilt';
		}

		return $deps;
	}

    public function get_name() {
        return Handler::get_name();
    }

    public function get_title() {
        return Handler::get_title();
    }

    public function get_icon() {
        return Handler::get_icon();
    }

    public function get_categories() {
        return Handler::get_categories();
    }

	public function get_keywords() {
		return Handler::get_keywords();
	}

    public function get_help_url() {
        return 'https://wpmet.com/doc/how-to-create-gallery-in-wordpress/';
    }

    protected function is_dynamic_content(): bool {
        return false;
    }
    protected function register_controls()
    {

        $this->start_controls_section(
            'ekit_gallery_section_gallery',
            [
                'label' => esc_html__( 'Gallery Content', 'elementskit' ),
            ]
        );
        $repeater = new Repeater();

        $repeater->add_control(
            'ekit_gallery_filter_label',
            [
                'label' => esc_html__( 'Filter Label', 'elementskit' ),
                'type' => Controls_Manager::TEXT,
                'default' => '',
                'placeholder' => '',
				'dynamic' => [
					'active' => true,
				],
            ]
        );

        $repeater->add_control(
            'ekit_gallery_filter_images',
            [
                'label' => esc_html__( 'Add Images', 'elementskit' ),
                'type' => Controls_Manager::GALLERY,
				'dynamic' => [
					'active' => true,
				],
            ]
        );

        $this->add_control(
            'ekit_gallery_items',
            [
                'label' => '',
                'type' => Controls_Manager::REPEATER,
                'fields' =>  $repeater->get_controls(),
                'title_field' => '{{{ekit_gallery_filter_label}}}',
            ]
        );



        $this->end_controls_section();

        /**
         * Content Tab: Filter
         */
        $this->start_controls_section(
            'ekit_gallery_section_layout',
            [
                'label' => esc_html__( 'Layout', 'elementskit' ),
            ]
        );


        $this->add_control(
            'ekit_gallery_style',
            [
                'label' => esc_html__( 'Style', 'elementskit' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'grid',
                'options' => [
                    'grid' => esc_html__( 'Grid', 'elementskit' ),
                    'masonry' => esc_html__( 'Masonry', 'elementskit' ),
                ],
            ]
        );

        $this->add_control(
			'ekit_display_notice',
			[
				'type' => Controls_Manager::RAW_HTML,
				'raw' => sprintf(
					'<span> <b>%1$s</b> %2$s <span>',
					esc_html__('Note:', 'elementskit'),
					esc_html__('Isotope Grid or Masonry Gallery is not supported in the editor. Please preview the page to see the gallery in its actual layout.', 'elementskit'),
				),
				'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
				'show_label' => false,
				'label_block' => false,
				//'separator' => 'after',
			]
		);

        $ekit_gallery_columns = range( 1, 8 );
        $ekit_gallery_columns = array_combine( $ekit_gallery_columns, $ekit_gallery_columns );
        $this->add_responsive_control(
            'ekit_gallery_columns',
            [
                'label' => esc_html__( 'Columns', 'elementskit' ),
                'type' => Controls_Manager::SELECT,
                'default' => '3',
                'tablet_default' => '2',
                'mobile_default' => '1',
                'options' => $ekit_gallery_columns,
                'frontend_available' => true,
                'condition' => [
                    'ekit_gallery_style' => [ 'grid', 'masonry' ]
				],
				'selectors'	=> [
					'{{WRAPPER}} .ekit_gallery_grid_item'	=> 'flex: 0 0 calc(100% / {{SIZE}}); width: calc(100% / {{SIZE}});',
				]
            ]
        );

        $this->add_responsive_control(
			'ekit_gallery_image_aspect_ratio',
			[
				'label' => esc_html__( 'Image Aspect Ratio', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range' => [
					'%' => [
						'min' => .5,
                        'max' => 2.5,
                        'step' => .1,
					],
				],
				'default' => [
					'unit' => '%',
					'size' => .5,
				],
                'condition' => [
                    'ekit_gallery_style' => [ 'grid' ]
                ]
			]
		);

        /**
        * Control: Image Size
        */
        $this->add_group_control(
            Group_Control_Image_Size::get_type(),
            [
                'name'              => 'ekit_gallery_img_size',
                'default'           => 'full',
            ]
        );

        $this->end_controls_section();


        /*
         * Settings
         */
        $this->start_controls_section(
            'ekit_gallery_section_settings',
            [
                'label' => esc_html__( 'Settings', 'elementskit' ),
            ]
        );

        $this->add_control(
            'ekit_gallery_filter_all_label',
            [
                'label' => esc_html__( '"All" Filter Label', 'elementskit' ),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__( 'All', 'elementskit' ),
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_content_alignment',
            [
                'label'    => esc_html__( 'Content Alignment', 'elementskit' ),
                'type'     => Controls_Manager::CHOOSE,
                'options'  => [
                    'left'   => [
                        'title' => esc_html__( 'Left', 'elementskit' ),
                        'icon'  => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__( 'Center', 'elementskit' ),
                        'icon'  => 'eicon-text-align-center',
                    ],
                    'right'  => [
                        'title' => esc_html__( 'Right', 'elementskit' ),
                        'icon'  => 'eicon-text-align-right',
                    ],
                ],
                'default'  => 'center',
                'selectors'=> [
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-hover-content' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
			'ekit_gallery_content_vertical_alignment',
			[
				'label' => esc_html__( 'Alignment', 'elementskit' ),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'top' => [
						'title' => esc_html__( 'Top', 'elementskit' ),
						'icon' => 'eicon-v-align-top',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'elementskit' ),
						'icon' => 'eicon-v-align-middle',
					],
					'bottom' => [
						'title' => esc_html__( 'Bottom', 'elementskit' ),
						'icon' => 'eicon-v-align-bottom',
					],
				],
				'default' => 'center',
				'toggle' => true,
			]
		);


        $this->add_control(
			'ekit_gallery_caption',
			[
				'label' => esc_html__( 'Show Caption', 'elementskit' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementskit' ),
				'label_off' => esc_html__( 'Hide', 'elementskit' ),
				'return_value' => 'yes',
				'default' => 'no',
			]
        );

        $this->add_control(
			'ekit_gallery_description',
			[
				'label' => esc_html__( 'Show Description', 'elementskit' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementskit' ),
				'label_off' => esc_html__( 'Hide', 'elementskit' ),
				'return_value' => 'yes',
                'default' => 'no',
                'description' => 'If you show description goto gallery and set image description'
			]
		);

        $this->add_control(
			'ekit_gallery_filter_label_show',
			[
				'label' => esc_html__( 'Show Filter Label', 'elementskit' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementskit' ),
				'label_off' => esc_html__( 'Hide', 'elementskit' ),
				'return_value' => 'yes',
                'default' => 'no',
			]
		);

        $this->add_control(
			'ekit_gallery_open_lightbox',
			[
				'label' => esc_html__( 'Show Lightbox', 'elementskit' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementskit' ),
				'label_off' => esc_html__( 'Hide', 'elementskit' ),
				'return_value' => 'yes',
				'default' => 'no',
			]
		);

        $this->add_control(
            'ekit_gallery_link_icons',
            [
                'label' => esc_html__( 'Lightbox Icon', 'elementskit' ),
                'type' => Controls_Manager::ICONS,
                'fa4compatibility' => 'ekit_gallery_link_icon',
                'default' => [
                    'value' => 'icon icon-plus-circle',
                    'library' => 'ekiticons',
                ],
                'condition' => [
                    'ekit_gallery_open_lightbox' => 'yes'
                ]
            ]
        );

        // $this->add_control(
        //     'ekit_gallery_enable_link',
        //     [
        //         'label' => esc_html__( 'Enable Link', 'elementskit-lite' ),
        //         'type' => Controls_Manager::SWITCHER,
        //         'label_on' => esc_html__( 'Yes', 'elementskit-lite' ),
        //         'label_off' => esc_html__( 'No', 'elementskit-lite' ),
        //         'return_value' => 'yes',
        //         'condition' => [
        //             'ekit_gallery_open_lightbox!' => 'yes'
        //         ]
        //     ]
        // );

        // $this->add_control(
        //     'ekit_gallery_web_link',
        //     [
        //         'label' => esc_html__( 'Link', 'elementskit-lite' ),
        //         'type' => Controls_Manager::URL,
        //         'placeholder' => esc_html__( 'https://wpmet.com', 'elementskit-lite' ),
        //         'show_external' => true,
        //         'condition' => [
        //             'ekit_gallery_enable_link' => 'yes',
        //             'ekit_gallery_open_lightbox!' => 'yes'
        //         ],
        //     ]
        // );

        $this->add_control(
			'ekit_gallery_show_image_gallery',
			[
				'label' => esc_html__( 'Show Image Slideshow', 'elementskit' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'True', 'elementskit' ),
				'label_off' => esc_html__( 'Flase', 'elementskit' ),
				'return_value' => 'yes',
                'default' => 'yes',
                'condition' => [
                    'ekit_gallery_open_lightbox' => 'yes'
                ]
			]
		);

        $this->add_control(
            'ekit_gallery_ordering',
            [
                'label' => esc_html__( 'Ordering', 'elementskit' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'default',
                'options' => [
                    'default' => esc_html__( 'Default', 'elementskit' ),
                    'random' => esc_html__( 'Random', 'elementskit' ),
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'ekit_gallery_section_layout_style',
            [
                'label' => esc_html__( 'Layout', 'elementskit' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_responsive_control(
            'ekit_gallery_columns_gap',
            [
                'label' => esc_html__( 'Columns Gap', 'elementskit' ),
                'type' => Controls_Manager::SLIDER,
                'default' => [
                    'size' => 5,
                    'unit' => 'px',
                ],
                'size_units' => [ 'px', '%' ],
                'range' => [
                    'px' => [
                        'max' => 100,
                    ],
                ],
                'tablet_default' => [
                    'unit' => 'px',
                ],
                'mobile_default' => [
                    'unit' => 'px',
                ],
                'selectors' => [
					'{{WRAPPER}} .ekit_gallery_grid_item' => 'padding-left: {{SIZE}}{{UNIT}}; padding-right: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .ekit_gallery_grid_wraper' => 'margin-left: -{{SIZE}}{{UNIT}}; margin-right: -{{SIZE}}{{UNIT}};',
				],
            ]
        );
        $this->add_responsive_control(
			'ekit_gallery_rows_gap',
			[
				'label' => esc_html__( 'Rows Gap', 'elementskit' ),
				'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'default' => [
                    'top' => '0',
                    'right' => '0',
                    'bottom' => '10',
                    'left' => '0',
                    'unit' => 'px',
                    'isLinked' => 'false',
                ],
				'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
        // $this->add_responsive_control(
        //     'ekit_gallery_rows_gap',
        //     [
        //         'label' => esc_html__( 'Rows Gap', 'elementskit-lite' ),
        //         'type' => Controls_Manager::SLIDER,
        //         'default' => [
        //             'size' => 10,
        //             'unit' => 'px',
        //         ],
        //         'size_units' => [ 'px', '%' ],
        //         'range' => [
        //             'px' => [
        //                 'max' => 100,
        //             ],
        //         ],
        //         'tablet_default' => [
        //             'unit' => 'px',
        //         ],
        //         'mobile_default' => [
        //             'unit' => 'px',
        //         ],
        //         'selectors' => [
		// 			'{{WRAPPER}} .elementskit-single-portfolio-item' => 'margin-bottom: {{SIZE}}{{UNIT}};',
		// 		],
        //     ]
        // );

        $this->add_responsive_control(
			'ekit_gallery_content_padding',
			[
				'label' => esc_html__( 'Content Padding', 'elementskit' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors' => [
					'{{WRAPPER}} .elementskit-hover-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

        $this->end_controls_section();

        /**
         * Style Tab: Thumbnails
         */
        $this->start_controls_section(
            'ekit_gallery_section_thumbnails_style',
            [
                'label' => esc_html__( 'Thumbnails', 'elementskit' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
			'ekit_gallery_content_border_radius',
			[
				'label' => esc_html__( 'Border Radius', 'elementskit' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

        $this->start_controls_tabs( 'ekit_gallery_thumbnail_hover_and_normal_tab_style' );

        $this->start_controls_tab(
            'ekit_gallery_tab_thumbnail_normal_style',
            [
                'label' => esc_html__( 'Normal', 'elementskit' ),
            ]
        );

        $this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'ekit_gallery_tab_thumbnail_normal_box_shadow',
				'label' => esc_html__( 'Box Shadow', 'elementskit' ),
				'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item',
			]
        );

        $this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'ekit_gallery_tab_thumbnail_normal_border',
				'label' => esc_html__( 'Border', 'elementskit' ),
				'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item',
			]
		);

        $this->end_controls_tab();

        $this->start_controls_tab(
            'ekit_gallery_thumbnail_hover',
            [
                'label' => esc_html__( 'Hover', 'elementskit' ),
            ]
        );

        $this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'ekit_gallery_tab_thumbnail_hover_box_shadow',
				'label' => esc_html__( 'Box Shadow', 'elementskit' ),
				'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item:hover',
			]
        );

        $this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'ekit_gallery_tab_thumbnail_hover_border',
				'label' => esc_html__( 'Border', 'elementskit' ),
				'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item:hover',
			]
		);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->add_control(
			'ekit_gallery_thumbnail_filter_hr',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);

        $ekit_image_filters = [
            'normal' => esc_html__( 'Normal', 'elementskit' ),
            'opacity' => esc_html__( 'Opacity', 'elementskit' ),
            'scale' => esc_html__( 'Scale', 'elementskit' ),
            'rotate' => esc_html__( 'Rotate', 'elementskit' ),
            'blur' => esc_html__( 'Blur', 'elementskit' ),
            'gray-scale' => esc_html__( 'Gray Scale', 'elementskit' ),
        ];

        $this->add_control(
            'ekit_gallery_thumbnail_filter',
            [
                'label' => esc_html__( 'Image Filter', 'elementskit' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => $ekit_image_filters,
            ]
        );

        $this->start_controls_tabs( 'ekit_gallery_thumbnail_filter_style' );

        $this->start_controls_tab(
            'ekit_gallery_tab_thumbnail_filter_normal',
            [
                'label' => esc_html__( 'Normal', 'elementskit' ),
                'condition' => [
                    'ekit_gallery_thumbnail_filter!' => 'normal'
                ]
            ]
        );

        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_normal_opacity',
			[
				'label' => esc_html__( 'Opacity', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range' => [
					'%' => [
						'min' => 0.5,
                        'max' => 1,
                        'step' => 0.1,
					],
				],
				'default' => [
					'unit' => '%',
					'size' => 1,
				],
                'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-grid__img' => 'opacity: {{SIZE}};',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => 'opacity'
                ]
			]
		);
        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_normal_scale',
			[
				'label' => esc_html__( 'Scale', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
                        'max' => 2,
                        'step' => .1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 1,
				],
                'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-grid__img' => 'transform: scale({{SIZE}});',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => ['scale']
                ]
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_normal_scale_with_rotate',
			[
				'label' => esc_html__( 'Scale', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
                        'max' => 2,
                        'step' => .1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 1,
				],
                'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-portfolio-thumb' => 'transform: scale({{SIZE}});',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => ['rotate']
                ]
			]
        );


        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_normal_rotate',
			[
				'label' => esc_html__( 'Rotate', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
                        'max' => 360,
                        'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
                'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-grid__img' => 'transform: rotate({{SIZE}}deg);',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => 'rotate'
                ]
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_normal_blur',
			[
				'label' => esc_html__( 'Blur', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 20,
						'step' => 1,
					],
					'rem' => [
						'min' => 0,
                        'max' => 2,
                        'step' => .1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-grid__img' => 'filter: blur({{SIZE}}{{UNIT}});',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => 'blur'
                ]
			]
		);

        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_normal_grayscale',
			[
				'label' => esc_html__( 'Gray Scale', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range' => [
					'%' => [
						'min' => 0,
                        'max' => 100,
                        'step' => 1,
					],
				],
				'default' => [
					'unit' => '%',
					'size' => 0,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-grid__img' => 'filter: grayscale({{SIZE}}{{UNIT}});',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => 'gray-scale'
                ]
			]
		);

        $this->end_controls_tab();

        $this->start_controls_tab(
            'ekit_gallery_thumbnail_hover_filter',
            [
                'label' => esc_html__( 'Hover', 'elementskit' ),
                'condition' => [
                    'ekit_gallery_thumbnail_filter!' => 'normal'
                ]
            ]
        );

        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_hover_opacity',
			[
				'label' => esc_html__( 'Opacity', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0.5,
                        'max' => 1,
                        'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0.5,
				],
                'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-grid__img' => 'opacity: {{SIZE}};',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => 'opacity'
                ]
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_hover_scale',
			[
				'label' => esc_html__( 'Scale', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
                        'max' => 2,
                        'step' => .1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 1,
				],
                'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-grid__img' => 'transform: scale({{SIZE}});',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => ['scale']
                ]
			]
		);
        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_hover_scale_with_rotate',
			[
				'label' => esc_html__( 'Scale', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
                        'max' => 2,
                        'step' => .1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 1,
				],
                'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-portfolio-thumb' => 'transform: scale({{SIZE}});',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => ['rotate']
                ]
			]
        );


        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_hover_rotate',
			[
				'label' => esc_html__( 'Rotate', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
                        'max' => 360,
                        'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
                'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-grid__img' => 'transform: rotate({{SIZE}}deg);',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => 'rotate'
                ]
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_hover_blur',
			[
				'label' => esc_html__( 'Blur', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 20,
						'step' => 1,
					],
					'rem' => [
						'min' => 0,
                        'max' => 2,
                        'step' => .1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-grid__img' => 'filter: blur({{SIZE}}{{UNIT}});',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => 'blur'
                ]
			]
		);

        $this->add_responsive_control(
			'ekit_gallery_thumbnail_filter_hover_grayscale',
			[
				'label' => esc_html__( 'Gray Scale', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range' => [
					'%' => [
						'min' => 0,
                        'max' => 100,
                        'step' => 1,
					],
				],
				'default' => [
					'unit' => '%',
					'size' => 0,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-grid__img' => 'filter: grayscale({{SIZE}}{{UNIT}});',
                ],
                'condition' => [
                    'ekit_gallery_thumbnail_filter' => 'gray-scale'
                ]
			]
		);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->add_control(
            'ekit_gallery_tilt_enable',
            [
                'label' => esc_html__( 'Tilt', 'elementskit' ),
                'type' => Controls_Manager::SWITCHER,
                'default' => '',
				'assets' => [
					'scripts' => [
						[
							'name' => 'tilt',
							'conditions' => [
								'terms' => [
									[
										'name' => 'ekit_gallery_tilt_enable',
										'operator' => '===',
										'value' => 'yes',
									],
								],
							],
						],
					],

				],
            ]
        );

        $this->add_control(
            'ekit_gallery_tilt_axis',
            [
                'label' => esc_html__( 'Axis', 'elementskit' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'both',
                'options' => [
                    'both' => esc_html__( 'Both', 'elementskit' ),
                    'x' => esc_html__( 'X Axis', 'elementskit' ),
                    'y' => esc_html__( 'Y Axis', 'elementskit' ),
                ],
                'condition' => [
                    'ekit_gallery_tilt_enable' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_tilt_amount',
            [
                'label' => esc_html__( 'Amount', 'elementskit' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 50,
                    ],
                ],
                'default' => [
                    'size' => 20,
                ],
                'condition' => [
                    'ekit_gallery_tilt_enable' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_tilt_scale',
            [
                'label' => esc_html__( 'Scale', 'elementskit' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 1.4,
                        'step' => 0.01,
                    ],
                ],
                'default' => [
                    'size' => 1.06,
                ],
                'condition' => [
                    'ekit_gallery_tilt_enable' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_tilt_caption_depth',
            [
                'label' => esc_html__( 'Depth', 'elementskit' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 20,
                ],
                'selectors' => [
                    '{{WRAPPER}} .ekit-gallery-portfolio-tilt .elementskit-hover-area' => 'transform: translateZ({{SIZE}}px);',
                ],
                'condition' => [
                    'ekit_gallery_tilt_enable' => 'yes',
                ],
            ]
        );

        $this->add_control(
			'ekit_gallery_tilt_show_glare',
			[
				'label' => esc_html__( 'Show Glare', 'elementskit' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementskit' ),
				'label_off' => esc_html__( 'Hide', 'elementskit' ),
				'return_value' => 'yes',
                'default' => 'yes',
                'condition' => [
                    'ekit_gallery_tilt_enable' => 'yes',
                ],
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_tilt_perspective',
			[
				'label' => esc_html__( 'Perspective', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 5000,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 600,
                ],
                'condition' => [
                    'ekit_gallery_tilt_enable' => 'yes',
                ],
			]
		);

        $this->add_responsive_control(
			'ekit_gallery_tilt_maxGlare',
			[
				'label' => esc_html__( 'Width', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range' => [
					'%' => [
						'min' => 0,
                        'max' => 1,
                        'step' => .1,
					],
				],
				'default' => [
					'unit' => '%',
					'size' => .6,
				],
                'condition' => [
                    'ekit_gallery_tilt_show_glare' => 'yes',
                    'ekit_gallery_tilt_enable' => 'yes',
                ],
			]
		);

        $this->end_controls_section();


        /**
         * Style Tab: Caption
         */
        $this->start_controls_section(
            'ekit_gallery_section_caption_style',
            [
                'label' => esc_html__( 'Caption', 'elementskit' ),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'ekit_gallery_caption' => 'yes',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'ekit_gallery_caption_typography',
                'label' => esc_html__( 'Typography', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-title',
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_caption_margin',
            [
                'label' => esc_html__( 'Margin', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_caption_padding',
            [
                'label' => esc_html__( 'Padding', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->start_controls_tabs( 'ekit_gallery_tabs_caption_style' );

        $this->start_controls_tab(
            'ekit_gallery_tab_caption_normal',
            [
                'label' => esc_html__( 'Normal', 'elementskit' ),
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_caption_bg_color',
            [
                'label' => esc_html__( 'Background Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-title' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_caption_color',
            [
                'label' => esc_html__( 'Text Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_gallery_caption_border',
                'label' => esc_html__( 'Border', 'elementskit' ),
                'placeholder' => '1px',
                'default' => '1px',
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-title',
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_caption_border_radius',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name' => 'ekit_gallery_caption_text_shadow',
                'label' => esc_html__( 'Text Shadow', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-title',
            ]
        );

        $this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'ekit_gallery_caption_box_shadow',
				'label' => esc_html__( 'Box Shadow', 'elementskit' ),
				'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-title',
			]
		);


        $this->end_controls_tab();

        $this->start_controls_tab(
            'ekit_gallery_tab_caption_hover',
            [
                'label' => esc_html__( 'Hover', 'elementskit' ),
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_caption_bg_color_hover',
            [
                'label' => esc_html__( 'Background Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-title' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_caption_color_hover',
            [
                'label' => esc_html__( 'Text Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_caption_border_color_hover',
            [
                'label' => esc_html__( 'Border Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-title' => 'border-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name' => 'ekit_gallery_caption_text_shadow_hover',
                'label' => esc_html__( 'Text Shadow', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-title',
            ]
        );

        $this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'ekit_gallery_caption_box_shadow_hover',
				'label' => esc_html__( 'Box Shadow', 'elementskit' ),
				'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-title',
			]
		);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->end_controls_section();

        /**
         * Style Tab: Description
         */
        $this->start_controls_section(
            'ekit_gallery_section_description_style',
            [
                'label' => esc_html__( 'Description', 'elementskit' ),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'ekit_gallery_description' => 'yes',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'ekit_gallery_description_typography',
                'label' => esc_html__( 'Typography', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-description',
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_description_margin',
            [
                'label' => esc_html__( 'Margin', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_description_padding',
            [
                'label' => esc_html__( 'Padding', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->start_controls_tabs( 'ekit_gallery_tabs_description_style' );

        $this->start_controls_tab(
            'ekit_gallery_tab_description_normal',
            [
                'label' => esc_html__( 'Normal', 'elementskit' ),
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_description_bg_color',
            [
                'label' => esc_html__( 'Background Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-description' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_description_color',
            [
                'label' => esc_html__( 'Text Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-description' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_gallery_description_border',
                'label' => esc_html__( 'Border', 'elementskit' ),
                'placeholder' => '1px',
                'default' => '1px',
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-description',
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_description_border_radius',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-description' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name' => 'ekit_gallery_description_text_shadow',
                'label' => esc_html__( 'Text Shadow', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-description',
            ]
        );

        $this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'ekit_gallery_description_box_shadow',
				'label' => esc_html__( 'Box Shadow', 'elementskit' ),
				'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-description',
			]
		);

        $this->end_controls_tab();

        $this->start_controls_tab(
            'ekit_gallery_tab_description_hover',
            [
                'label' => esc_html__( 'Hover', 'elementskit' ),
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_description_bg_color_hover',
            [
                'label' => esc_html__( 'Background Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-description' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_description_color_hover',
            [
                'label' => esc_html__( 'Text Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-description' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_description_border_color_hover',
            [
                'label' => esc_html__( 'Border Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-description' => 'border-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name' => 'ekit_gallery_description_text_shadow_hover',
                'label' => esc_html__( 'Text Shadow', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-description',
            ]
        );

        $this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'ekit_gallery_description_box_shadow_hover',
				'label' => esc_html__( 'Box Shadow', 'elementskit' ),
				'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-description',
			]
		);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->end_controls_section();

        /**
         * Style Tab: Label
         */
        $this->start_controls_section(
            'ekit_gallery_section_filter_label_style',
            [
                'label' => esc_html__( 'Label', 'elementskit' ),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'ekit_gallery_filter_label_show' => 'yes',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'ekit_gallery_filter_label_typography',
                'label' => esc_html__( 'Typography', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-label',
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_label_margin',
            [
                'label' => esc_html__( 'Margin', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-label' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_label_padding',
            [
                'label' => esc_html__( 'Padding', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->start_controls_tabs( 'ekit_gallery_tabs_filter_label_style' );

        $this->start_controls_tab(
            'ekit_gallery_tab_filter_label_normal',
            [
                'label' => esc_html__( 'Normal', 'elementskit' ),
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_label_bg_color',
            [
                'label' => esc_html__( 'Background Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-label' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_label_color',
            [
                'label' => esc_html__( 'Text Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-label' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_gallery_filter_label_border',
                'label' => esc_html__( 'Border', 'elementskit' ),
                'placeholder' => '1px',
                'default' => '1px',
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-label',
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_label_border_radius',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name' => 'ekit_gallery_filter_label_text_shadow',
                'label' => esc_html__( 'Text Shadow', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-label',
            ]
        );

        $this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'ekit_gallery_filter_label_box_shadow',
				'label' => esc_html__( 'Box Shadow', 'elementskit' ),
				'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item  .elementskit-gallery-label',
			]
		);

        $this->end_controls_tab();

        $this->start_controls_tab(
            'ekit_gallery_tab_filter_label_hover',
            [
                'label' => esc_html__( 'Hover', 'elementskit' ),
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_label_bg_color_hover',
            [
                'label' => esc_html__( 'Background Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-label' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_label_color_hover',
            [
                'label' => esc_html__( 'Text Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-label' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_label_border_color_hover',
            [
                'label' => esc_html__( 'Border Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-label' => 'border-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name' => 'ekit_gallery_filter_label_text_shadow_hover',
                'label' => esc_html__( 'Text Shadow', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-label',
            ]
        );

        $this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'ekit_gallery_filter_label_box_shadow_hover',
				'label' => esc_html__( 'Box Shadow', 'elementskit' ),
				'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item:hover  .elementskit-gallery-label',
			]
		);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->end_controls_section();

        /**
         * Style Tab: Link Icon
         */
        $this->start_controls_section(
            'ekit_gallery_section_link_icon_style',
            [
                'label' => esc_html__( 'Link Icon', 'elementskit' ),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'ekit_gallery_open_lightbox' => 'yes',
                ]
            ]
        );

        $this->start_controls_tabs( 'ekit_gallery_tabs_link_icon_style' );

        $this->start_controls_tab(
            'ekit_gallery_tab_link_icon_normal',
            [
                'label' => esc_html__( 'Normal', 'elementskit' ),
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_link_icon_color',
            [
                'label' => esc_html__( 'Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon svg path' => 'stroke: {{VALUE}}; fill: {{VALUE}}',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_link_icon_bg_color',
            [
                'label' => esc_html__( 'Background Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_gallery_link_icon_border_normal',
                'label' => esc_html__( 'Border', 'elementskit' ),
                'placeholder' => '1px',
                'default' => '1px',
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon',
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_link_icon_border_radius',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_link_icon_size',
            [
                'label' => esc_html__( 'Icon Size', 'elementskit' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 5,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'size_units' => [ 'px' ],
                'condition' => [
                    'icon_type' => 'icon',
                ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon' => 'font-size: {{SIZE}}{{UNIT}}',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_link_icon_opacity_normal',
            [
                'label' => esc_html__( 'Opacity', 'elementskit' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1,
                        'step' => 0.01,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon, {{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon svg path' => 'opacity: {{SIZE}};',
                ],
            ]
        );

        $this->add_responsive_control(
			'ekit_gallery_link_icon_height_width',
			[
				'label' => esc_html__( 'Size', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 200,
						'step' => 5,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 40,
				],
				'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon i:before' => 'line-height: {{SIZE}}{{UNIT}};',
				],
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_link_icon_line_height',
			[
				'label' => esc_html__( 'Line Height', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
					'em' => [
						'min' => 0,
						'max' => 10,
						'step' => 0.1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon' => 'line-height: {{SIZE}}{{UNIT}};',
				],
			]
		);

        $this->add_responsive_control(
			'ekit_gallery_link_icon_font_size',
			[
				'label' => esc_html__( 'Font Size', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 22,
				],
				'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-gallery-icon svg'  => 'max-width: {{SIZE}}{{UNIT}};',
				],
			]
		);

        $this->end_controls_tab();

        $this->start_controls_tab(
            'ekit_gallery_tab_link_icon_hover',
            [
                'label' => esc_html__( 'Hover', 'elementskit' ),
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_link_icon_color_hover',
            [
                'label' => esc_html__( 'Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-gallery-icon' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-gallery-icon svg path'   => 'stroke: {{VALUE}}; fill: {{VALUE}};'
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_link_icon_bg_color_hover',
            [
                'label' => esc_html__( 'Background Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-gallery-icon' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_link_icon_border_color_hover',
            [
                'label' => esc_html__( 'Border Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-gallery-icon' => 'border-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_link_icon_opacity_hover',
            [
                'label' => esc_html__( 'Opacity', 'elementskit' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1,
                        'step' => 0.01,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-gallery-icon, {{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-gallery-icon svg path' => 'opacity: {{SIZE}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();

        /**
         * Style Tab: Overlay
         */
        $this->start_controls_section(
            'ekit_gallery_image_overlay_style',
            [
                'label' => esc_html__( 'Overlay', 'elementskit' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $ekit_image_blend_mode = [
            'normal' => esc_html__( 'Normal', 'elementskit' ),
            'multiply' => esc_html__( 'Multiply', 'elementskit' ),
            'screen' => esc_html__( 'Screen', 'elementskit' ),
            'overlay' => esc_html__( 'Overlay', 'elementskit' ),
            'darken' => esc_html__( 'Darken', 'elementskit' ),
            'lighten' => esc_html__( 'Lighten', 'elementskit' ),
            'color-dodge' => esc_html__( 'Color-dodge', 'elementskit' ),
            'color-burn' => esc_html__( 'Color-burn', 'elementskit' ),
            'difference' => esc_html__( 'Difference', 'elementskit' ),
            'exclusion' => esc_html__( 'Exclusion', 'elementskit' ),
            'hue' => esc_html__( 'hue', 'elementskit' ),
            'saturation' => esc_html__( 'Saturation', 'elementskit' ),
            'color' => esc_html__( 'Color', 'elementskit' ),
            'luminosity' => esc_html__( 'Luminosity', 'elementskit' ),
        ];

        $this->add_control(
			'ekit_gallery_show_image_overlay',
			[
				'label' => esc_html__( 'Show Overlay', 'elementskit' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementskit' ),
				'label_off' => esc_html__( 'Hide', 'elementskit' ),
				'return_value' => 'yes',
				'default' => 'yes',
			]
		);

        $this->start_controls_tabs( 'ekit_gallery_tab_overlay_style' );

        $this->start_controls_tab(
            'ekit_gallery_tab_overlay_normal',
            [
                'label' => esc_html__( 'Normal', 'elementskit' ),
                'condition' => [
                    'ekit_gallery_show_image_overlay' => 'yes'
                ]
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_overlay_blend_mode',
            [
                'label' => esc_html__( 'Blend Mode', 'elementskit' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => $ekit_image_blend_mode,
                'selectors' => [
                    '{{WRAPPER}} .ekit-gallery-image-overlay' => 'mix-blend-mode: {{VALUE}};',
                ],
                'condition' => [
                    'ekit_gallery_show_image_overlay' => 'yes'
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_gallery_overlay_background_color_normal',
                'types' => [ 'classic' ],
                'selector' => '{{WRAPPER}} .ekit-gallery-image-overlay',
                'exclude' => [
                    'image',
                    'gradient'
                ],
                'condition' => [
                    'ekit_gallery_show_image_overlay' => 'yes'
                ]
            ]
        );

        $this->add_responsive_control(
			'ekit_gallery_overlay_background_scale_normal',
			[
				'label' => esc_html__( 'Scale', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
                        'max' => 2,
                        'step' => .1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 1,
				],
                'selectors' => [
					'{{WRAPPER}} .ekit-gallery-image-overlay' => 'transform: scale({{SIZE}});',
					'{{WRAPPER}} .elementskit-single-portfolio-item .elementskit-hover-area' => 'transform: scale({{SIZE}});',
                ],
                'condition' => [
                    'ekit_gallery_show_image_overlay' => 'yes'
                ]
			]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'ekit_gallery_tab_overlay_hover',
            [
                'label' => esc_html__( 'Hover', 'elementskit' ),
                'condition' => [
                    'ekit_gallery_show_image_overlay' => 'yes'
                ]
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_overlay_blend_mode_hover',
            [
                'label' => esc_html__( 'Blend Mode', 'elementskit' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => $ekit_image_blend_mode,
                'selectors' => [
                    '{{WRAPPER}} .elementskit-single-portfolio-item:hover .ekit-gallery-image-overlay' => 'mix-blend-mode: {{VALUE}};',
                ],
                'condition' => [
                    'ekit_gallery_show_image_overlay' => 'yes'
                ]
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_gallery_overlay_background_color_hover',
                'types' => [ 'classic' ],
                'selector' => '{{WRAPPER}} .elementskit-single-portfolio-item:hover .ekit-gallery-image-overlay',
                'exclude' => [
                    'image',
                    'gradient'
                ],
                'condition' => [
                    'ekit_gallery_show_image_overlay' => 'yes'
                ]
            ]
        );

        $this->add_responsive_control(
			'ekit_gallery_overlay_background_scale_hover',
			[
				'label' => esc_html__( 'Scale', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
                        'max' => 2,
                        'step' => .1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 1,
				],
                'selectors' => [
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .ekit-gallery-image-overlay' => 'transform: scale({{SIZE}});',
					'{{WRAPPER}} .elementskit-single-portfolio-item:hover .elementskit-hover-area' => 'transform: scale({{SIZE}});',
                ],
                'condition' => [
                    'ekit_gallery_show_image_overlay' => 'yes'
                ]
			]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();

        /**
         * Style Tab: Filter
         */
        $this->start_controls_section(
            'ekit_gallery_section_filter_style',
            [
                'label' => esc_html__( 'Filter', 'elementskit' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
			'ekit_gallery_filter_style_choose',
			[
				'label' => esc_html__( 'Filter Style', 'elementskit' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'default',
				'options' => [
					'default'  => esc_html__( 'Default', 'elementskit' ),
					'style_one' => esc_html__( 'Style One', 'elementskit' ),
					'style_two' => esc_html__( 'Style Two', 'elementskit' ),
					'style_three' => esc_html__( 'Style Three', 'elementskit' ),
					'style_four' => esc_html__( 'Style Four', 'elementskit' ),
					'style_five' => esc_html__( 'Style Five', 'elementskit' ),
					'style_six' => esc_html__( 'Style Six', 'elementskit' ),
					'style_seven' => esc_html__( 'Style Seven', 'elementskit' ),
					'style_eight' => esc_html__( 'Style Eight', 'elementskit' ),
					'style_nine' => esc_html__( 'Style Nine', 'elementskit' ),
					'style_ten' => esc_html__( 'Style Ten', 'elementskit' ),
				],
			]
		);

        $this->add_control(
			'ekit_gallery_fill_nav_content',
			[
				'label' => esc_html__( 'Nav Fill', 'elementskit' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Yes', 'elementskit' ),
				'label_off' => esc_html__( 'No', 'elementskit' ),
				'return_value' => 'yes',
				'default' => 'no',
			]
		);

        $this->add_responsive_control(
            'ekit_gallery_nav_items_alignment',
            [
                'label'    => esc_html__( 'Filter Items Alignment', 'elementskit' ),
                'type'     => Controls_Manager::CHOOSE,
                'options'  => [
                    'flex-start'   => [
                        'title' => esc_html__( 'Left', 'elementskit' ),
                        'icon'  => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__( 'Center', 'elementskit' ),
                        'icon'  => 'eicon-text-align-center',
                    ],
                    'space-between'  => [
                        'title' => esc_html__( 'Justify', 'elementskit' ),
                        'icon'  => 'eicon-text-align-justify',
                    ],
                    'flex-end'  => [
                        'title' => esc_html__( 'Right', 'elementskit' ),
                        'icon'  => 'eicon-text-align-right',
                    ],
                ],
                'default'  => 'center',
                'selectors'=> [
                    '{{WRAPPER}} .elementskit-main-filter' => 'justify-content: {{VALUE}};',
                ],
                'condition' => [
                    'ekit_gallery_fill_nav_content' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'ekit_gallery_nav_alignment',
            [
                'label'    => esc_html__( 'Filter Alignment', 'elementskit' ),
                'type'     => Controls_Manager::CHOOSE,
                'options'  => [
                    'left'   => [
                        'title' => esc_html__( 'Left', 'elementskit' ),
                        'icon'  => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__( 'Center', 'elementskit' ),
                        'icon'  => 'eicon-text-align-center',
                    ],
                    'right'  => [
                        'title' => esc_html__( 'Right', 'elementskit' ),
                        'icon'  => 'eicon-text-align-right',
                    ],
                ],
                'default'  => 'center',
                'condition' => [
                    'ekit_gallery_fill_nav_content!' => 'yes'
                ]
            ]
        );
        $this->add_control(
			'ekit_gallery_nav_item_show_caret',
			[
				'label' => esc_html__( 'Show Caret', 'elementskit' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementskit' ),
				'label_off' => esc_html__( 'Hide', 'elementskit' ),
				'return_value' => 'yes',
                'default' => 'yes',
                'condition' => [
                    'ekit_gallery_filter_style_choose' => ['style_three', 'style_four']
                ]
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_filter_caret_width',
			[
				'label' => esc_html__( 'Width', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 2,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_three.elementskit_nav_caret > li > a.selected::before' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_nav_item_show_caret' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_three']
                ]
			]
		);

        $this->add_responsive_control(
			'ekit_gallery_filter_caret_height',
			[
				'label' => esc_html__( 'Height', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 19,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_three.elementskit_nav_caret > li > a.selected::before' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_nav_item_show_caret' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_three']
                ]
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_filter_caret_bottom_position',
			[
				'label' => esc_html__( 'Top', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range' => [
					'%' => [
						'min' => 0,
                        'max' => 100,
                        'step' => .5
					],
				],
				'default' => [
					'unit' => '%',
					'size' => 100,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_three.elementskit_nav_caret > li > a.selected::before' => 'top: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_nav_item_show_caret' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_three']
                ]
			]
        );

        $this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'ekit_gallery_filter_caret_background',
				'label' => esc_html__( 'Background', 'elementskit' ),
				'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit_filter_style_three.elementskit_nav_caret > li > a.selected::before',
                'condition' => [
                    'ekit_gallery_nav_item_show_caret' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_three']

                ],
                'exclude' => [
                    'image'
                ],
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_filter_caret_four_width',
			[
				'label' => esc_html__( 'Width', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 15,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_four.elementskit_nav_caret > li > a.selected::after' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_nav_item_show_caret' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_four']
                ]
			]
		);

        $this->add_responsive_control(
			'ekit_gallery_filter_caret_four_height',
			[
				'label' => esc_html__( 'Height', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 15,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_four.elementskit_nav_caret > li > a.selected::after' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_nav_item_show_caret' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_four']
                ]
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_filter_caret_four_bottom_position',
			[
				'label' => esc_html__( 'Bottom', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'%' => [
						'min' => -100,
                        'max' => 100,
                        'step' => .5
					],
					'px' => [
						'min' => -100,
                        'max' => 100,
                        'step' => .5
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => -7.5,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_four.elementskit_nav_caret > li > a.selected::after' => 'bottom: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_nav_item_show_caret' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_four']
                ]
			]
        );

        $this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'ekit_gallery_filter_caret_four_background',
				'label' => esc_html__( 'Background', 'elementskit' ),
				'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit_filter_style_four.elementskit_nav_caret > li > a.selected::after',
                'condition' => [
                    'ekit_gallery_nav_item_show_caret' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_four']
                ],
                'exclude' => [
                    'image'
                ],
			]
        );

        $this->add_control(
			'ekit_gallery_filter_show_divider_hr_style_six',
			[
                'type' => Controls_Manager::DIVIDER,
                'condition' => [
                    'ekit_gallery_filter_style_choose' => ['style_four'],
                ],
			]
		);

        $this->add_control(
			'ekit_gallery_filter_show_divider',
			[
				'label' => esc_html__( 'Show Divider', 'elementskit' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementskit' ),
				'label_off' => esc_html__( 'Hide', 'elementskit' ),
				'return_value' => 'yes',
                'default' => 'yes',
                'condition' => [
                    'ekit_gallery_filter_style_choose' => ['style_four', 'style_five'],
                ],
			]
        );

        $this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'ekit_gallery_filter_divider_background',
				'label' => esc_html__( 'Background', 'elementskit' ),
				'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit_filter_style_five.elementskit_divider_active > li > a::before, {{WRAPPER}} .elementskit_filter_style_four.elementskit_divider_active > li > a::before',
                'condition' => [
                    'ekit_gallery_filter_show_divider' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_four', 'style_five'],
                ],
                'exclude' => [
                    'image'
                ],
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_filter_divider_width',
			[
				'label' => esc_html__( 'Width', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 2,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_five.elementskit_divider_active > li > a::before' => 'width: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .elementskit_filter_style_four.elementskit_divider_active > li > a::before' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_filter_show_divider' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_four', 'style_five'],
                ]
			]
		);

        $this->add_responsive_control(
			'ekit_gallery_filter_divider_height',
			[
				'label' => esc_html__( 'Height', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 19,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_five.elementskit_divider_active > li > a::before' => 'height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .elementskit_filter_style_four.elementskit_divider_active > li > a::before' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_filter_show_divider' => 'yes',
                    'ekit_gallery_filter_style_choose' => ['style_four', 'style_five'],
                ]
			]
        );

        $this->add_control(
			'ekit_gallery_filter_divider_and_caret_hr',
			[
                'type' => Controls_Manager::DIVIDER,
			]
        );

        $this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'ekit_gallery_filter_border_bottom_background',
				'label' => esc_html__( 'Background', 'elementskit' ),
				'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit_filter_style_six > li > a.selected > .elementskit_filter_nav_text::before',
                'condition' => [
                    'ekit_gallery_filter_style_choose' => ['style_six'],
                ],
                'exclude' => [
                    'image'
                ],
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_filter_border_bottom_width',
			[
				'label' => esc_html__( 'Width', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 500,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 200,
					],
				],
				'default' => [
					'unit' => '%',
					'size' => 100,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_six > li > a > .elementskit_filter_nav_text::before' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_filter_style_choose' => ['style_six'],
                ]
			]
		);

        $this->add_responsive_control(
			'ekit_gallery_filter_border_bottom_divider_height',
			[
				'label' => esc_html__( 'Height', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 2,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_six > li > a > .elementskit_filter_nav_text::before' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_filter_style_choose' => ['style_six'],
                ]
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_filter_border_bottom_divider_bottom',
			[
				'label' => esc_html__( 'Bottom', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => -100,
						'max' => 100,
						'step' => 5,
					],
					'%' => [
						'min' => -100,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => -5,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_six > li > a > .elementskit_filter_nav_text::before' => 'bottom: {{SIZE}}{{UNIT}};',
				],
                'condition' => [
                    'ekit_gallery_filter_style_choose' => ['style_six'],
                ]
			]
		);

        $this->add_responsive_control(
			'ekit_gallery_filter_border_bottom_divider_left',
			[
				'label' => esc_html__( 'Left', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => -100,
						'max' => 100,
						'step' => 5,
					],
					'%' => [
						'min' => -100,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'selectors' => [
					'{{WRAPPER}} .elementskit_filter_style_six > li > a > .elementskit_filter_nav_text::before' => 'left: {{SIZE}}{{UNIT}};',
				],
                'condition' => [
                    'ekit_gallery_filter_style_choose' => ['style_six'],
                ]
			]
		);

        $this->add_responsive_control(
            'ekit_gallery_filters_margin_bottom',
            [
                'label' => esc_html__( 'Nav Bottom Spacing', 'elementskit' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 80,
                        'step' => 1,
                    ],
                ],
                'size_units' => ['px'],
                'default' => [
					'unit' => 'px',
					'size' => 20,
				],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-main-filter' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->start_controls_tabs( 'ekit_gallery_tabs_filter_style' );

        $this->start_controls_tab(
            'ekit_gallery_tab_filter_normal',
            [
                'label' => esc_html__( 'Normal', 'elementskit' ),
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'ekit_gallery_filter_typography_normal',
                'label' => esc_html__( 'Typography', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-main-filter > li > a',
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_color_normal',
            [
                'label' => esc_html__( 'Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-main-filter > li > a' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_background_color_normal',
            [
                'label' => esc_html__( 'Background Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-main-filter > li > a' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_gallery_filter_border_normal',
                'label' => esc_html__( 'Border', 'elementskit' ),
                'placeholder' => '1px',
                'default' => '1px',
                'selector' => '{{WRAPPER}} .elementskit-main-filter > li > a',
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_border_radius_normal',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-main-filter > li > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_padding',
            [
                'label' => esc_html__( 'Padding', 'elementskit' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'placeholder' => [
                    'top' => '',
                    'right' => '',
                    'bottom' => '',
                    'left' => '',
                ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-main-filter > li > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'ekit_gallery_filter_box_shadow',
                'selector' => '{{WRAPPER}} .elementskit-main-filter > li > a',
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'ekit_gallery_tab_dots_hover',
            [
                'label' => esc_html__( 'Active', 'elementskit' ),
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'ekit_gallery_filter_typography_hover',
                'label' => esc_html__( 'Typography', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-main-filter > li > a.selected',
            ]
        );

        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name' => 'ekit_gallery_filter_typography_hover_sahdow',
                'selector' => '{{WRAPPER}} .elementskit-main-filter > li > a.selected',
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_color_hover',
            [
                'label' => esc_html__( 'Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-main-filter > li > a.selected' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_gallery_filter_background_color_hover',
            [
                'label' => esc_html__( 'Background Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-main-filter > li > a.selected' => 'background-color: {{VALUE}};',
                ],
                'condition' => [
                    'ekit_gallery_filter_style_choose!' => 'style_two'
                ]
            ]
        );

        $this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'background',
				'label' => esc_html__( 'Background', 'elementskit' ),
				'types' => [ 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit-main-filter > li > a.selected .elementskit_blur_shadow_panel,{{WRAPPER}} .elementskit-main-filter > li > a.selected',
                'condition' => [
                    'ekit_gallery_filter_style_choose' => 'style_two'
                ],
                'exclude' => [
                    'classic',
                    'image'
                ],
			]
		);

        $this->add_responsive_control(
            'ekit_gallery_filter_border_color_hover',
            [
                'label' => esc_html__( 'Border Color', 'elementskit' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .elementskit-main-filter > li > a.selected' => 'border-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'ekit_gallery_filter_box_shadow_hover',
                'selector' => '{{WRAPPER}} .elementskit-main-filter > li > a.selected',
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_responsive_control(
			'ekit_gallery_filter_container_heading',
			[
				'label' => esc_html__( 'Container Style', 'elementskit' ),
				'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'ekit_gallery_fill_nav_content' => 'yes'
                ],
			]
        );

        $this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'ekit_gallery_filter_container_background',
				'label' => esc_html__( 'Background', 'elementskit' ),
				'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit-main-filter',
                'exclude' => [
                    'image',
                ],
                'condition' => [
                    'ekit_gallery_fill_nav_content' => 'yes'
                ],
			]
		);

        $this->add_responsive_control(
			'ekit_gallery_filter_container_border_radius',
			[
				'label' => esc_html__( 'Border Radius', 'elementskit' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors' => [
					'{{WRAPPER}} .elementskit-main-filter' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_fill_nav_content' => 'yes'
                ],
			]
        );

        $this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'ekit_gallery_filter_container_box_shadow',
				'label' => esc_html__( 'Box Shadow', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-main-filter',
                'condition' => [
                    'ekit_gallery_fill_nav_content' => 'yes'
                ],
			]
        );

        $this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'ekit_gallery_filter_container_border',
				'label' => esc_html__( 'Border', 'elementskit' ),
                'selector' => '{{WRAPPER}} .elementskit-main-filter',
                'condition' => [
                    'ekit_gallery_fill_nav_content' => 'yes'
                ],
			]
        );

        $this->add_responsive_control(
			'ekit_gallery_filter_container_padding',
			[
				'label' => esc_html__( 'Padding', 'elementskit' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors' => [
					'{{WRAPPER}} .elementskit-main-filter' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'ekit_gallery_fill_nav_content' => 'yes'
                ],
			]
        );

        $this->end_controls_section();

        $this->insert_pro_message();
    }

    /*
     * Optional Not used
     *
     */

    protected function clean_class($string) {
        $string = str_replace(' ', '-', $string); // Replaces all spaces with hyphens.
        return 'ekit_gallery__filter-' . strtolower( preg_replace('/[^A-Za-z0-9\-]/', '', $string)); // Removes special chars.
     }

     protected function render( ) {
        echo '<div class="ekit-wid-con" >';
            $this->render_raw();
        echo '</div>';
    }

    protected function render_raw( ) {
        $settings = $this->get_settings_for_display();
        extract($settings);

        $tilt_config = [
            'disableAxis'   => $ekit_gallery_tilt_axis,
            'easing'        => 'cubic-bezier(.03, .98, .52, .99)',
            'glare'         => $ekit_gallery_tilt_show_glare === 'yes' ? true : false,
            'transition'    => true,
        ];

        $this->add_render_attribute(
            'gallery_grid',
            [
                'class'            => 'ekit_gallery_grid',
                'data-tilt-config' => wp_json_encode( $tilt_config ),
            ]
        );

        // Add extra class only in Elementor Editor
        if ( \Elementor\Plugin::instance()->editor->is_edit_mode()  ) {
            $this->add_render_attribute(
                'gallery_grid',
                'class',
                'ekit-gallery-editor'
            );
        }

        if ($ekit_gallery_tilt_show_glare === 'yes' && !empty($ekit_gallery_tilt_maxGlare['size'])) {
            $this->add_render_attribute('tilt_item_config', 'data-tilt-maxglare', $ekit_gallery_tilt_maxGlare['size']);
        }

        $masonry_config = [
            'itemSelector'  => '.ekit_gallery_grid_item',
        ];

        $this->add_render_attribute('gallery_grid', 'data-masonry-config', wp_json_encode($masonry_config));
    ?>
        <?php
            $gallery_grid_class = '';
            if (($ekit_gallery_style == 'grid')) {
                $gallery_grid_class = 'gallery_grid_style';
            }
        ?>
        <?php
        if(count($ekit_gallery_items) > 1 && $ekit_gallery_filter_label_show == 'yes'):
        ?>
            <div class="elemetskit_filter_wraper_outer <?php if($ekit_gallery_fill_nav_content != 'yes') : ?> elemetskit_filter_<?php echo esc_attr($ekit_gallery_nav_alignment); ?> <?php endif; ?>">
                <div class="filter-button-wraper" id="ekit_gallery__filter<?php echo esc_attr($this->get_id());?>">
                    <ul class="option-set elementskit-main-filter elementskit_filter_<?php echo esc_attr($ekit_gallery_filter_style_choose); ?> <?php if($ekit_gallery_nav_item_show_caret == 'yes'){echo esc_attr('elementskit_nav_caret'); } ?> <?php if($ekit_gallery_filter_show_divider == 'yes') {echo esc_attr('elementskit_divider_active');}?>">
                        <li><a href="#" data-option-value="*" class="selected">
                        <?php if($ekit_gallery_filter_style_choose == 'style_two') : ?><span class="elementskit_blur_shadow_panel"></span><?php endif;?>
                        <span class="elementskit_filter_nav_text"><?php echo esc_html(ucfirst($ekit_gallery_filter_all_label))?></span></a></li>
                    <?php foreach($ekit_gallery_items as $item): ?>
                        <?php if(($item['ekit_gallery_filter_label']) != '') : ?>
                        <li><a href="#" data-option-value=".<?php echo esc_attr($this->clean_class($item['ekit_gallery_filter_label'])); ?>">
                        <?php if($ekit_gallery_filter_style_choose == 'style_two') : ?><span class="elementskit_blur_shadow_panel"></span><?php endif;?>
                        <span class="elementskit_filter_nav_text"><?php echo esc_html(ucfirst($item['ekit_gallery_filter_label'])); ?></span></a></li>
                        <?php  endif; ?>
                    <?php  endforeach; ?>
                    </ul><!-- .elementskit-main-filter END -->
                </div><!-- .filter-button-wraper END -->
            </div>
        <?php endif; ?>
		<?php echo '<div class="ekit_gallery_grid_wraper"><div id="ekit_gallery_' . esc_attr($this->get_id()) . '" ' . $this->get_render_attribute_string('gallery_grid') . '>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped?>
        <?php
            if($ekit_gallery_ordering == 'random') {
                shuffle($ekit_gallery_items);
            }
        ?>
        <?php if(count($ekit_gallery_items) > 0):
				foreach($ekit_gallery_items as $item) : // ekit_gallery_items // ekit_gallery_filter_images
					if(($ekit_gallery_style == 'grid') || ($ekit_gallery_style == 'masonry')) :
						foreach( $item['ekit_gallery_filter_images'] as $img ):
							$metadata = \ElementsKit_Lite\Utils::img_meta($img['id']);
							$img_url = !empty($img['id']) ? wp_get_attachment_image_src($img['id'], $ekit_gallery_img_size_size) : '';
							$img_url = !empty($img_url[0]) ? $img_url[0] : '';
							?>
							<div class="ekit_gallery_grid_item <?php echo esc_attr($this->clean_class($item['ekit_gallery_filter_label']).' '.$gallery_grid_class); ?>">
								<div class="elementskit-single-portfolio-item <?php if($ekit_gallery_tilt_enable == 'yes') : ?> ekit-gallery-portfolio-tilt <?php endif; ?>"
								<?php if($ekit_gallery_tilt_enable == 'yes') : ?>
								data-tilt-scale="<?php echo esc_attr($ekit_gallery_tilt_scale['size']); ?>"
								data-tilt-maxtilt="<?php echo esc_attr($ekit_gallery_tilt_amount['size']); ?>"
								data-tilt-perspective="<?php echo esc_attr($ekit_gallery_tilt_perspective['size']); ?>"
								<?php echo $this->get_render_attribute_string('tilt_item_config'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped	?>
								<?php endif; ?>
								>
									<div class="elementskit-portfolio-thumb"
									<?php if($ekit_gallery_style == 'grid') : ?>
									style="padding-bottom: calc(<?php echo esc_attr($ekit_gallery_image_aspect_ratio['size']); ?> * 100%)"
									<?php endif; ?>
									>
									<img class="elementskit-grid__img" src="<?php echo esc_url($img_url); ?>" alt="<?php echo empty($metadata['alt']) ? 'gallery grid image' : esc_attr($metadata['alt']); ?>"/>
									</div>
									<div class="elementskit-hover-area">
										<div class="elementskit-hover-content ekit_vertical_alignment_<?php echo esc_attr($ekit_gallery_content_vertical_alignment); ?>">
											<?php
												if ($ekit_gallery_caption == 'yes') {
													$meta_caption = !empty($metadata['caption']) ? '<h3 class="elementskit-gallery-title">'.$metadata['caption'].'</h3>' : '';
													echo wp_kses($meta_caption, \ElementsKit_Lite\Utils::get_kses_array()) ;
												}
											?>
											<?php
												if ($ekit_gallery_description == 'yes') {
													$meta_description = !empty($metadata['description'])? '<p class="elementskit-gallery-description">'.$metadata['description'].'</p>' : '';
													echo wp_kses($meta_description, \ElementsKit_Lite\Utils::get_kses_array()) ;
												}
											?>
											<?php
												if ($ekit_gallery_filter_label_show == 'yes' ) {
													$filter_lebel = !empty($item['ekit_gallery_filter_label']) ? '<span class="elementskit-gallery-label">'.$item['ekit_gallery_filter_label'].'</span>' : '';
													echo wp_kses($filter_lebel, \ElementsKit_Lite\Utils::get_kses_array()) ;
												}
											?>
											<?php if(($ekit_gallery_open_lightbox == 'yes') && ($ekit_gallery_link_icons != '')): ?>
											<div class="elementskit-gallery-popup-icon-wraper">
												<a href="<?php echo esc_url( $img[ 'url' ] ); ?>" data-effect="mfp-zoom-in"
												class="elementskit-gallery-icon elementor-clickable" aria-label="mfp-zoom-in"
												<?php if($ekit_gallery_show_image_gallery == 'yes') : ?>
													data-elementor-lightbox-slideshow="<?php echo esc_attr($this->get_id()); ?>"
												<?php endif; ?>
													>

													<?php
														// new icon
														$migrated = isset( $settings['__fa4_migrated']['ekit_gallery_link_icons'] );
														// Check if its a new widget without previously selected icon using the old Icon control
														$is_new = empty( $settings['ekit_gallery_link_icon'] );
														if ( $is_new || $migrated ) {
															// new icon
															Icons_Manager::render_icon( $settings['ekit_gallery_link_icons'], [ 'aria-hidden' => 'true' ] );
														} else {
															?>
															<i class="<?php echo esc_attr($settings['ekit_gallery_link_icon']); ?>" aria-hidden="true"></i>
															<?php
														}
													?>

												</a>
											</div>
											<?php endif; ?>
										</div>
									</div><!-- .elementskit-hover-area END -->
									<?php if($ekit_gallery_show_image_overlay == 'yes') : ?>
									<div class="ekit-gallery-image-overlay"></div>
									<?php endif; ?>
								</div><!-- .elementskit-single-portfolio-item END -->
							</div>

						<?php endforeach;
					endif;
				endforeach;
			endif;
			echo '</div></div>';

		if ( \Elementor\Plugin::instance()->editor->is_edit_mode() ) {
			$this->render_editor_script();
		}
	}

    protected function render_editor_script() {
        ?>
        <script>
            (function ($) {
                'use strict';

                $(function () {
                    var $el = $('#ekit_gallery_<?php echo esc_attr($this->get_id()); ?>');

                    $el.imagesLoaded(function () {
                        $el.isotope();
                    });
                });
            }(jQuery));
        </script>
        <?php
    }
}
