<?php
namespace Elementor;

class ThemeDraft_Service_Box_Three_Widget extends Widget_Base {

	public function get_name() {

		return 'themedraft_service_box_three';
	}

	public function get_title() {
		return esc_html__( 'Service Box Three', 'themedraft-core' );
	}

	public function get_icon() {

		return 'flaticon-business-suitcase';
	}

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


	protected function register_controls() {

		//Content tab start
		$this->start_controls_section(
			'service_box_three_settings',
			[
				'label' => esc_html__( 'Service Box', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'thumbnail',
			[
				'label'       => __( 'Service Image', 'themedraft-core' ),
				'type'        => Controls_Manager::MEDIA,
				'label_block' => true,
				'default'     => [
					'url' => Utils::get_placeholder_image_src(),
				],
			]
		);

		$repeater->add_control(
			'type',
			[
				'label'       => __( '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,
			]
		);

		$repeater->add_control(
			'selected_icon',
			[
				'label'       => __( 'Select Icon', 'themedraft-core' ),
				'type'             => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'label_block'      => true,
				'default'          => [
					'value'   => 'flaticon-industry-industry-7',
					'library' => 'themedraft-industry',
				],
				'condition'        => [
					'type' => 'icon'
				]
			]
		);

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

		$repeater->add_control(
			'title',
			[
				'label'       => __( 'Title', 'themedraft-core' ),
				'type'        => Controls_Manager::TEXTAREA,
				'rows'        => 5,
				'default'     => __( 'Industrial Construction', 'themedraft-core' ),
				'label_block' => true,
			]
		);

		$repeater->add_control(
			'desc_text',
			[
				'label'   => __('Desscription', 'themedraft-core'),
				'type'    => Controls_Manager::WYSIWYG,
				'default' => __('Provide industrial services the team serve all major sectors & all compan in to the world.', 'themedraft-core'),
			]
		);

		$repeater->add_control(
			'details_url',
			[
				'label'         => __( 'Details URL', 'themedraft-core' ),
				'type'          => Controls_Manager::URL,
				'placeholder'   => __( 'https://your-link.com', 'themedraft-core' ),
				'show_external' => true,
				'default'       => [
					'url'         => '',
					'is_external' => false,
					'nofollow'    => false,
				],
			]
		);

		$repeater->add_control(
			'btn_text',
			[
				'label'       => __( 'Button Text', 'themedraft-core' ),
				'label_block'       => true,
				'type'        => Controls_Manager::TEXT,
				'default'     => __( 'Read More', 'themedraft-core' ),
			]
		);

		$repeater->add_control(
			'entrance_animation',
			[
				'label' => __( 'Entrance Animation', 'themedraft-core' ),
				'type' => Controls_Manager::ANIMATION,
				'prefix_class' => 'animated ',
				'separator' => 'before ',
			]
		);

		$repeater->add_control(
			's3_animation_duration',
			[
				'label'     => __( 'Animation Duration', 'themedraft-core' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'data-wow-duration="1.25s"',
				'options'   => [
					'data-wow-duration="2s"'    => __( 'Slow', 'themedraft-core' ),
					'data-wow-duration="1.25s"' => __( 'Normal', 'themedraft-core' ),
					'data-wow-duration=".75s"'  => __( 'Fast', 'themedraft-core' ),
				],
				'condition' => [
					'entrance_animation!' => '',
				]
			]
		);

		$this->add_control(
			'services',
			[
				'label'       => __('Service List', 'themedraft-core'),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [
					[
						'title'        => __('Industrial Construction', 'themedraft-core'),
						'desc_text' => __('Provide industrial services the team serve all major sectors & all compan in to the world.', 'themedraft-core'),
						'selected_icon' => 'flaticon-industry-industry-7',
						'btn_text' => __('View Details', 'themedraft-core'),
					],
				],
				'title_field' => '{{{ title }}}',
			]
		);

		$this->end_controls_section();


		$this->start_controls_section(
			'slider_options',
			[
				'label' => esc_html__( 'Slider & Column Options', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'enable_slider',
			[
				'label'     => esc_html__( 'Enable 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(
			'autoplay',
			[
				'label'       => __( 'Autoplay', 'themedraft-core' ),
				'type'        => Controls_Manager::SWITCHER,
				'show_label'  => true,
				'label_block' => false,
				'default'     => 'yes',
				'condition' => [
					'enable_slider' => 'yes',
				],
			]
		);

		$this->add_control(
			'autoplay_interval',
			[
				'label'       => __( 'Autoplay Interval', 'themedraft-core' ),
				'type'        => Controls_Manager::SELECT,
				'show_label'  => true,
				'label_block' => false,
				'options'     => [
					'2000'  => __( '2 seconds', 'themedraft-core' ),
					'3000'  => __( '3 seconds', 'themedraft-core' ),
					'4000'  => __( '4 seconds', 'themedraft-core' ),
					'5000'  => __( '5 seconds', 'themedraft-core' ),
					'6000'  => __( '6 seconds', 'themedraft-core' ),
					'7000'  => __( '7 seconds', 'themedraft-core' ),
					'8000'  => __( '8 seconds', 'themedraft-core' ),
					'9000'  => __( '9 seconds', 'themedraft-core' ),
					'10000' => __( '10 seconds', 'themedraft-core' ),
				],
				'default'     => '4000',
				'condition' => [
					'enable_slider' => 'yes',
					'autoplay' => 'yes',
				],
			]
		);

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

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

		$this->add_control(
			'desktop_count',
			[
				'label'       => __( 'Column On Desktop', 'themedraft-core' ),
				'type'        => Controls_Manager::SELECT,
				'show_label'  => true,
				'label_block' => false,
				'options'     => [
					1 => __( '1 Column', 'themedraft-core' ),
					2 => __( '2 Column', 'themedraft-core' ),
					3 => __( '3 Column', 'themedraft-core' ),
					4 => __( '4 Column', 'themedraft-core' ),
				],
				'default'     => 3,
				'condition' => [
					'enable_slider' => 'yes',
				],
			]
		);

		$this->add_control(
			'tab_count',
			[
				'label'       => __( 'Column On Tablet', 'themedraft-core' ),
				'type'        => Controls_Manager::SELECT,
				'show_label'  => true,
				'label_block' => false,
				'options'     => [
					1 => __( '1 Column', 'themedraft-core' ),
					2 => __( '2 Column', 'themedraft-core' ),
					3 => __( '3 Column', 'themedraft-core' ),
					4 => __( '4 Column', 'themedraft-core' ),
				],
				'default'     => 2,
				'condition' => [
					'enable_slider' => 'yes',
				],
			]
		);

		$this->add_control(
			'desktop_col',
			[
				'label'   => __( 'Column On Desktop', 'themedraft-core' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'col-lg-4',
				'options' => [
					'col-lg-12' => __( '1 Column', 'themedraft-core' ),
					'col-lg-6'  => __( '2 Column', 'themedraft-core' ),
					'col-lg-4'  => __( '3 Column', 'themedraft-core' ),
					'col-lg-3'  => __( '4 Column', 'themedraft-core' ),
				],
				'condition' => [
					'enable_slider!' => 'yes',
				],
			]
		);

		$this->add_control(
			'tab_col',
			[
				'label'   => __( 'Column On Tablet', 'themedraft-core' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'col-md-6',
				'options' => [
					'col-md-12' => __( '1 Column', 'themedraft-core' ),
					'col-md-6'  => __( '2 Column', 'themedraft-core' ),
					'col-md-4'  => __( '3 Column', 'themedraft-core' ),
					'col-md-3'  => __( '4 Column', 'themedraft-core' ),
				],
				'condition' => [
					'enable_slider!' => 'yes',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'service_box_color_options',
			[
				'label' => esc_html__( 'Colors', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'icon_color',
			[
				'label'       => esc_html__('Icon Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-three-icon' => 'color: {{VALUE}};',
					'{{WRAPPER}} .td-service-three-icon svg' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'icon_bg_color',
			[
				'label'       => esc_html__('Icon Background Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-three-icon' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .td-service-three-content:before' => 'border-right-color: {{VALUE}};border-bottom-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'title_color',
			[
				'label'       => esc_html__('Title Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-three-details .td-service-three-title' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'title_hover_color',
			[
				'label'       => esc_html__('Title Hover Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-three-details .td-service-three-title:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'text_color',
			[
				'label'       => esc_html__('Text Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-three-desc' => 'color: {{VALUE}};',
				],
			]
		);

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

		$this->add_control(
			'button_bg_color_on_hover',
			[
				'label'       => esc_html__('Button Hover Background Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-three-button .td-button:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'button_text_color',
			[
				'label'       => esc_html__('Button Text Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-three-button .td-button' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'button_text_color_on_hover',
			[
				'label'       => esc_html__('Button Text Color On Hover', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-three-button .td-button:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'nav_arrow_bg',
			[
				'label'       => esc_html__('Nav Arrow Background Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .slick-arrow' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'enable_slider' => 'yes',
				],
			]
		);

		$this->add_control(
			'nav_arrow_bg_on_hover',
			[
				'label'       => esc_html__('Nav Arrow Background Color On Hover', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .slick-arrow:hover' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'enable_slider' => 'yes',
				],
			]
		);

		$this->add_control(
			'nav_dots_bg',
			[
				'label'       => esc_html__('Nav Dots Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .slick-dots button' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'enable_slider' => 'yes',
				],
			]
		);

		$this->add_control(
			'nav_dots_bg_on_hover',
			[
				'label'       => esc_html__('Nav Dots Color On Hover', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .slick-dots button:hover,{{WRAPPER}} .slick-dots .slick-active button' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'enable_slider' => 'yes',
				],
			]
		);

		$this->end_controls_section();
	}

	//Render
	protected function render() {
		$settings = $this->get_settings_for_display();
		$service_row = rand(100, 10000);
		if ($settings['enable_slider'] == 'yes'){
			$item_col = 'col-12';
			if(is_rtl()){
				$slide_dir = 'dir="ltr"';
			}else{
				$slide_dir = '';
			}
		}else{
			$item_col = $settings['desktop_col'] . ' '. $settings['tab_col'];
		}

		?>
        <div class="td-service-three-wrapper">
            <div class="container">
                <div <?php if($settings['enable_slider'] == 'yes' && is_rtl()){echo $slide_dir;} ?> id="service-row-<?php echo $service_row;?>" class="row">
					<?php if ( $settings['services'] ) {
						foreach ( $settings['services'] as $service ) {
							$target   = $service['details_url']['is_external'] ? ' target="_blank"' : '';
							$nofollow = $service['details_url']['nofollow'] ? ' rel="nofollow"' : '';

							if($service['entrance_animation']){
								$td_animation = 'wow'.' ' . $service['entrance_animation'];
								$td_animation_duration = $service['s3_animation_duration'];
							}else{
								$td_animation ='';
								$td_animation_duration ='';
							}
							?>
                            <div class="<?php echo $item_col;?> td-single-service-three">
                                <div class="td-service-three-item <?php echo $td_animation;?>" <?php echo $td_animation_duration;?>>

                                    <div class="td-service-three-image td-cover-bg"
                                         style="background-image: url(<?php echo esc_url($service['thumbnail']['url']);?>)">
                                        <div class="td-service-three-icon">
											<?php if ( $service['type'] === 'image' ) :
												if ( $service['image']['url'] || $service['image']['id'] ) :
													?>
                                                    <div class="td-image-icon">
                                                        <img src="<?php echo $service['image']['url']; ?>"
                                                             alt="<?php echo get_post_meta( $service['image']['id'], '_wp_attachment_image_alt', true ); ?>">
                                                    </div>
												<?php endif;
                                            elseif ( ! empty( $service['icon'] ) || ! empty( $service['selected_icon'] ) ) : ?>
                                                <div class="td-font-icon">
													<?php themedraft_custom_icon_render( $service, 'icon', 'selected_icon' ); ?>
                                                </div>
											<?php endif; ?>
                                        </div>
                                    </div>

                                    <div class="td-service-three-content">
                                        <a href="<?php echo $service['details_url']['url'];?>" class="td-service-three-details" <?php echo $target . $nofollow?>>
                                            <h4 class="td-service-three-title"><?php echo $service['title'];?></h4>
                                        </a>
                                        <div class="td-service-three-desc">
											<?php echo $service['desc_text'];?>
                                        </div>

                                        <div class="td-service-three-button">
                                            <a href="<?php echo $service['details_url']['url'];?>" class="td-button" <?php echo $target . $nofollow?>>
                                                <?php if(is_rtl()) : ?>
                                                    <i class="fas fa-arrow-left"></i>
	                                            <?php endif;?>

                                                <?php echo $service['btn_text'];?>

	                                            <?php if(!is_rtl()) : ?>
                                                    <i class="fas fa-arrow-right"></i>
	                                            <?php endif;?>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
							<?php
						}
					} ?>
                </div>
            </div>

			<?php if ($settings['enable_slider'] == 'yes') : ?>
                <script>
                    (function ($) {
                        "use strict";
                        $(document).ready(function () {
                            $("#service-row-<?php echo $service_row?>").slick({
                                slidesToShow: <?php echo json_encode( $settings['desktop_count'] )?>,
                                autoplay: <?php echo json_encode( $settings['autoplay'] == 'yes' ? true : false ); ?>,
                                autoplaySpeed: <?php echo json_encode( $settings['autoplay_interval'] )?>, //interval
                                speed: 1500, // slide speed
                                dots: <?php echo json_encode( $settings['dots'] == 'yes' ? true : false ); ?>,
                                arrows: <?php echo json_encode( $settings['nav_arrow'] == 'yes' ? true : false ); ?>,
                                prevArrow: '<i class="slick-arrow slick-prev fas fa-arrow-left"></i>',
                                nextArrow: '<i class="slick-arrow slick-next fas fa-arrow-right"></i>',
                                infinite:  true,
                                pauseOnHover: false,
                                centerMode: false,
                                responsive: [

                                    {
                                        breakpoint: 992,
                                        settings: {
                                            slidesToShow: <?php echo json_encode( $settings['tab_count'] )?>, //768-991
                                        }
                                    },
                                    {
                                        breakpoint: 768,
                                        settings: {
                                            slidesToShow: 1, // 0 -767
                                        }
                                    }
                                ]
                            });
                        });
                    })(jQuery);
                </script>
			<?php endif;?>
        </div>
		<?php
	}
}

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