<?php

namespace Elementor;

class Themedraft_single_project_slider_Widget extends Widget_Base {

	public function get_name() {

		return 'themedraft_single_project_slider';
	}

	public function get_title() {
		return esc_html__('Project Info Slider', 'themedraft-core');
	}

	public function get_icon() {

		return 'eicon-slider-push';
	}

	public function get_categories() {
		return ['themedraft_elements'];
	}


	protected function register_controls() {

		//Slider
		$this->start_controls_section(
			'project_slider_images',
			[
				'label' => __('Slider Options', 'themedraft-core'),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
		    'show_slider',
		    [
		        'label'     => esc_html__( 'Show Slider', 'themedraft-core' ),
		        'type'      => Controls_Manager::SWITCHER,
		        'label_on'  => esc_html__( 'Yes', 'themedraft-core' ),
		        'label_off' => esc_html__( 'No', 'themedraft-core' ),
		        'default'   => 'yes',
		    ]
		);

		$this->add_control(
			'slide_images',
			[
				'label'   => __('Add Images', 'themedraft-core'),
				'type'    => Controls_Manager::GALLERY,
				'default' => [],
                'condition' => [
                    'show_slider' => 'yes',
                ],
			]
		);

		$this->add_control(
			'autoplay',
			[
				'label'       => __('Autoplay', 'themedraft-core'),
				'type'        => Controls_Manager::SWITCHER,
				'show_label'  => true,
				'label_block' => false,
				'default'     => 'yes',
				'condition' => [
					'show_slider' => 'yes',
				],
			]
		);

		$this->add_control(
			'nav_dots',
			[
				'label'       => __('Navigation Dots', 'themedraft-core'),
				'type'        => Controls_Manager::SWITCHER,
				'show_label'  => true,
				'label_block' => false,
				'default'     => 'yes',
				'condition' => [
					'show_slider' => 'yes',
				],
			]
		);

		$this->end_controls_section();


		$this->start_controls_section(
			'project_slider_info',
			[
				'label' => __('Project Information', 'themedraft-core'),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
		    'show_info',
		    [
		        'label'     => esc_html__( 'Show Info', 'themedraft-core' ),
		        'type'      => Controls_Manager::SWITCHER,
		        'label_on'  => esc_html__( 'Yes', 'themedraft-core' ),
		        'label_off' => esc_html__( 'No', 'themedraft-core' ),
		        'default'   => 'yes',
		    ]
		);

		$this->add_control(
			'info_title',
			[
				'label'       => esc_html__('Info Box Title', 'themedraft-core'),
				'type'        => Controls_Manager::TEXTAREA,
				'rows'        => 5,
				'default'     => esc_html__('Project Information', 'themedraft-core'),
				'description' => esc_html__('', 'themedraft-core'),
				'placeholder' => esc_html__('Type Info box title here', 'themedraft-core'),
                'condition' => [
                    'show_info' => 'yes',
                ],
			]
		);

		$this->add_control(
		    'type',
		    [
		        'label'       => __( 'Title Icon Type', 'themedraft-core' ),
		        'type'        => Controls_Manager::CHOOSE,
		        'label_block' => false,
		        'options'     => [
		            'icon'  => [
		                'title' => __( 'Icon', 'themedraft-core' ),
		                'icon'  => 'fa fa-smile-o',
		            ],
		            'image' => [
		                'title' => __( 'Image', 'themedraft-core' ),
		                'icon'  => 'fa fa-image',
		            ],
		        ],
		        'default'     => 'icon',
		        'toggle'      => false,
		        'condition' => [
			        'show_info' => 'yes',
		        ],
		    ]
		);

		$this->add_control(
		    'selected_icon',
		    [
		        'type'             => Controls_Manager::ICONS,
		        'fa4compatibility' => 'icon',
		        'label_block'      => true,
		        'default'          => [
		            'value'   => 'fas fa-info-circle',
		            'library' => 'solid',
		        ],
		        'condition'        => [
		            'type' => 'icon',
		            'show_info' => 'yes'
		        ]
		    ]
		);

		$this->add_control(
		    'image',
		    [
		        'label'     => __( 'Image', 'themedraft-core' ),
		        'type'      => Controls_Manager::MEDIA,
		        'default'   => [
		            'url' => Utils::get_placeholder_image_src(),
		        ],
		        'condition' => [
		            'type' => 'image',
		            'show_info' => 'yes',
		        ],
		        'dynamic'   => [
		            'active' => true,
		        ]
		    ]
		);

		//Repeater Start
		$repeater = new Repeater();

		$repeater->add_control(
		    'type2',
		    [
		        'label'       => __( 'Icon Type', 'themedraft-core' ),
		        'type'        => Controls_Manager::CHOOSE,
		        'label_block' => false,
		        'options'     => [
		            'icon2'  => [
		                'title' => __( 'Icon', 'themedraft-core' ),
		                'icon'  => 'fa fa-smile-o',
		            ],
		            'image2' => [
		                'title' => __( 'Image', 'themedraft-core' ),
		                'icon'  => 'fa fa-image',
		            ],
		        ],
		        'default'     => 'icon2',
		        'toggle'      => false,
		    ]
		);

		$repeater->add_control(
		    'selected_icon2',
		    [
		        'type'             => Controls_Manager::ICONS,
		        'fa4compatibility' => 'icon',
		        'label_block'      => true,
		        'default'          => [
		            'value'   => 'flaticon-business-calendar',
		            'library' => 'themedraft-flaticon',
		        ],
		        'condition'        => [
		            'type2' => 'icon2'
		        ]
		    ]
		);

		$repeater->add_control(
		    'image2',
		    [
		        'label'     => __( 'Image', 'themedraft-core' ),
		        'type'      => Controls_Manager::MEDIA,
		        'default'   => [
		            'url' => Utils::get_placeholder_image_src(),
		        ],
		        'condition' => [
		            'type2' => 'image2'
		        ],
		        'dynamic'   => [
		            'active' => true,
		        ]
		    ]
		);

		$repeater->add_control(
			'info_item_title',
			[
				'label'       => esc_html__('Info Item Title', 'themedraft-core'),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__('Date', 'themedraft-core'),
				'label_block' => true,
			]
		);

		$repeater->add_control(
			'info_item_desc',
			[
				'label'       => esc_html__('Info Item Description', 'themedraft-core'),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => esc_html__('20 June 2020', 'themedraft-core'),
				'label_block' => true,
			]
		);

		$this->add_control(
			'information',
			[
				'label'       => esc_html__('Information List', 'themedraft-core'),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [
					[
						'info_item_title'        => esc_html__('Date', 'themedraft-core'),
						'info_item_desc' => esc_html__('20 June 2020', 'themedraft-core'),
					],
				],
				'title_field' => '{{{ info_item_title }}}',
				'condition' => [
					'show_info' => 'yes',
				],
			]
		);
		//Repeater End
		$this->end_controls_section();

		$this->start_controls_section(
			'project_slider_style',
			[
				'label' => __('Slider', 'themedraft-core'),
				'tab'   => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_slider' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'slide_height',
			[
				'label'           => __('Slider Height', 'themedraft-core'),
				'type'            => Controls_Manager::SLIDER,
				'range'           => [
					'px' => [
						'min' => 300,
						'max' => 800,
					],
				],
				'devices'         => ['desktop', 'tablet', 'mobile'],

				'selectors'       => [
					'{{WRAPPER}} div.single-project-slide-item' => 'height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .td-project-info'              => 'min-height: {{SIZE}}{{UNIT}};',
				],
				'separator'       => 'before',
			]
		);

		$this->add_responsive_control(
			'slider_width',
			[
				'label' => __( 'Slider Width (%)', 'themedraft-core' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['%'],
				'range' => [
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'devices' => [ 'desktop', 'tablet', 'mobile' ],
				'selectors' => [
					'{{WRAPPER}} .td-project-slider-column.col-lg-8.col-md-6' => 'flex:0 0 {{SIZE}}%;max-width: {{SIZE}}%;',
				],

			]
		);


		$this->add_control(
			'dot_color',
			[
				'label'       => esc_html__('Navigation Dot Color', 'themedraft-core'),
				'description' => esc_html__('', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-single-project-slider-wrapper .slick-dots button' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'nav_dots' => 'yes',
				],
			]
		);

		$this->add_control(
			'dot_active_color',
			[
				'label'       => esc_html__('Navigation Dot Active Color', 'themedraft-core'),
				'description' => esc_html__('', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-single-project-slider-wrapper .slick-dots .slick-active button,{{WRAPPER}} .td-single-project-slider-wrapper .slick-dots button:hover' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'nav_dots' => 'yes',
				],
			]
		);

		$this->end_controls_section();


		$this->start_controls_section(
		    'info_box_style',
		    [
		        'label' => esc_html__( 'Information', 'themedraft-core' ),
		        'tab'   => Controls_Manager::TAB_STYLE,
		        'condition' => [
			        'show_info' => 'yes',
		        ],
		    ]
		);

		$this->add_group_control(
		    Group_Control_Typography::get_type(),
		    [
		        'name' => 'info_title_typo',
		        'label' => __( 'Main Title Typography', 'themedraft-core' ),
		        'selector' => '{{WRAPPER}} .td-project-info li.td-project-info-main-title',
		    ]
		);

		$this->add_responsive_control(
			'info_box_width',
			[
				'label' => __( 'Width (%)', 'themedraft-core' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['%'],
				'range' => [
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'devices' => [ 'desktop', 'tablet', 'mobile' ],
				'selectors' => [
					'{{WRAPPER}} .td-project-info-column.col-lg-4.col-md-6' => 'flex:0 0 {{SIZE}}%;max-width: {{SIZE}}%;',
				],

			]
		);

		$this->add_responsive_control(
			'info_height',
			[
				'label' => __( 'Height', 'themedraft-core' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 1000,
					],
				],
				'devices' => [ 'desktop', 'tablet', 'mobile' ],
				'selectors' => [
					'{{WRAPPER}} .td-project-info' => 'min-height: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'show_slider!' => 'yes',
				],
			]
		);

		$this->add_control(
			'info_bg_color',
			[
				'label'       => esc_html__('Background Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-project-info' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'info_text_color',
			[
				'label'       => esc_html__('Text Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-project-info,{{WRAPPER}} .td-project-info a' => 'color: {{VALUE}};',
					'{{WRAPPER}} .td-project-info li svg' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'info_border_color',
			[
				'label'       => esc_html__('Border Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-project-info li' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();
	}

	//Render
	protected function render() {
		$settings = $this->get_settings_for_display();
		$sliderId = rand(10, 1000);
		if(is_rtl()){
			$slide_dir = 'dir="ltr"';
		}else{
			$slide_dir = '';
		}
		?>

		<div class="td-single-project-slider-wrapper">
			<div class="row no-gutters">

                <?php if($settings['show_slider'] == 'yes') : ?>
				<div class="td-project-slider-column col-lg-8 col-md-6">
					<div <?php echo $slide_dir;?> id="td-project-slider-<?php echo esc_attr($sliderId); ?>" class="td-project-slider ">
						<?php
						if ($settings['slide_images']) {
							foreach ( $settings['slide_images'] as $image ) { ?>
								<div class="single-project-slide-item"
								     style="background-image: url(<?php echo esc_url($image['url']); ?>)"></div>
								<?php

							}
						}
						?>

					</div>
				</div>
                <?php endif;?>

                <?php if($settings['show_info'] == 'yes') : ?>
				<div class="td-project-info-column col-lg-4 col-md-6">
					<div class="td-project-info">
						<ul class="td-project-info-details td-list-style">
							<li class="td-project-info-main-title">
								<?php if ( $settings['type'] === 'image' ) :
									if ( $settings['image']['url'] || $settings['image']['id'] ) :
										?>
                                        <div class="td-project-info-icon">
                                            <img src="<?php echo $settings['image']['url']; ?>"
                                                 alt="<?php echo get_post_meta( $settings['image']['id'], '_wp_attachment_image_alt', true ); ?>">
                                        </div>
									<?php endif;
                                elseif ( ! empty( $settings['icon'] ) || ! empty( $settings['selected_icon'] ) ) : ?>
                                    <div class="td-project-info-icon">
										<?php ThemeDraft_Custom_Icon_Render( $settings, 'icon', 'selected_icon' ); ?>
                                    </div>
								<?php endif; ?>
								<?php echo $settings['info_title'];?>
							</li>

							<?php if($settings['information']){
								foreach ($settings['information'] as $info ) { ?>

									<li>
										<?php if ( $info['type2'] === 'image2' ) :
											if ( $info['image2']['url'] || $info['image2']['id'] ) :
												?>
                                                <div class="td-project-info-icon">
                                                    <img src="<?php echo $info['image2']['url']; ?>"
                                                         alt="<?php echo get_post_meta( $info['image2']['id'], '_wp_attachment_image_alt', true ); ?>">
                                                </div>
											<?php endif;
                                        elseif ( ! empty( $info['icon2'] ) || ! empty( $info['selected_icon2'] ) ) : ?>
                                            <div class="td-project-info-icon">
												<?php ThemeDraft_Custom_Icon_Render( $info, 'icon2', 'selected_icon2' ); ?>
                                            </div>
										<?php endif; ?>
										<span class="td-project-info-title"><?php echo $info['info_item_title'] ?></span>
										<span class="td-project-info-details"><?php echo $info['info_item_desc'] ?></span>
									</li>
									<?php
								}
							} ?>
						</ul>
					</div>
				</div>
                <?php endif;?>
			</div>

		    <?php if($settings['show_slider'] == 'yes') : ?>

			<?php if ($settings['slide_images'] && count($settings['slide_images']) > 1) : ?>

				<script>
                    (function ($) {
                        "use strict";
                        //Documnet Ready Function
                        $(document).ready(function () {
                            // slider - active
                            function projectSlider() {
                                var SliderActive = $('#td-project-slider-<?php echo esc_attr($sliderId);?>');

                                SliderActive.slick({
                                    slidesToShow: 1,
                                    autoplay: <?php echo json_encode($settings['autoplay'] == 'yes' ? true : false); ?>,
                                    autoplaySpeed: 4000,
                                    speed: 1500, // slide speed
                                    dots:<?php echo json_encode($settings['nav_dots'] == 'yes' ? true : false); ?>,
                                    fade: false,
                                    draggable: true,
                                    pauseOnHover: false,
                                    arrows: false,
                                });
                            }
                            projectSlider();

                        });
                    })(jQuery);
				</script>
			<?php endif; ?>
			<?php endif; ?>
		</div>

		<?php
	}
}

Plugin::instance()->widgets_manager->register(new Themedraft_single_project_slider_Widget);