<?php
namespace Elementor;


class ThemeDraft_Service_Box_Widget extends Widget_Base {

	public function get_name() {

		return 'themedraft_service_box_one_widget';
	}

	public function get_title() {
		return esc_html__( 'Service One', '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_settings',
			[
				'label' => esc_html__( 'Service Boxes', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$repeater = new Repeater();

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

		$repeater->add_control(
			'subtitle',
			[
				'label'       => __('Subtitle', 'themedraft-core'),
				'type'        => Controls_Manager::TEXT,
				'default'     => __('Unique Technology', 'themedraft-core'),
				'label_block' => true,
			]
		);


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

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

		$repeater->add_control(
			'button_link',
			[
				'label'         => __( 'Button Link', '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(
			'entrance_animation',
			[
				'label' => __( 'Entrance Animation', 'themedraft-core' ),
				'type' => Controls_Manager::ANIMATION,
				'prefix_class' => 'animated ',
			]
		);

		$repeater->add_control(
			'service_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(
			'service_boxes',
			[
				'label'       => __('Service List', 'themedraft-core'),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [
					[
						'subtitle'        => __('Unique Technology', 'themedraft-core'),
						'title' => __('Industrial Construction', 'themedraft-core'),
						'button_text' => __('View Details', 'themedraft-core'),
					],
				],
				'title_field' => '{{{ title }}}',
			]
		);



		$this->end_controls_section();


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

		$this->add_control(
			'enable_slider',
			[
				'label'   => __( 'Enable Slider', 'themedraft-core' ),
				'type'    => Controls_Manager::SWITCHER,
				'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',
				'conditions'  => [
					'terms' => [
						[
							'name'     => 'enable_slider',
							'operator' => '==',
							'value'    => 'yes',
						],
						[
							'name'     => 'autoplay',
							'operator' => '==',
							'value'    => 'yes',
						]

					],
				],
			]
		);

		$this->add_control(
			'infinity_loop',
			[
				'label'       => __( 'Loop', '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'     => 'yes',
				'condition'   => [
					'enable_slider' => '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->end_controls_section();

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

		$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(
			'columns_desktop',
			[
				'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(
			'columns_tab',
			[
				'label'   => __( 'Column On Tablet', 'themedraft-core' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'col-sm-6',
				'options' => [
					'col-sm-12' => __( '1 Column', 'themedraft-core' ),
					'col-sm-6'  => __( '2 Column', 'themedraft-core' ),
					'col-sm-4'  => __( '3 Column', 'themedraft-core' ),
					'col-sm-3'  => __( '4 Column', 'themedraft-core' ),
				],
				'condition'   => [
					'enable_slider!' => 'yes',
				],
			]
		);

		$this->end_controls_section();

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

		$this->add_control(
			'box_background_color',
			[
				'label'       => esc_html__('Box Background Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-box-one-content' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'shape_color',
			[
				'label'       => esc_html__('Shape Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-box-one-content .top-shape' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'shape_hover_color',
			[
				'label'       => esc_html__('Shape Color On Hover', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-box-one-content:hover .top-shape' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .td-service-box-one-content:hover:before' => 'border-right-color: {{VALUE}};border-bottom-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'image_border_color',
			[
				'label'       => esc_html__('Image Border Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-box-image' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'subtitle_color',
			[
				'label'       => esc_html__('Subtitle Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-box-subtitle' => 'color: {{VALUE}};',
				],
			]
		);

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

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

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

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

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

		$this->add_control(
			'dot_color',
			[
				'label'       => esc_html__('Nav Dot Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-slider-active .slick-dots button' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'dot_hover_color',
			[
				'label'       => esc_html__('Nav Dot Hover Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-service-slider-active .slick-dots button:hover,{{WRAPPER}} .td-service-slider-active .slick-dots .slick-active button' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();

	}

	//Render
	protected function render() {
		$settings = $this->get_settings_for_display();

		if($settings['columns_desktop']){
			$td_column = $settings['columns_desktop'] . ' '. $settings['columns_tab'];
		}else{
			$td_column = 'col-lg-6';
		}

		if(is_rtl()){
			$slide_dir = 'dir="ltr"';
		}else{
			$slide_dir = '';
		}

		?>
        <div class="td-service-box-one-wrapper">
            <div class="container">
                <div <?php echo $slide_dir;?> class="row td-service-items <?php if($settings['enable_slider'] == 'yes'){echo 'td-service-slider-active';}?>">
					<?php
					if ( $settings['service_boxes'] ) {

						foreach ( $settings['service_boxes'] as $box ) {
							if($box['entrance_animation']){
								$td_animation = 'wow'.' ' . $box['entrance_animation'];
								$td_animation_duration = $box['service_animation_duration'];
							}else{
								$td_animation ='';
								$td_animation_duration ='';
							}

							$target   = $box['button_link']['is_external'] ? ' target="_blank"' : '';
							$nofollow = $box['button_link']['nofollow'] ? ' rel="nofollow"' : '';
							?>
                            <div class="td-single-service-box-one <?php echo $td_column;?>">
                                <div class="td-service-box-one-content <?php echo $td_animation;?>" <?php echo $td_animation_duration;?>>
                                    <div class="top-shape td-transition"></div>
                                    <div class="td-service-box-image" style="background-image: url(<?php echo esc_url($box['image']['url'])?>)"></div>
                                    <p class="td-service-box-subtitle"><?php echo $box['subtitle'];?></p>
                                    <h3 class="td-service-box-title"><?php echo $box['title'];?></h3>

                                    <a href="<?php echo $box['button_link']['url'];?>" class="td-service-one-button" <?php echo $target . $nofollow?>>
										<?php echo $box['button_text']; ?>
                                    </a>
                                </div>
                            </div>
							<?php
						}
					}
					?>
                </div>
            </div>
        </div>

		<?php if($settings['enable_slider'] == 'yes') : ?>
            <script>
                (function ($) {
                    "use strict";
                    $(document).ready(function () {
                        $(".td-service-slider-active").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: <?php echo json_encode( $settings['infinity_loop'] == 'yes' ? true : false ); ?>,
                            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; ?>

		<?php

	}
}

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