'type' => Controls_Manager::SLIDER,
                'default' => [
                    'size' => 18,
                ],
                'range' => [
                    'px' => [
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .eael-filter-gallery-container .caption > a.popup-media > i' => 'font-size: {{SIZE}}px;',
                    '{{WRAPPER}} .eael-filter-gallery-container .caption .buttons .eael-dnmcg-svg-icon' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .eael-filter-gallery-container .caption .buttons a > i' => 'font-size: {{SIZE}}px;',
                    '{{WRAPPER}} .eael-filter-gallery-container .caption .buttons a svg' => 'width: {{SIZE}}px;height: {{SIZE}}px;line-height: {{SIZE}}px;',
                ],
            ]
        );

        $this->add_responsive_control(
            'eael_fg_item_icon_border',
            [
                'label' => esc_html__('Border Radius', 'essential-addons-elementor'),
                'type' => Controls_Manager::SLIDER,
                'default' => [
                    'size' => 50,
                ],
                'range' => [
                    'px' => [
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .eael-filter-gallery-container .caption > a.popup-media > i' => 'border-radius: {{SIZE}}px;',
                    '{{WRAPPER}} .eael-filter-gallery-container .caption .buttons a' => 'border-radius: {{SIZE}}px;',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'dynamic_gallery_button_hover',
            [
                'label' => __('Hover', 'essential-addons-elementor'),
            ]
        );

        $this->add_control(
            'eael_fg_item_icon_hover_bg_color',
            [
                'label' => esc_html__('Background Color', 'essential-addons-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ff622a',
                'selectors' => [
                    '{{WRAPPER}} .eael-filter-gallery-container .caption > a.popup-media > i:hover' => 'background: {{VALUE}};',
                    '{{WRAPPER}} .eael-filter-gallery-container .caption .buttons a:hover' => 'background: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'eael_fg_item_hover_icon_color',
            [
                'label' => esc_html__('Color', 'essential-addons-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#fff',
                'selectors' => [
                    '{{WRAPPER}} .eael-filter-gallery-container .caption > a.popup-media > i:hover' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .eael-filter-gallery-container .caption .buttons a:hover' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .eael-filter-gallery-container .caption .buttons a:hover svg' => 'fill: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();

        /**
         * -------------------------------------------
         * Tab Style (Filterable Gallery Item Content Style)
         * -------------------------------------------
         */
        $this->start_controls_section(
            'eael_section_fg_item_content_style_settings',
            [
                'label' => esc_html__('Item Content Style', 'essential-addons-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'eael_fg_grid_style' => 'eael-cards',
                ],
            ]
        );

        $this->add_control(
            'eael_fg_item_content_bg_color',
            [
                'label' => esc_html__('Background Color', 'essential-addons-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#f2f2f2',
                'selectors' => [
                    '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'eael_fg_item_content_container_padding',
            [
                'label' => esc_html__('Padding', 'essential-addons-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'eael_fg_item_content_border',
                'label' => esc_html__('Border', 'essential-addons-elementor'),
                'selector' => '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'eael_fg_item_content_shadow',
                'selector' => '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content',
            ]
        );

        $this->add_control(
            'eael_fg_item_content_title_typography_settings',
            [
                'label' => esc_html__('Title Typography', 'essential-addons-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'eael_fg_item_content_title_color',
            [
                'label' => esc_html__('Color', 'essential-addons-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#F56A6A',
                'selectors' => [
                    '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content .title a' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'eael_fg_item_content_title_hover_color',
            [
                'label' => esc_html__('Hover Color', 'essential-addons-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content .title a:hover' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'eael_fg_item_content_title_typography',
                'selector' => '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content .title a',
            ]
        );

        $this->add_control(
            'eael_fg_item_content_text_typography_settings',
            [
                'label' => esc_html__('Content Typography', 'essential-addons-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'eael_fg_item_content_text_color',
            [
                'label' => esc_html__('Color', 'essential-addons-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#444',
                'selectors' => [
                    '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content p' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'eael_fg_item_content_text_typography',
                'selector' => '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content p',
            ]
        );

        $this->add_control(
          'eael_fg_item_readmore_text_typography_settings',
          [
              'label' => esc_html__('Read More Typography', 'essential-addons-elementor'),
              'type' => Controls_Manager::HEADING,
              'separator' => 'before',
          ]
      );

      $this->add_control(
          'eael_fg_item_content_readmore_color',
          [
              'label' => esc_html__('Color', 'essential-addons-elementor'),
              'type' => Controls_Manager::COLOR,
              'default' => '#444',
              'selectors' => [
                  '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content .eael_post_excerpt_read_more' => 'color: {{VALUE}};',
              ],
          ]
      );

      $this->add_group_control(
          Group_Control_Typography::get_type(),
          [
              'name' => 'eael_fg_item_content_readmore_typography',
              'selector' => '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content .eael_post_excerpt_read_more',
          ]
      );

        $this->add_responsive_control(
            'eael_fg_item_content_alignment',
            [
                'label' => esc_html__('Content Alignment', 'essential-addons-elementor'),
                'type' => Controls_Manager::CHOOSE,
                'label_block' => true,
                'separator' => 'before',
                'options' => [
                    'left' => [
                        'title' => esc_html__('Left', 'essential-addons-elementor'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'essential-addons-elementor'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('Right', 'essential-addons-elementor'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'default' => 'left',
                'selectors' => [
                    '{{WRAPPER}} .eael-filter-gallery-container.eael-cards .item-content' => 'text-align:{{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        /**
         * Load More Button Style Controls!
         */
        do_action('eael/controls/load_more_button_style', $this);
    }

    protected function title_condition(){
        return  [
            'relation' => 'or',
            'terms' => [
                [
                    'name' => 'eael_fg_grid_style',
                    'operator' => '==',
                    'value' => 'eael-hoverer',
                ],
                [
                    'relation' => 'and',
                    'terms' => [
                        [
                            'name' => 'eael_fg_grid_style',
                            'operator' => '==',
                            'value' => 'eael-cards',
                        ],
                        [
                            'name' => 'eael_fg_show_popup',
                            'operator' => '!=',
                            'value' => '',
                        ],
                        [
                            'name' => 'eael_fg_show_popup_styles',
                            'operator' => '!=',
                            'value' => 'media',
                        ],
                                                
                    ],  
                ]  
                                        
            ],
                        
        ];
    }

    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $settings = HelperClass::fix_old_query($settings);
        $args = HelperClass::get_query_args($settings);
        
        $this->add_render_attribute(
            'eael_dynamic_filter_gallery_wrap',
            [
                'id' => 'eael-filter-gallery-wrapper-' . $this->get_id(),
                'class' => [
                    'eael-filter-gallery-wrapper',
                ],
            ]
        );

        $this->add_render_attribute(
            'eael_dynamic_gallery_container',
            [
                'class' => [
                    'eael-filter-gallery-container',
                    'eael-post-appender',
                    'eael-post-appender-' . $this->get_id(),
                    $settings['eael_fg_gallery_layout_mode'],
                    esc_attr($settings['eael_fg_grid_style']),
                    esc_attr($settings['eael_fg_columns']),
                ],
                'data-settings' => wp_json_encode([
                    'item_style' => $settings['eael_fg_grid_style'],
                    'duration' => (!empty($settings['eael_fg_filter_duration'])) ? $settings['eael_fg_filter_duration'] : '500',
                    'layout_mode' => $settings['eael_fg_gallery_layout_mode'],
                ]),
            ]
        );

        echo '<div ' . $this->get_render_attribute_string('eael_dynamic_filter_gallery_wrap') . '>';
        // filter controls
        if (1 == $settings['show_gallery_filter_controls']) {
            echo '<div class="eael-filter-gallery-control">
                    <ul>
                        <li class="control active dynamic-gallery-category " data-filter="*">' . (isset($settings['eael_fg_all_label_text']) && !empty($settings['eael_fg_all_label_text']) ? esc_attr($settings['eael_fg_all_label_text']) : 'All') . '</li>';

            if (!empty($args['tax_query'])) {
                foreach ($args['tax_query'] as $taxonomy) {
                    if (!empty($taxonomy['terms'])) {
                        foreach ($taxonomy['terms'] as $term_id) {
                            $term = get_term($term_id, $taxonomy['taxonomy']);
                            echo '<li class="control dynamic-gallery-category " data-termid="' . esc_attr($term->term_id) . '" data-taxonomy="' . esc_attr($term->taxonomy) . '" data-filter=".' . esc_attr(urldecode($term->slug)) . '">' . ucfirst($term->name) . '</li>';
                        }
                    }
                }
            }
            echo '</ul>
                </div>';
        }
         $settings['eael_section_fg_zoom_icon'] = (isset($settings['__fa4_migrated']['eael_section_fg_zoom_icon_new']) || empty($settings['eael_section_fg_zoom_icon']) ? $settings['eael_section_fg_zoom_icon_new']['value'] : $settings['eael_section_fg_zoom_icon']);
         $settings['eael_section_fg_link_icon'] = (isset($settings['__fa4_migrated']['eael_section_fg_link_icon_new']) || empty($settings['eael_section_fg_link_icon']) ? $settings['eael_section_fg_link_icon_new']['value'] : $settings['eael_section_fg_link_icon']);
         $settings['show_load_more_text'] = $settings['eael_fg_loadmore_btn_text'];
         $settings['layout_mode'] = isset($settings['layout_mode']) ? $settings['layout_mode'] : 'masonry';
         $settings['eael_show_hover_title'] = $settings['eael_show_hover_title'];
         $settings['eael_show_hover_excerpt'] = $settings['eael_show_hover_excerpt'];
         $settings['eael_post_excerpt_read_more'] = $settings['eael_post_excerpt_read_more'];

        // content
            echo '<div ' . $this->get_render_attribute_string('eael_dynamic_gallery_container') . '>';
                $template = $this->get_template($this->get_settings('eael_dynamic_template_Layout'));
	            $found_posts = 0;

                if(file_exists($template)){

                    $query = new \WP_Query($args);

                    if ($query->have_posts()) {
	                    $found_posts      = $query->found_posts;
	                    $max_page         = ceil( $found_posts / absint( $args['posts_per_page'] ) );
	                    $args['max_page'] = $max_page;

                        while ($query->have_posts()) {
                            $query->the_post();
                                include($template);
                        }
                    } else {
                        _e('<p class="no-posts-found">No posts found!</p>', 'essential-addons-elementor');
                    }
                } else {
                    _e('<p class="no-posts-found">No Layout Found!</p>', 'essential-addons-elementor');
                }
        
                wp_reset_postdata();
        
            echo '</div>';

            // load more
        // normalize settigns for load more
        $settings['layout_mode'] = 'masonry'; // in master load more has static masonry text in layout_mode attr in loadmore button.
        $settings['show_load_more_text'] = $settings['eael_fg_loadmore_btn_text'];
        $template = $this->get_template($settings['eael_dynamic_template_Layout']);
        $settings['loadable_file_name'] = $this->get_filename_only($template);


	    if ( method_exists( $this, 'print_load_more_button' ) && $found_posts > $args['posts_per_page'] ) {
		    $dir_name = method_exists( $this, 'get_temp_dir_name' ) ? $this->get_temp_dir_name( $settings[ 'loadable_file_name' ] ) : "pro";
		    $this->print_load_more_button( $settings, $args, $dir_name );
	    }
        echo '</div>';

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

    protected function render_editor_script()
    {
        echo '<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".eael-filter-gallery-container").each(function() {
                    var $scope = jQuery(".elementor-element-' . $this->get_id() . '"),
                        $gallery = $(".eael-filter-gallery-container", $scope),
                        $settings = $gallery.data("settings"),
                        $layout_mode = $settings.layout_mode === "masonry" ? "masonry" : "fitRows";
                    
					var $isotope_gallery = $gallery.isotope({
                        itemSelector: ".dynamic-gallery-item",
                        layoutMode: $layout_mode,
                        percentPosition: true,
                        stagger: 30,
                        transitionDuration: $settings.duration + "ms",
                    });

                    $isotope_gallery.imagesLoaded().progress(function() {
                        $isotope_gallery.isotope("layout");
                    });

                    $(".dynamic-gallery-item", $gallery).resize(function() {
                        $isotope_gallery.isotope("layout");
                    });

					$scope.on("click", ".control", function(e) {
                        e.preventDefault();
                
                        var filterValue = $(this).data("filter");
                
                        $(this).siblings().removeClass("active");
                        $(this).addClass("active");
                        
                        $isotope_gallery.isotope({
                            filter: filterValue
                        });
                    });

				});
			});
		</script>';
    }
}