<?php
namespace Elementor;

class ThemeDraft_Promo_Box_Widget extends Widget_Base {

	public function get_name() {

		return 'themedraft_promo_box';
	}

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

	public function get_icon() {

		return 'flaticon-business-giftbox';
	}

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


	protected function register_controls() {

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

		$repeater = new Repeater();

		$repeater->add_control(
			'title',
			[
				'label'       => __('Title', 'themedraft-core'),
				'type'        => Controls_Manager::TEXT,
				'default'     => __('Great Support', 'themedraft-core'),
				'label_block' => true,
			]
		);

		$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'     => __( 'Icon', 'themedraft-core' ),
				'type'             => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'label_block'      => true,
				'default'          => [
					'value'   => 'flaticon-industry-support',
					'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(
			'entrance_animation',
			[
				'label' => __( 'Entrance Animation', 'themedraft-core' ),
				'type' => Controls_Manager::ANIMATION,
				'prefix_class' => 'animated ',
			]
		);

		$repeater->add_control(
			'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(
			'promo_boxes',
			[
				'label'       => __( 'Promo Box List', 'themedraft-core' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [
					[
						'title'         => __( 'Great Support', 'themedraft-core' ),
						'selected_icon' => 'flaticon-industry-support',
					],
				],
				'title_field' => '{{{ title }}}',
			]
		);

		$this->end_controls_section();

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

		$this->add_control(
			'xl_column',
			[
				'label'   => __( 'Desktop', 'themedraft-core' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'td-col-xl-5',
				'options' => [
					'col-xl-12'   => __( '1 Column', 'themedraft-core' ),
					'col-xl-6'    => __( '2 Column', 'themedraft-core' ),
					'col-xl-4'    => __( '3 Column', 'themedraft-core' ),
					'col-xl-3'    => __( '4 Column', 'themedraft-core' ),
					'td-col-xl-5' => __( '5 Column', 'themedraft-core' ),
				],
			]
		);

		$this->add_control(
			'lg_column',
			[
				'label'   => __( 'iPad Pro', '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' ),
					'td-col-lg-5' => __( '5 Column', 'themedraft-core' ),
				],
			]
		);

		$this->add_control(
			'md_column',
			[
				'label'   => __( 'iPad', 'themedraft-core' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'col-md-4',
				'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' ),
				],
			]
		);

		$this->add_control(
			'sm_column',
			[
				'label'   => __( 'Mobile', 'themedraft-core' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'col-12',
				'options' => [
					'col-12'   => __( '1 Column', 'themedraft-core' ),
					'col-6'    => __( '2 Column', 'themedraft-core' ),
					'col-4'    => __( '3 Column', 'themedraft-core' ),
				],
			]
		);

		$this->end_controls_section();

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

		$this->add_responsive_control(
			'icon_size',
			[
				'label' => __( 'Icon Size', 'themedraft-core' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 30,
						'max' => 250,
					],
				],
				'devices' => [ 'desktop', 'tablet', 'mobile' ],
				'selectors' => [
					'{{WRAPPER}} .td-icon-wrapper i' => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .td-icon-wrapper svg' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .td-icon-wrapper.td-image-icon' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'icon_margin',
			[
				'label'      => esc_html__( 'Icon Margin', 'themedraft-core' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .td-icon-wrapper.td-promo-icon-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

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

		$this->add_control(
			'icon_color_on_hover',
			[
				'label'       => esc_html__('Icon Color On Hover', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-single-promo-box:hover i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .td-single-promo-box:hover svg' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();

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

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'title_typo',
				'label' => __( 'Typography', 'themedraft-core' ),
				'selector' => '{{WRAPPER}} .td-promo-title',
			]
		);

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

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

		$this->end_controls_section();

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

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

		$this->add_control(
			'box_background_color_on_hover',
			[
				'label'       => esc_html__('Background Color On Hover', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-single-promo-box:before' => 'background-color: {{VALUE}};',
				],
			]
		);

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

		$this->add_control(
			'top_shape_color',
			[
				'label'       => esc_html__('Hover Top Shape Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-single-promo-box:hover:after' => 'border-left-color: {{VALUE}};border-top-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();
	}

	//Render
	protected function render() {
		$settings = $this->get_settings_for_display();
		$td_column = $settings['xl_column'] .' '. $settings['lg_column']. ' '. $settings['md_column']. ' '. $settings['sm_column'];
		?>

        <div class="td-promo-box-wrapper">
            <div class="container">
                <div class="row td-no-gutters-xl">
					<?php
					if ( $settings['promo_boxes'] ) {
						foreach ( $settings['promo_boxes'] as $promo_box ) {
							if($promo_box['entrance_animation']){
								$td_animation = 'wow'.' ' . $promo_box['entrance_animation'];
								$td_animation_duration = $promo_box['animation_duration'];
							}else{
								$td_animation ='';
								$td_animation_duration ='';
							}
							?>
                            <div class="td-promo-box-column <?php echo $td_column;?> <?php echo $td_animation;?>" <?php echo $td_animation_duration;?>>
                                <div class="td-single-promo-box td-transition">
									<?php if ( $promo_box['type'] === 'image' ) :
										if ( $promo_box['image']['url'] || $promo_box['image']['id'] ) :
											?>
                                            <div class="td-icon-wrapper td-promo-icon-wrapper td-image-icon">
                                                <img src="<?php echo $promo_box['image']['url']; ?>"
                                                     alt="<?php echo get_post_meta( $promo_box['image']['id'], '_wp_attachment_image_alt', true ); ?>">
                                            </div>
										<?php endif;
                                    elseif ( ! empty( $promo_box['icon'] ) || ! empty( $promo_box['selected_icon'] ) ) : ?>
                                        <div class="td-icon-wrapper td-promo-icon-wrapper td-font-icon">
											<?php themedraft_custom_icon_render( $promo_box, 'icon', 'selected_icon' ); ?>
                                        </div>
									<?php endif; ?>

                                    <h6 class="td-promo-title"><?php echo $promo_box['title']?></h6>
                                </div>
                            </div>
						<?php }
					}
					?>
                </div>
            </div>
        </div>

		<?php
	}
}

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