<?php
namespace Elementor;

class ThemeDraft_Service_Box_Four_Widget extends Widget_Base {

	public function get_name() {

		return 'themedraft_service_box_four';
	}

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

	public function get_icon() {

		return 'flaticon-business-suitcase';
	}

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


	protected function register_controls() {

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

		$repeater = new Repeater();

		$repeater->add_control(
		    'front_image',
		    [
		        'label'       => esc_html__( 'Front Image', 'themedraft-core' ),
		        'description'       => esc_html__( 'Use 370x420 image for better user experience.', 'themedraft-core' ),
		        'type'        => Controls_Manager::MEDIA,
		        'label_block' => true,
		        'default'     => [
		            'url' => Utils::get_placeholder_image_src(),
		        ],
		    ]
		);

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

		$repeater->add_control(
			'selected_icon',
			[
				'label'       => esc_html__( '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'     => esc_html__( 'Image', 'themedraft-core' ),
				'type'      => Controls_Manager::MEDIA,
				'default'   => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'type' => 'image'
				],
				'dynamic'   => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'subtitle',
			[
				'label'       => esc_html__( 'Subtitle', 'themedraft-core' ),
				'type'        => Controls_Manager::TEXTAREA,
				'rows'        => 5,
				'default'     => esc_html( 'Industrial'),
				'label_block' => true,
			]
		);

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

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

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

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

		$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(
			'services',
			[
				'label'       => esc_html__('Service List', 'themedraft-core'),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [
					[
						'subtitle'        => esc_html('Industrial'),
						'title'        => esc_html('Industrial Construction'),
						'selected_icon' => 'flaticon-industry-industry-7',
						'btn_text' => esc_html('View Details'),
					],
				],
				'title_field' => '{{{ title }}}',
			]
		);

		$this->end_controls_section();

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

		$this->add_control(
		    'box_bg_color',
		    [
		        'label'       => esc_html__('Background Color', 'themedraft-core'),
		        'type'        => Controls_Manager::COLOR,
		        'selectors'   => [
		            '{{WRAPPER}} .flip-card-back' => 'background-color: {{VALUE}};',
		        ],
		    ]
		);

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

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

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

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

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

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

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

		$this->end_controls_section();

	}

	//Render
	protected function render() {
		$settings = $this->get_settings_for_display();
		?>
		<div class="td-service-box-two-wrapper td-service-box-4">
			<div class="container">
				<div class="row">
				<?php if ( $settings['services'] ) {
					foreach ( $settings['services'] as $service ) {
					    $img_src = $service['front_image']['url'];
					    $img_alt = get_post_meta( $service['front_image']['id'], '_wp_attachment_image_alt', true );;
					    $img_title = get_the_title($service['front_image']['id']);
					    $subtitle = $service['subtitle'];

						if ($service['entrance_animation']) {
							$td_animation          = 'wow' . ' ' . $service['entrance_animation'];
							$td_animation_duration = $service['service_animation_duration'];
						} else {
							$td_animation          = '';
							$td_animation_duration = '';
						}

						$details_url   = $service['details_url']['url'];
						$target   = $service['details_url']['is_external'] ? ' target="_blank"' : '';
						$nofollow = $service['details_url']['nofollow'] ? ' rel="nofollow"' : '';
						?>
						<div class="col-lg-4 col-md-6">
							<div class="td-single-service-box-four <?php echo $td_animation;?>" <?php echo $td_animation_duration;?>>
                                <div class="flip-card">
                                    <div class="flip-card-inner">
                                        <div class="flip-card-front td-cover-bg" style="background-image: url(<?php echo esc_url($img_src); ?>)">
                                        </div>


                                        <div class="flip-card-back">
                                            <div class="td-table">
                                                <div class="td-table-cell">
                                                    <div class="td-service-four-icon">
		                                                <?php if ( $service['type'] === 'image' ) :
			                                                if ( $service['image']['url'] || $service['image']['id'] ) :
				                                                ?>
                                                                <div class="td-icon-wrapper 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-icon-wrapper td-font-icon">
				                                                <?php themedraft_custom_icon_render( $service, 'icon', 'selected_icon'); ?>
                                                            </div>
		                                                <?php endif; ?>
                                                    </div>

                                                    <p class="td-service-four-subtitle"><?php echo $subtitle;?></p>
                                                    <h4 class="td-service-four-title"><?php echo $service['title'];?></h4>
                                                    <a href="<?php echo esc_url($details_url);?>" class="td-button" <?php echo $target . $nofollow?>><?php echo $service['btn_text'];?> <i class="fas fa-arrow-right"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
							</div>
						</div>
					<?php
					}
				}?>

				</div>
			</div>
		</div>
		<?php

	}
}

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