<?php

namespace Elementor;

class ThemeDraft_Section_Title_Widget extends Widget_Base {

	public function get_name() {

		return 'themedraft_section_title';
	}

	public function get_title() {
		return esc_html__( 'Section Title', 'themedraft-core' );
	}

	public function get_icon() {

		return 'eicon-t-letter';
	}

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


	protected function register_controls() {

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

		$this->add_control(
			'subtitle',
			[
				'label'       => esc_html__( 'Subtitle', 'themedraft-core' ),
				'type'        => Controls_Manager::TEXT,
				'label_block' => true,
				'default'     => esc_html__( 'ABOUT US', 'themedraft-core' ),
				'placeholder' => esc_html__( 'Type subtitle here', 'themedraft-core' ),
			]
		);

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

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

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

		$this->add_control(
		    'title',
		    [
		        'label'       => __( 'Title', 'themedraft-core' ),
		        'type'        => Controls_Manager::WYSIWYG,
		        'default'     => __( '<h2>We Have 35+ Years Of Experience Work With Global Industries.</h2>', 'themedraft-core' ),
		        'description' => __( 'Type section main title here.', 'themedraft-core' ),
		        'label_block' => true,
		    ]
		);

		$this->add_control(
			'desc',
			[
				'label'       => esc_html__( 'Description', 'themedraft-core' ),
				'type'        => Controls_Manager::WYSIWYG,
				'default'     => esc_html__( 'Type description text here.', 'themedraft-core' ),
				'placeholder' => esc_html__( 'Type description text here.', 'themedraft-core' ),
			]
		);

		$this->end_controls_section();


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

		$this->add_responsive_control(
			'wrapper_width',
			[
				'label'           => __( 'Width ( % )', 'themedraft-core' ),
				'type'            => Controls_Manager::SLIDER,
				'size_units'      => [ '%' ],
				'range'           => [
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'devices'         => [ 'desktop', 'tablet', 'mobile' ],

				'selectors'       => [
					'{{WRAPPER}} .td-section-title-content' => 'width: {{SIZE}}%;',
				],
			]
		);

		$this->add_responsive_control(
			'text_align',
			[
				'label'       => esc_html__( 'Text Align', 'themedraft-core' ),
				'description' => esc_html__( '', 'themedraft-core' ),
				'type'        => Controls_Manager::CHOOSE,
				'label_block' => false,

				'options' => [
					'left' => [
						'title' => __( 'Left', 'themedraft-core' ),
						'icon'  => 'fa fa-align-left',
					],

					'center' => [
						'title' => __( 'Center', 'themedraft-core' ),
						'icon'  => 'fa fa-align-center',
					],

					'right' => [
						'title' => __( 'Right', 'themedraft-core' ),
						'icon'  => 'fa fa-align-right',
					],
				],
				'devices' => [ 'desktop', 'tablet', 'mobile' ],

				'selectors' => [
					'{{WRAPPER}} .td-section-title-wrap' => 'text-align: {{VALUE}};',
				],

			]
		);

		$this->add_responsive_control(
			'wrapper_margin',
			[
				'label'      => esc_html__( 'Wrapper Margin', 'themedraft-core' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .td-section-title-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

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

		$this->add_control(
			'section_title_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->end_controls_section();





















		$this->start_controls_section(
			'subtitle_style',
			[
				'label'     => esc_html__( 'Subtitle', 'themedraft-core' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'subtitle!' => '',
				],
			]
		);

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

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

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

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

		$this->add_responsive_control(
		    'icon_size',
		    [
		        'label' => __( 'Icon Size', 'themedraft-core' ),
		        'type' => Controls_Manager::SLIDER,
		        'size_units' => ['px'],
		        'range' => [
		            'px' => [
		                'min' => 0,
		                'max' => 200,
		            ],
		        ],
		        'devices' => [ 'desktop', 'tablet', 'mobile' ],

		        'selectors' => [
		            '{{WRAPPER}} .td-subtitle-icon' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};font-size: {{SIZE}}{{UNIT}};',
		        ],
		    ]
		);

		$this->add_control(
		    'position_toggle',
		    [
		        'label'        => __( 'Icon Position', 'themedraft-core' ),
		        'type'         => Controls_Manager::POPOVER_TOGGLE,
		        'label_off'    => __( 'None', 'themedraft-core' ),
		        'label_on'     => __( 'Custom', 'themedraft-core' ),
		        'return_value' => 'yes',
		    ]
		);

		$this->start_popover();

		$this->add_responsive_control(
		    'vertical_position',
		    [
		        'label'      => __( 'Vertical', 'themedraft-core' ),
		        'type'       => Controls_Manager::SLIDER,
		        'size_units' => [ 'px' ],
		        'range'      => [
		            'px' => [
		                'min' => - 500,
		                'max' => 500,
		            ],
		        ],
		        'selectors'  => [
		            '{{WRAPPER}} .td-subtitle-icon' => 'top: {{SIZE}}{{UNIT}};',
		        ],
		        'condition'  => [
		            'position_toggle' => 'yes',
		        ]
		    ]
		);

		$this->add_responsive_control(
		    'horizontal_position',
		    [
		        'label'      => __( 'Horizontal', 'themedraft-core' ),
		        'type'       => Controls_Manager::SLIDER,
		        'size_units' => [ 'px' ],
		        'range'      => [
		            'px' => [
		                'min' => - 500,
		                'max' => 500,
		            ],
		        ],
		        'selectors'  => [
		            '{{WRAPPER}} .td-subtitle-icon' => 'left: {{SIZE}}{{UNIT}};',
		        ],
		        'condition'  => [
		            'position_toggle' => 'yes',
		        ]
		    ]
		);
		$this->end_popover();

		$this->end_controls_section();

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

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'title_typography',
				'label'    => __( 'Typography', 'themedraft-core' ),
				'selector' => '{{WRAPPER}} .td-section-title-wrap .td-section-title h1,{{WRAPPER}} .td-section-title-wrap .td-section-title h2,{{WRAPPER}} .td-section-title-wrap .td-section-title h3,{{WRAPPER}} .td-section-title-wrap .td-section-title h4,{{WRAPPER}} .td-section-title-wrap .td-section-title h5,{{WRAPPER}} .td-section-title-wrap .td-section-title h6',
			]
		);

		$this->add_control(
			'title_color',
			[
				'label'     => esc_html__( 'Color', 'themedraft-core' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .td-section-title-wrap .td-section-title h1,{{WRAPPER}} .td-section-title-wrap .td-section-title h2,{{WRAPPER}} .td-section-title-wrap .td-section-title h3,{{WRAPPER}} .td-section-title-wrap .td-section-title h4,{{WRAPPER}} .td-section-title-wrap .td-section-title h5,{{WRAPPER}} .td-section-title-wrap .td-section-title h6' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'title_margin',
			[
				'label'      => esc_html__( 'Margin', 'themedraft-core' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .td-section-title-wrap .td-section-title h1,{{WRAPPER}} .td-section-title-wrap .td-section-title h2,{{WRAPPER}} .td-section-title-wrap .td-section-title h3,{{WRAPPER}} .td-section-title-wrap .td-section-title h4,{{WRAPPER}} .td-section-title-wrap .td-section-title h5,{{WRAPPER}} .td-section-title-wrap .td-section-title h6' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'description_style',
			[
				'label'     => esc_html__( 'Description', 'themedraft-core' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'desc!' => '',
				],
			]
		);

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

		$this->add_control(
			'description_color',
			[
				'label'     => esc_html__( 'Color', 'themedraft-core' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .td-section-title-wrap .td-section-description,{{WRAPPER}} .td-section-title-wrap .td-section-description strong' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'bold_text_color',
			[
				'label'       => esc_html__('Bold Text Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-section-title-wrap .td-section-description strong' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'description_margin',
			[
				'label'      => esc_html__( 'Margin', 'themedraft-core' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .td-section-title-wrap .td-section-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

	}

	//Render
	protected function render() {
		$settings = $this->get_settings_for_display();
		if($settings['entrance_animation']){
			$td_animation = 'wow'.' ' . $settings['entrance_animation'];
			$td_animation_duration = $settings['section_title_animation_duration'];
		}else{
			$td_animation ='';
			$td_animation_duration ='';
		}
		?>

        <div class="row">
            <div class="col-lg-12">
                <div class="td-section-title-wrap <?php echo $td_animation;?>" <?php echo $td_animation_duration;?>>
                    <div class="td-section-title-content">
                        <?php if($settings['subtitle']) : ?>
                        <div class="td-section-subtitle-wrapper">
                            <h6 class="td-section-subtitle"><?php echo $settings['subtitle'];?></h6>
                            <div class="td-subtitle-icon">
                                <?php if ( $settings['type'] === 'image' ) :
                                    if ( $settings['image']['url'] || $settings['image']['id'] ) :
                                        ?>
                                        <div class="td-image-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-font-icon">
                                        <?php themedraft_custom_icon_render( $settings, 'icon', 'selected_icon' ); ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?php endif; ?>



                        <div class="td-section-title">
                            <?php echo $settings['title'];?>
                        </div>

                        <?php if($settings['desc']) : ?>

                        <div class="td-section-description">
	                        <?php echo $settings['desc'];?>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

		<?php

	}
}

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