<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; }
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Image_Size;
use Elementor\Icons_Manager;
use Sifency\Traits\Sifency_Addons_Animation_Controls;
use Sifency\Traits\Sifency_Addons_Animation_Manager;
use Sifency\Traits\Sifency_Addons_Item_Style_Controls;
use Sifency\Traits\Sifency_Addons_Button_Style_Controls;
use Sifency\Traits\Sifency_Addons_Master_Typography;
use Sifency\Traits\Sifency_Addons_Section_Header;
use Sifency\Traits\Sifency_Addons_Help_Controls;
use Sifency\Classes\Sifency_Addons_Widget_Base;
class Sifency_Addons_Widget_Hotspot extends Sifency_Addons_Widget_Base {
	use Sifency_Addons_Animation_Controls;
	use Sifency_Addons_Item_Style_Controls;
	use Sifency_Addons_Button_Style_Controls;
	use Sifency_Addons_Master_Typography;
	use Sifency_Addons_Section_Header;
	use Sifency_Addons_Help_Controls;

	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-image-hotspot',
			'title'          => 'Sifency Hotspot Image',
			'icon'           => 'eicon-image-hotspot',
			'category'       => 'sifency-business-widgets',
			'keywords'       => array( 'image', 'hotspot', 'tooltip', 'interactive' ),
			'script_depends' => array( 'sifency-hotspot-script' ),
			'style_depends'  => array( 'sifency-hotspot-style', 'sifency-icon' ),
		);}
	protected function register_controls() {
		$this->add_sifency_addons_section_header_controls();
		$this->start_controls_section(
			'section_main_image',
			array( 'label' => esc_html__( 'Image & Settings', 'sifency-addons' ) )
		);
		$this->add_control(
			'layout_type',
			array(
				'label'   => esc_html__( 'Hotspot Style', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'pulse',
				'options' => array(
					'pulse'   => esc_html__( '1. Minimal Pulse', 'sifency-addons' ),
					'plus'    => esc_html__( '2. Rotating Plus', 'sifency-addons' ),
					'label'   => esc_html__( '3. Icon with Label', 'sifency-addons' ),
					'glass'   => esc_html__( '4. Glassmorphism Tooltip', 'sifency-addons' ),
					'product' => esc_html__( '5. Product Card', 'sifency-addons' ),
				),
			)
		);
		$this->add_control(
			'image',
			array(
				'label'   => esc_html__( 'Main Image', 'sifency-addons' ),
				'type'    => Controls_Manager::MEDIA,
				'default' => array( 'url' => \Elementor\Utils::get_placeholder_image_src() ),
			)
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			array(
				'name'    => 'image',
				'default' => 'full',
			)
		);

		$this->add_control(
			'trigger',
			array(
				'label'   => esc_html__( 'Trigger Event', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'hover',
				'options' => array(
					'hover' => 'Hover',
					'click' => 'Click',
				),
			)
		);
		$this->add_control(
			'tooltip_animation',
			array(
				'label'   => esc_html__( 'Tooltip Animation', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'fade-up',
				'options' => array(
					'fade'    => 'Fade',
					'fade-up' => 'Fade Up',
					'scale'   => 'Scale/Zoom',
					'flip'    => 'Flip In',
				),
			)
		);
		$this->end_controls_section();
		$this->start_controls_section(
			'section_hotspots',
			array( 'label' => esc_html__( 'Hotspots', 'sifency-addons' ) )
		);
		$repeater = new Repeater();

		$repeater->start_controls_tabs( 'hotspot_tabs' );

		// Tab: Position
		$repeater->start_controls_tab( 'tab_pos', array( 'label' => 'Position' ) );

		$repeater->add_control(
			'pos_x',
			array(
				'label'   => 'Horizontal Position (%)',
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'%' => array(
						'min' => 0,
						'max' => 100,
					),
				),
				'default' => array(
					'unit' => '%',
					'size' => 50,
				),
			)
		);
		$repeater->add_control(
			'pos_y',
			array(
				'label'   => 'Vertical Position (%)',
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'%' => array(
						'min' => 0,
						'max' => 100,
					),
				),
				'default' => array(
					'unit' => '%',
					'size' => 50,
				),
			)
		);
		$repeater->add_control(
			'tooltip_dir',
			array(
				'label'   => esc_html__( 'Tooltip Direction', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'top',
				'options' => array(
					'top'    => 'Top',
					'bottom' => 'Bottom',
					'left'   => 'Left',
					'right'  => 'Right',
				),
			)
		);
		$repeater->end_controls_tab();
		$repeater->start_controls_tab( 'tab_content', array( 'label' => 'Content' ) );

		$repeater->add_control(
			'spot_icon',
			array(
				'label'   => 'Pin Icon',
				'type'    => Controls_Manager::ICONS,
				'default' => array(
					'value'   => 'icon-plus',
					'library' => 'sifency-icons',
				),
			)
		);
		$repeater->add_control(
			'spot_label',
			array(
				'label'   => 'Pin Label (Style 3)',
				'type'    => Controls_Manager::TEXT,
				'default' => 'New',
			)
		);

		$repeater->add_control(
			'tooltip_title',
			array(
				'label'   => 'Tooltip Title',
				'type'    => Controls_Manager::TEXT,
				'default' => 'Hotspot Title',
			)
		);
		$repeater->add_control(
			'tooltip_desc',
			array(
				'label'   => 'Description',
				'type'    => Controls_Manager::TEXTAREA,
				'default' => 'Description goes here.',
			)
		);
		$repeater->add_control(
			'tooltip_price',
			array(
				'label'   => 'Price (Style 5)',
				'type'    => Controls_Manager::TEXT,
				'default' => '$99.00',
			)
		);
		$repeater->add_control(
			'tooltip_image',
			array(
				'label' => 'Image (Style 5)',
				'type'  => Controls_Manager::MEDIA,
			)
		);
		$repeater->add_control(
			'tooltip_btn_text',
			array(
				'label'   => 'Button Text',
				'type'    => Controls_Manager::TEXT,
				'default' => 'Buy Now',
			)
		);
		$repeater->add_control(
			'tooltip_link',
			array(
				'label' => 'Link',
				'type'  => Controls_Manager::URL,
			)
		);

		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();

		$this->add_control(
			'spots',
			array(
				'label'   => esc_html__( 'Spots', 'sifency-addons' ),
				'type'    => Controls_Manager::REPEATER,
				'fields'  => $repeater->get_controls(),
				'default' => array(
					array(
						'pos_x' => array( 'size' => 30 ),
						'pos_y' => array( 'size' => 40 ),
					),
					array(
						'pos_x' => array( 'size' => 70 ),
						'pos_y' => array( 'size' => 60 ),
					),
				),
			)
		);

		$this->end_controls_section();
		$this->add_sifency_addons_help_controls();
		$this->start_controls_section(
			'style_pin',
			array(
				'label' => 'Pin Style',
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'pin_color',
			array(
				'label'     => 'Icon Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-hs-pin' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'pin_bg',
			array(
				'label'     => 'Background',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-hs-pin' => 'background-color: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'pin_size',
			array(
				'label'     => 'Size',
				'type'      => Controls_Manager::SLIDER,
				'selectors' => array( '{{WRAPPER}} .sifency-hs-pin' => 'width: {{SIZE}}px; height: {{SIZE}}px;' ),
			)
		);
		$this->add_control(
			'pulse_color',
			array(
				'label'     => 'Pulse Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-hs-pin:before, {{WRAPPER}} .sifency-hs-pin:after' => 'border-color: {{VALUE}}; background-color: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'container_height',
			array(
				'label'       => esc_html__( 'Container Height', 'sifency-addons' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => array( 'px', 'vh', 'em' ),
				'range'       => array(
					'px' => array(
						'min' => 200,
						'max' => 1000,
					),
					'vh' => array(
						'min' => 10,
						'max' => 100,
					),
				),
				'selectors'   => array(
					'{{WRAPPER}} .sifency-hs-container img' => 'height: {{SIZE}}{{UNIT}};',
				),
				'description' => 'Setting a height will make the image act as a cover background.',
			)
		);
		$this->add_responsive_control(
			'container_width',
			array(
				'label'       => esc_html__( 'Container Width', 'sifency-addons' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => array( 'px', 'vh', 'em' ),
				'range'       => array(
					'px' => array(
						'min' => 200,
						'max' => 1000,
					),
					'vh' => array(
						'min' => 10,
						'max' => 100,
					),
				),
				'selectors'   => array(
					'{{WRAPPER}} .sifency-hs-container img' => 'width: {{SIZE}}{{UNIT}};',
				),
				'description' => 'Setting a width will make the image act as a cover background.',
			)
		);
		$this->end_controls_section();
		$this->add_sifency_addons_item_style_controls(
			array(
				'prefix'   => 'wrapper_style',
				'label'    => 'Tooltip Style',
				'selector' => '.sifency-hs-tooltip',
			)
		);
		$this->add_sifency_addons_master_typography_controls(
			array(
				'prefix'   => 'heading_style',
				'label'    => 'Title',
				'selector' => '.sifency-heading-style',
			)
		);
		$this->add_sifency_addons_master_typography_controls(
			array(
				'prefix'     => 'content_style',
				'label'      => 'Description',
				'selector'   => '.sifency-content-style',
				'color_only' => true,
				'exclude'    => array( 'shadow', 'tabs', 'bg', 'radius', 'transition' ),
			)
		);
		$this->add_sifency_addons_master_typography_controls(
			array(
				'prefix'     => 'number_style',
				'label'      => 'Price',
				'selector'   => '.sifency-number-style',
				'color_only' => true,
				'exclude'    => array( 'shadow', 'tabs', 'bg', 'radius', 'transition' ),
			)
		);
		$this->add_Sifency_Addons_Button_Style_Controls(
			array(
				'prefix'    => 'button_style',
				'label'     => 'Button Style',
				'selector'  => '.sifency-hs-btn',
				'condition' => array( 'btn_text!' => '' ),
			)
		);
		$this->add_Sifency_Addons_Animation_Controls();
	}
	protected function render_dom( array $context ) {
		$wrapper_id        = esc_attr( $context['dom_id'] );
		$settings          = $this->get_settings_for_display();
		$animation_manager = new Sifency_Addons_Animation_Manager( $settings );

		$this->add_render_attribute( 'wrapper', 'class', 'sifency-hotspot-wrapper' );
		$this->add_render_attribute( 'wrapper', 'class', 'sifency-hs-layout-' . $settings['layout_type'] );
		$this->add_render_attribute( 'wrapper', 'class', 'sifency-hs-anim-' . $settings['tooltip_animation'] );

		$js_settings = array( 'trigger' => $settings['trigger'] );
		$this->add_render_attribute( 'wrapper', 'data-hs-settings', wp_json_encode( $js_settings ) );

		$img_html = Group_Control_Image_Size::get_attachment_image_html( $settings, 'image', 'image' );

		?>
		<?php $this->render_sifency_section_header_elements( $settings ); ?>
		<div id="<?php echo esc_attr( $wrapper_id ); ?>" <?php echo wp_kses_post( $this->get_render_attribute_string( 'wrapper' ) ); ?>>
			
			<div class="sifency-hs-container">
				<?php echo wp_kses_post( $img_html ); ?>

				<?php
				foreach ( $settings['spots'] as $index => $spot ) :
					$key = 'spot_' . $index;
					$this->add_render_attribute( $key, 'class', 'sifency-hs-item' );
					$this->add_render_attribute( $key, 'class', 'sifency-hs-dir-' . $spot['tooltip_dir'] );
					$this->add_render_attribute( $key, 'style', "top: {$spot['pos_y']['size']}%; left: {$spot['pos_x']['size']}%;" );
					?>
					<div <?php echo wp_kses_post( $this->get_render_attribute_string( $key ) ); ?>>
						<div class="sifency-hs-pin">
							<span class="sifency-hs-icon">
								<?php Icons_Manager::render_icon( $spot['spot_icon'], array( 'aria-hidden' => 'true' ) ); ?>
							</span>
							<?php if ( 'label' === $settings['layout_type'] && ! empty( $spot['spot_label'] ) ) : ?>
								<span class="sifency-hs-label-text"><?php echo esc_html( $spot['spot_label'] ); ?></span>
							<?php endif; ?>
						</div>
						<div class="sifency-hs-tooltip">
							<?php if ( 'product' === $settings['layout_type'] && ! empty( $spot['tooltip_image']['url'] ) ) : ?>
								<div class="sifency-hs-product-img">
									<img src="<?php echo esc_url( $spot['tooltip_image']['url'] ); ?>" alt="Product">
								</div>
							<?php endif; ?>

							<div class="sifency-hs-content">
								<?php if ( ! empty( $spot['tooltip_title'] ) ) : ?>
									<h4 class="sifency-hs-title sifency-heading-style"><?php echo esc_html( $spot['tooltip_title'] ); ?></h4>
								<?php endif; ?>
								
								<?php if ( 'product' === $settings['layout_type'] && ! empty( $spot['tooltip_price'] ) ) : ?>
									<div class="sifency-hs-price sifency-number-style"><?php echo esc_html( $spot['tooltip_price'] ); ?></div>
								<?php endif; ?>

								<div class="sifency-hs-desc sifency-content-style"><?php echo wp_kses_post( $spot['tooltip_desc'] ); ?></div>
								
								<?php if ( ! empty( $spot['tooltip_btn_text'] ) ) : ?>
									<a href="<?php echo esc_url( $spot['tooltip_link']['url'] ?? '#' ); ?>" class="sifency-hs-btn">
										<?php echo esc_html( $spot['tooltip_btn_text'] ); ?>
									</a>
								<?php endif; ?>
							</div>
						</div>

					</div>
				<?php endforeach; ?>
			</div>

		</div>
		<?php
	}
}
