<?php
/**
 * Elementor Image Gallery Widget.
 *
 * Elementor widget that inserts an embbedable content into the page, from any given URL.
 *
 * @since 1.0.5
 */
class Elementor_Image_gallery_Widget extends \Elementor\Widget_Base {

	/**
	 * Get widget name.
	 *
	 * Retrieve Image Gallery widget name.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'image-gallery';
	}

	/**
	 * Get widget title.
	 *
	 * Retrieve Image Gallery widget title.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return __( 'Image Gallery', 'endless-addons' );
	}

	/**
	 * Get widget icon.
	 *
	 * Retrieve Image Gallery widget icon.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'fa fa-images';
	}

	/**
	 * Get widget categories.
	 *
	 * Retrieve the list of categories the Image Gallery widget belongs to.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return [ 'endless-elements' ];
	}

	/**
	 * Register Image Gallery widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since 1.0.5
	 * @access protected
	 */
	protected function register_controls() {

		$this->start_controls_section(
			'default_section',
			[    
				'label' => __( 'Settings', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT
			]
		);

		$this->add_control(
			'show_image_gallery',
			[
				'label' => __( 'Show/Hide Image Gallery Section', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'show' => [
						'title' => __( 'Show', 'endless-addons' ),
						'icon' => 'fa fa-check'
					],
					'hide' => [
						'title' => __( 'Hide', 'endless-addons' ),
						'icon' => 'fa fa-close'
					]
				],
				'default' => 'show',
				'toggle' => true
			]
		);

		$this->add_control(
			'select_image_gallery_style',
			[
				'label' => __( 'Select Image Gallery Style', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SELECT,
				'input_type' => 'SELECT',
				'options' => [
					'style-01' => __( 'Style 01', 'endless-addons' ),
					'style-02' => __( 'Style 02', 'endless-addons' ),
					'style-03' => __( 'Style 03', 'endless-addons' ),
					'style-04' => __( 'Style 04', 'endless-addons' ),
					'style-05' => __( 'Style 05', 'endless-addons' ),
					'style-06' => __( 'Style 06', 'endless-addons' ),
					'style-07' => __( 'Style 07', 'endless-addons' ),
					'style-08' => __( 'Style 08', 'endless-addons' )
				],
				'default' => 'style-01'
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'image_gallery_section',
			[
				'label' => __( 'Image Gallery Section', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'section_title',
			[
				'label' => __( 'Section Title', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'input_type' => 'text',
				'placeholder' => __( 'Title', 'endless-addons' ),
				'default'  => __( 'Design 1', 'endless-addons' )
			]
		);

		$this->add_control(
			'section_desc',
			[
				'label' => __( 'Section Description', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::WYSIWYG,
				'input_type' => 'WYSIWYG',
				'placeholder' => __( 'Description', 'endless-addons' ),
				'default' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.', 'endless-addons')
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name' => 'section_background',
				'label' => __( 'Background', 'plugin-domain' ),
				'types' => [ 'classic', 'gradient', 'video' ],
				'selector' => '{{WRAPPER}} .ea-image-gallery-area, .ea-image-gallery-mansory-areaa',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'image_gallery_content',
			[
				'label' => __( 'Image Gallery Content', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'image_gallery_type',
			[
				'label' => __( 'Select Gallery Type', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SELECT,
				'input_type' => 'SELECT',
				'options' => [
					'grid' => __( 'Grid', 'endless-addons' ),
					'mansory' => __( 'Mansory', 'endless-addons' )
				],
				'default' => 'mansory'
			]
		);

		$this->add_control(
			'image_gallery_grid_column',
			[
				'label' => __( 'Select Image Gallery Column', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SELECT,
				'input_type' => 'SELECT',
				'options' => [
					'columns-2' => __( '2', 'endless-addons' ),
					'columns-3' => __( '3', 'endless-addons' ),
					'columns-4' => __( '4', 'endless-addons' ),
					'columns-6' => __( '6', 'endless-addons' )
				],
				'default' => 'columns-3',
				'condition' => [
                    'select_image_gallery_style' => array('style-05', 'style-06', 'style-08'),
                    'image_gallery_type' => 'grid'
                ]
			]
		);

		$this->add_control(
			'image_gallery_mansory_column',
			[
				'label' => __( 'Select Image Gallery Column', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SELECT,
				'input_type' => 'SELECT',
				'options' => [
					'columns-2' => __( '2', 'endless-addons' ),
					'columns-3' => __( '3', 'endless-addons' ),
					'columns-4' => __( '4', 'endless-addons' ),
					'columns-6' => __( '6', 'endless-addons' )
				],
				'default' => 'columns-3',
				'condition' => [
                    'image_gallery_type' => 'mansory'
                ]
			]
		);

		$this->add_control(
			'show_image_caption',
			[
				'label' => __( 'Show/Hide Image Caption', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'show' => [
						'title' => __( 'Show', 'endless-addons' ),
						'icon' => 'fa fa-check'
					],
					'hide' => [
						'title' => __( 'Hide', 'endless-addons' ),
						'icon' => 'fa fa-close'
					]
				],
				'description' => __( 'Make sure to add image caption.', 'endless-addons' ),
				'default' => 'hide',
				'toggle' => true
			]
		);

		$this->add_control(
			'image_caption_align',
			[
				'label' => __( 'Caption Alignment', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'label_block' => false,
				'options' => [
					'left' => [
						'title' => __( 'Left', 'endless-addons' ),
						'icon' => 'eicon-h-align-left',
					],
					'center' => [
						'title' => __( 'Center', 'endless-addons' ),
						'icon' => 'eicon-h-align-center',
					],
					'right' => [
						'title' => __( 'Right', 'endless-addons' ),
						'icon' => 'eicon-h-align-right',
					],
				],
				'default' => 'center',
				'toggle' => false,
				'selectors' => [
					'{{WRAPPER}} .ea-image-gallery-area .ea-gallery h4, .ea-image-gallery-mansory-area .ea-gallery h4' => 'text-align: {{VALUE}};'
				],
				'condition' => [
                    'show_image_caption' => 'show'
                ]
			]
		);

		$this->add_control(
			'all_image_gallery', [
				'label' => __( 'Gallery', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::GALLERY,
                'input_type' => 'gallery'
			]
		);

		$this->add_control(
            'show_load_more',
            [
                'label' => esc_html__( 'Show Load More', 'endless-addons' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => [
                    '1'   => esc_html__( 'Show', 'endless-addons' ),
                    '2'   => esc_html__( 'Hide', 'endless-addons' ),
                ],
                'default' => '2',
                'condition' => [
                    'image_gallery_type' => 'mansory'
                ]
            ]
        );

        $this->add_control(
            'load_more_text',
            [
                'label'     => esc_html__( 'Load More Text', 'endless-addons' ),
                'type'      => \Elementor\Controls_Manager::TEXT,
                'default'   => esc_html__('Load More', 'endless-addons'),
                'condition' => [
                    'show_load_more' => '1',
                    'image_gallery_type' => 'mansory'
                ]
            ]
        );

        $this->add_control(
            'number_of_items_show',
            [
                'label'     => esc_html__( 'How many items to show?', 'endless-addons' ),
                'type'      => \Elementor\Controls_Manager::TEXT,
                'default'   => esc_html__('6', 'endless-addons'),
                'condition' => [
                    'show_load_more' => '1',
                    'image_gallery_type' => 'mansory'
                ]
            ]
        );

        $this->add_control(
            'number_of_items_load',
            [
                'label'     => esc_html__( 'How many items to load?', 'endless-addons' ),
                'type'      => \Elementor\Controls_Manager::TEXT,
                'default'   => esc_html__('3', 'endless-addons'),
                'condition' => [
                    'show_load_more' => '1',
                    'image_gallery_type' => 'mansory'
                ]
            ]
        );

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style',
			[
				'label' => __( 'Section Style', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

		$this->add_control(
			'section_title_color',
			[
				'label' => __( 'Section Title Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-image-gallery-area .section-title h2' => 'color: {{VALUE}}'
                ]
			]
		);

		$this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'section_title_typography',
                'label' => __( 'Section Title Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-image-gallery-area .section-title h2'
            ]
        );

        $this->add_control(
			'section_desc_color',
			[
				'label' => __( 'Section Description Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-image-gallery-area .section-title p' => 'color: {{VALUE}}'
                ]
			]
		);

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'section_desc_typography',
                'label' => __( 'Section Description Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-image-gallery-area .section-title p'
            ]
        );

		$this->end_controls_section();

		$this->start_controls_section(
			'image_gallery_style',
			[
				'label' => __( 'Image Gallery Style', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

		$this->add_control(
			'image_gallery_image_height',
			[
				'label' => __( 'Height', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 100,
						'max' => 1000
					]
				],
				'selectors' => [
					'{{WRAPPER}} .ea-image-gallery-area .ea-gallery img' => 'height: {{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->add_control(
			'image_gallery_image_width',
			[
				'label' => __( 'Width', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 100,
						'max' => 1000
					]
				],
				'selectors' => [
					'{{WRAPPER}} .ea-image-gallery-area .ea-gallery img' => 'width: {{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->add_control(
            'image_gallery_image_padding',
            [
                'label'         => esc_html__( 'Padding', 'endless-addons' ),
                'type'          => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units'    => [ 'px', '%', 'em' ],
                'selectors'     => [
                    '{{WRAPPER}} .ea-image-gallery-area .ea-gallery' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'image_gallery_image_margin',
            [
                'label'         => esc_html__( 'Margin', 'endless-addons' ),
                'type'          => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units'    => [ 'px', '%', 'em' ],
                'selectors'     => [
                    '{{WRAPPER}} .ea-image-gallery-area .ea-gallery' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'image_gallery_image_border_radius',
            [
                'label' => __( 'Border Radius', 'endless-addons' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'separator' => 'after',
                'selectors' => [
                    '{{WRAPPER}} .ea-image-gallery-area .ea-gallery img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
			'image_caption_color',
			[
				'label' => __( 'Image Caption Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-image-gallery-area .ea-gallery h4' => 'color: {{VALUE}}'
                ],
                'condition' => [
                    'show_image_caption' => 'show'
                ]
			]
		);

		$this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'image_caption_typography',
                'label' => __( 'Image Caption Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-image-gallery-area .ea-gallery h4',
                'condition' => [
                    'show_image_caption' => 'show'
                ]
            ]
        );

		$this->end_controls_section();

		$this->start_controls_section(
			'load_more_button_style',
			[
				'label' => __( 'Button Style', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
				'condition' => [
                    'show_load_more' => '1'
                ]
            ]
		);

		$this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'button_typography',
                'label' => __( 'Button Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-image-gallery-mansory-area .ea-default-btn',
            ]
        );

		$this->add_control(
			'button_bg_color',
			[
				'label' => __( 'Button Background Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-image-gallery-mansory-area .ea-default-btn' => 'background: {{VALUE}}'
                ],
			]
		);

		$this->add_control(
			'button_color',
			[
				'label' => __( 'Button Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-image-gallery-mansory-area .ea-default-btn' => 'color: {{VALUE}}'
                ],
			]
		);

		$this->add_control(
			'button_bg_hover_color',
			[
				'label' => __( 'Button Background Hover Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-image-gallery-mansory-area .ea-default-btn:hover' => 'background: {{VALUE}}'
                ],
			]
		);

		$this->add_control(
			'button_hover_color',
			[
				'label' => __( 'Button Hover Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-image-gallery-mansory-area .ea-default-btn:hover' => 'color: {{VALUE}}'
                ],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'_section_overlay_style',
			[
				'label' => __('Background Overlay', 'endless-addons'),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

		$this->start_controls_tabs('_tabs_overlay_style');

		$this->start_controls_tab(
			'_tab_overlay_normal',
			[
				'label' => __('Normal', 'endless-addons'),
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name'     => 'hover_overlay_normal',
				'label' => __('Background', 'endless-addons'),
				'show_label' => true,
				'types' => ['classic', 'gradient'],
				'exclude' => [
					'classic' => 'image'
				],
				'selector' => '{{WRAPPER}} .ea-image-gallery-area',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'_tab_overlay_hover',
			[
				'label' => __('Hover', 'endless-addons'),
			]
		);


		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name'     => 'hover_overlay_hover',
				'label' => __('Background', 'endless-addons'),
				'show_label' => true,
				'types' => ['classic', 'gradient'],
				'exclude' => [
					'classic' => 'image'
				],
				'selector' => '{{WRAPPER}} .ea-image-gallery-area:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

	}

	/**
	 * Render Image Gallery widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since 1.0.5
	 * @access protected
	 */
	protected function render() {

		$settings = $this->get_settings_for_display(); ?>

		<!-- Image Gallery Column Style -->
	    <?php if( $settings['image_gallery_grid_column'] == 'columns-2' ) :
			$image_gallery_grid_column = 'col-lg-6 col-md-6 col-sm-6';
		elseif( $settings['image_gallery_grid_column'] == 'columns-3' ) :
			$image_gallery_grid_column = 'col-lg-4 col-md-6 col-sm-6';
		elseif( $settings['image_gallery_grid_column'] == 'columns-4' ) :
			$image_gallery_grid_column = 'col-lg-3 col-md-6 col-sm-6';
		elseif( $settings['image_gallery_grid_column'] == 'columns-6' ) :
			$image_gallery_grid_column = 'col-lg-2 col-md-6 col-sm-6';
		endif; ?>

		<!-- Image Gallery Column Style -->
	    <?php if( $settings['image_gallery_mansory_column'] == 'columns-2' ) :
			$image_gallery_mansory_column = 'col-lg-6 col-md-6 col-sm-6';
		elseif( $settings['image_gallery_mansory_column'] == 'columns-3' ) :
			$image_gallery_mansory_column = 'col-lg-4 col-md-6 col-sm-6';
		elseif( $settings['image_gallery_mansory_column'] == 'columns-4' ) :
			$image_gallery_mansory_column = 'col-lg-3 col-md-6 col-sm-6';
	    elseif( $settings['image_gallery_mansory_column'] == 'columns-6' ) :
			$image_gallery_mansory_column = 'col-lg-2 col-md-6 col-sm-6';
		endif;

		if($settings['image_gallery_type'] == 'grid') :
			$ea_image_gallery_area = 'ea-image-gallery-area';
		elseif($settings['image_gallery_type'] == 'mansory') :
			$ea_image_gallery_area = 'ea-image-gallery-mansory-area';
		endif;

		if( $settings['show_image_gallery'] == 'show' ) :

			if( $settings['select_image_gallery_style'] == 'style-01' ) : ?>
				<!-- Start Image Gallery Design One Area -->
		        <section class="<?php echo esc_attr($ea_image_gallery_area); ?> style-one pb-70 gallery-popup">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo esc_html($settings['section_desc']); ?></p>
		                </div>
		                <div class="row justify-content-center">
		                	<?php foreach ( $settings['all_image_gallery'] as $image ) : ?>
		                		<?php if($settings['image_gallery_type'] == 'grid') : ?>
			                        <div class="col-lg-3 ea-gallery ea-g-mb-30">
			                    <?php elseif($settings['image_gallery_type'] == 'mansory') : ?>
			                        <div class="<?php echo esc_attr( $image_gallery_mansory_column ); ?> image-gallery-col ea-gallery ea-g-mb-30" style="display:none;">    
			                    <?php endif; ?>
		                            <?php if($image['url'] != ''): ?>
                                        <img src="<?php echo esc_url($image['url']); ?>" alt="Image">
                                        <a href="<?php echo esc_url($image['url']); ?>" class="full-screen">
	                                        <i class="bx bx-image-alt"></i>
	                                    </a>
                                        <?php if( $settings['show_image_caption'] == 'show' ) : ?>  
                                        	<h4>
                                                <?php echo esc_attr( wp_get_attachment_caption($image['id']) ); ?>
                                            </h4>
                                        <?php  endif;
                                    endif; ?>
			                    </div>
		                    <?php endforeach; ?>
		                </div>
		                <?php if( $settings['image_gallery_type'] == 'mansory' && $settings['show_load_more'] == '1' ) : ?>
                            <div class="col-12 text-center">
                               <a href="#" id="loadMore" class="ea-default-btn"><?php echo esc_html( $settings['load_more_text'] ); ?></a>
                            </div>
                        <?php endif; ?>
		            </div>
		        </section>
		        <!-- End Image Gallery Design One Area -->
	        <?php elseif( $settings['select_image_gallery_style'] == 'style-02' ) : ?>
				<!-- Start Image Gallery Design Two Area -->
		        <section class="<?php echo esc_attr($ea_image_gallery_area); ?> style-two pb-70 gallery-popup">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo esc_html($settings['section_desc']); ?></p>
		                </div>
		                <div class="row justify-content-center">
		                	<?php foreach ( $settings['all_image_gallery'] as $image ) : ?>
		                		<?php if($settings['image_gallery_type'] == 'grid') : ?>
			                        <div class="col-lg-4 ea-gallery ea-g-mb-30" data-aos="fade-left">
			                    <?php elseif($settings['image_gallery_type'] == 'mansory') : ?>
			                        <div class="<?php echo esc_attr( $image_gallery_mansory_column ); ?> image-gallery-col ea-gallery ea-g-mb-30" data-aos="fade-left" style="display:none;">    
			                    <?php endif; ?>
		                            <?php if($image['url'] != ''): ?>
                                        <img src="<?php echo esc_url($image['url']); ?>" alt="Image">
                                        <a href="<?php echo esc_url($image['url']); ?>" class="full-screen">
	                                        <i class="bx bx-image-alt"></i>
	                                    </a>
                                        <?php if( $settings['show_image_caption'] == 'show' ) : ?>
                                        	<h4>
                                                <?php echo esc_attr( wp_get_attachment_caption($image['id']) ); ?>
                                            </h4>
                                        <?php  endif;
                                    endif; ?>
			                    </div>
		                    <?php endforeach; ?>
		                </div>
		                <?php if( $settings['image_gallery_type'] == 'mansory' && $settings['show_load_more'] == '1' ) : ?>
                            <div class="col-12 text-center">
                               <a href="#" id="loadMore" class="ea-default-btn"><?php echo esc_html( $settings['load_more_text'] ); ?></a>
                            </div>
                        <?php endif; ?>
		            </div>
		        </section>
		        <!-- End Image Gallery Design Two Area -->
		    <?php elseif( $settings['select_image_gallery_style'] == 'style-03' ) : ?>
				<!-- Start Image Gallery Design Three Area -->
		        <section class="<?php echo esc_attr($ea_image_gallery_area); ?> style-three pb-70 gallery-popup">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo esc_html($settings['section_desc']); ?></p>
		                </div>
		                <div class="row justify-content-center">
		                	<?php foreach ( $settings['all_image_gallery'] as $image ) : ?>
		                		<?php if($settings['image_gallery_type'] == 'grid') : ?>
			                        <div class="col-lg-3 image-gallery-col" data-aos="fade-right">
			                    <?php elseif($settings['image_gallery_type'] == 'mansory') : ?>
			                        <div class="<?php echo esc_attr( $image_gallery_mansory_column ); ?> image-gallery-col" data-aos="fade-right" style="display:none;">    
			                    <?php endif; ?> 
				                    <div class="ea-gallery ea-g-mb-30">    
			                            <?php if($image['url'] != ''): ?>
                                            <img src="<?php echo esc_url($image['url']); ?>" alt="Image">
	                                        <a href="<?php echo esc_url($image['url']); ?>" class="full-screen">
		                                        <i class="bx bx-image-alt"></i>
		                                    </a>
	                                        <?php if( $settings['show_image_caption'] == 'show' ) : ?>  
	                                        	<h4>
	                                                <?php echo esc_attr( wp_get_attachment_caption($image['id']) ); ?>
	                                            </h4>
	                                        <?php  endif;
	                                    endif; ?>
				                    </div>
				                </div>
		                    <?php endforeach; ?>
		                </div>
		                <?php if( $settings['image_gallery_type'] == 'mansory' && $settings['show_load_more'] == '1' ) : ?>
                            <div class="col-12 text-center">
                               <a href="#" id="loadMore" class="ea-default-btn"><?php echo esc_html( $settings['load_more_text'] ); ?></a>
                            </div>
                        <?php endif; ?>
		            </div>
		        </section>
		        <!-- End Image Gallery Design Three Area -->
		    <?php elseif( $settings['select_image_gallery_style'] == 'style-04' ) : ?>
				<!-- Start Image Gallery Design Four Area -->
		        <section class="<?php echo esc_attr($ea_image_gallery_area); ?> style-four bg-color-f3fbf7 pt-100 pb-70 gallery-popup">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo esc_html($settings['section_desc']); ?></p>
		                </div>
		                <div class="row justify-content-center">
		                	<?php foreach ( $settings['all_image_gallery'] as $image ) : ?>
		                		<?php if($settings['image_gallery_type'] == 'grid') : ?>
			                        <div class="col-lg-3 image-gallery-col" data-aos="fade-left">
			                    <?php elseif($settings['image_gallery_type'] == 'mansory') : ?>
			                        <div class="<?php echo esc_attr( $image_gallery_mansory_column ); ?> image-gallery-col" data-aos="fade-left" style="display:none;">    
			                    <?php endif; ?>
				                    <div class="ea-gallery ea-g-mb-30">    
			                            <?php if($image['url'] != ''): ?>
                                            <img src="<?php echo esc_url($image['url']); ?>" alt="Image">
                                            <a href="<?php echo esc_url($image['url']); ?>" class="full-screen">
		                                        <i class="bx bx-image-alt"></i>
		                                    </a>
	                                        <?php if( $settings['show_image_caption'] == 'show' ) : ?>  
	                                        	<h4>
	                                                <?php echo esc_attr( wp_get_attachment_caption($image['id']) ); ?>
	                                            </h4>
	                                        <?php  endif;
	                                    endif; ?>
				                    </div>
				                </div>
		                    <?php endforeach; ?>
		                </div>
		                <?php if( $settings['image_gallery_type'] == 'mansory' && $settings['show_load_more'] == '1' ) : ?>
                            <div class="col-12 text-center">
                               <a href="#" id="loadMore" class="ea-default-btn"><?php echo esc_html( $settings['load_more_text'] ); ?></a>
                            </div>
                        <?php endif; ?>
		            </div>
		        </section>
		        <!-- End Image Gallery Design Four Area -->
		    <?php elseif( $settings['select_image_gallery_style'] == 'style-05' ) : ?>
				<!-- Start Image Gallery Design Five Area -->
		        <section class="<?php echo esc_attr($ea_image_gallery_area); ?> pt-100 pb-70 gallery-popup">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo esc_html($settings['section_desc']); ?></p>
		                </div>
		                <div class="row justify-content-center">
		                	<?php foreach ( $settings['all_image_gallery'] as $image ) : ?>
		                		<?php if($settings['image_gallery_type'] == 'grid') : ?>
			                        <div class="image-gallery-col <?php echo esc_attr( $image_gallery_grid_column ); ?>" data-aos="fade-up">
			                    <?php elseif($settings['image_gallery_type'] == 'mansory') : ?>
			                        <div class="image-gallery-col <?php echo esc_attr( $image_gallery_mansory_column ); ?>" data-aos="fade-up" style="display:none;">    
			                    <?php endif; ?> 
				                    <div class="ea-gallery ea-g-mb-30">    
			                            <?php if($image['url'] != ''): ?>
                                            <img src="<?php echo esc_url($image['url']); ?>" alt="Image">
                                            <a href="<?php echo esc_url($image['url']); ?>" class="full-screen">
		                                        <i class="bx bx-image-alt"></i>
		                                    </a>
	                                        <?php if( $settings['show_image_caption'] == 'show' ) : ?>  
	                                        	<h4>
	                                                <?php echo esc_attr( wp_get_attachment_caption($image['id']) ); ?>
	                                            </h4>
	                                        <?php  endif;
	                                    endif; ?>
				                    </div>
				                </div>
		                    <?php endforeach; ?>
		                </div>
		                <?php if( $settings['image_gallery_type'] == 'mansory' && $settings['show_load_more'] == '1' ) : ?>
                            <div class="col-12 text-center">
                               <a href="#" id="loadMore" class="ea-default-btn"><?php echo esc_html( $settings['load_more_text'] ); ?></a>
                            </div>
                        <?php endif; ?>
		            </div>
		        </section>
		        <!-- End Image Gallery Design Five Area -->
		    <?php elseif( $settings['select_image_gallery_style'] == 'style-06' ) : ?>
				<!-- Start Image Gallery Design Six Area -->
		        <section class="<?php echo esc_attr($ea_image_gallery_area); ?> style-six pt-100 pb-70 gallery-popup">
		            <div class="container-fluid p-0">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo esc_html($settings['section_desc']); ?></p>
		                </div>
		                <div class="row justify-content-center">
		                	<?php foreach ( $settings['all_image_gallery'] as $image ) : ?>
		                		<?php if($settings['image_gallery_type'] == 'grid') : ?>
			                        <div class="image-gallery-col <?php echo esc_attr( $image_gallery_grid_column ); ?>" data-aos="zoom-in">
			                    <?php elseif($settings['image_gallery_type'] == 'mansory') : ?>
			                        <div class="image-gallery-col <?php echo esc_attr( $image_gallery_mansory_column ); ?>" data-aos="zoom-in" style="display:none;">   
			                    <?php endif; ?> 
				                    <div class="ea-gallery ea-g-mb-30">    
			                            <?php if($image['url'] != ''): ?>
                                            <img src="<?php echo esc_url($image['url']); ?>" alt="Image">
                                            <a href="<?php echo esc_url($image['url']); ?>" class="full-screen">
		                                        <i class="bx bx-image-alt"></i>
		                                    </a>
	                                        <?php if( $settings['show_image_caption'] == 'show' ) : ?>  
	                                        	<h4>
	                                                <?php echo esc_attr( wp_get_attachment_caption($image['id']) ); ?>
	                                            </h4>
	                                        <?php  endif;
	                                    endif; ?>
				                    </div>
				                </div>
		                    <?php endforeach; ?>
		                </div>
		                <?php if( $settings['image_gallery_type'] == 'mansory' && $settings['show_load_more'] == '1' ) : ?>
                            <div class="col-12 text-center">
                               <a href="#" id="loadMore" class="ea-default-btn"><?php echo esc_html( $settings['load_more_text'] ); ?></a>
                            </div>
                        <?php endif; ?>
		            </div>
		        </section>
		        <!-- End Image Gallery Design Six Area -->
		    <?php elseif( $settings['select_image_gallery_style'] == 'style-07' ) : ?>
				<!-- Start Image Gallery Design Seven Area -->
		        <section class="<?php echo esc_attr($ea_image_gallery_area); ?> pt-100 pb-70 style-seven gallery-popup">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo esc_html($settings['section_desc']); ?></p>
		                </div>
		                <div class="row justify-content-center">
		                	<?php foreach ( $settings['all_image_gallery'] as $image ) : ?>
		                		<?php if($settings['image_gallery_type'] == 'grid') : ?>
			                        <div class="col-lg-3 ea-gallery ea-g-mb-30" data-aos="zoom-out-up">
			                    <?php elseif($settings['image_gallery_type'] == 'mansory') : ?>
			                        <div class="<?php echo esc_attr( $image_gallery_mansory_column ); ?> image-gallery-col ea-gallery ea-g-mb-30" data-aos="zoom-out-up" style="display:none;">   
			                    <?php endif; ?>    
		                            <?php if($image['url'] != ''): ?>
                                        <img src="<?php echo esc_url($image['url']); ?>" alt="Image">
                                        <a href="<?php echo esc_url($image['url']); ?>" class="full-screen">
		                                    <i class="bx bx-image-alt"></i>
		                                </a>
                                        <?php if( $settings['show_image_caption'] == 'show' ) : ?>  
                                        	<h4>
                                                <?php echo esc_attr( wp_get_attachment_caption($image['id']) ); ?>
                                            </h4>
                                        <?php  endif;
                                    endif; ?>
			                    </div>
		                    <?php endforeach; ?>
		                </div>
		                <?php if( $settings['image_gallery_type'] == 'mansory' && $settings['show_load_more'] == '1' ) : ?>
                            <div class="col-12 text-center">
                               <a href="#" id="loadMore" class="ea-default-btn"><?php echo esc_html( $settings['load_more_text'] ); ?></a>
                            </div>
                        <?php endif; ?>
		            </div>
		        </section>
		        <!-- End Image Gallery Design Seven Area -->
		    <?php elseif( $settings['select_image_gallery_style'] == 'style-08' ) : ?>
				<!-- Start Image Gallery Design Eight Area -->
		        <section class="<?php echo esc_attr($ea_image_gallery_area); ?> style-eight bg-shape gallery-popup">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo esc_html($settings['section_desc']); ?></p>
		                </div>
		                <div class="row justify-content-center">
		                	<?php foreach ( $settings['all_image_gallery'] as $image ) : ?>
		                		<?php if($settings['image_gallery_type'] == 'grid') : ?>
			                        <div class="image-gallery-col <?php echo esc_attr( $image_gallery_grid_column ); ?>" data-aos="fade-left">
			                    <?php elseif($settings['image_gallery_type'] == 'mansory') : ?>
			                        <div class="image-gallery-col <?php echo esc_attr( $image_gallery_mansory_column ); ?>" data-aos="fade-left" style="display:none;">   
			                    <?php endif; ?> 
				                    <div class="ea-gallery ea-g-mb-30">    
			                            <?php if($image['url'] != ''): ?>
                                            <img src="<?php echo esc_url($image['url']); ?>" alt="Image">
                                            <a href="<?php echo esc_url($image['url']); ?>" class="full-screen">
		                                        <i class="bx bx-image-alt"></i>
		                                    </a>
	                                        <?php if( $settings['show_image_caption'] == 'show' ) : ?>  
	                                        	<h4>
	                                                <?php echo esc_attr( wp_get_attachment_caption($image['id']) ); ?>
	                                            </h4>
	                                        <?php  endif;
	                                    endif; ?>
				                    </div>
				                </div>
		                    <?php endforeach; ?>
		                </div>
		                <?php if( $settings['image_gallery_type'] == 'mansory' && $settings['show_load_more'] == '1' ) : ?>
                            <div class="col-12 text-center">
                               <a href="#" id="loadMore" class="ea-default-btn"><?php echo esc_html( $settings['load_more_text'] ); ?></a>
                            </div>
                        <?php endif; ?>
		            </div>
		        </section>
		        <!-- End Image Gallery Design Eight Area -->
		    <?php endif; ?>
                
                <script type="text/javascript">
                	// Gallery Js
				   jQuery(function () {
					    jQuery(".ea-image-gallery-mansory-area .row .image-gallery-col").slice(0, <?php echo esc_attr($settings['number_of_items_show']); ?>).show();
					    jQuery("#loadMore").on('click', function (e) {
					        e.preventDefault();
					        jQuery(".ea-image-gallery-mansory-area .row .image-gallery-col:hidden").slice(0, <?php echo esc_attr($settings['number_of_items_load']); ?>).slideDown();
					        if (jQuery(".ea-image-gallery-mansory-area .row .image-gallery-col:hidden").length == 0) {
					            jQuery("#load").fadeOut('slow');
					        }
					        jQuery('html, body').animate({
					            scrollTop: $(this).offset().top
					        }, 1500);
					    });
					});
                </script>
		  
        <?php endif;

    }

}
