<?php
/**
 * ZMND Interactive Hover Image Widget
 * 
 * Widget for displaying interactive image that changes on hover
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

require_once WS_PATH . 'elementor/zmnd/includes/ws-zmnd-widget-base.php';

/**
 * Interactive Hover Image widget
 */
class WS_ZMND_Interactive_Hover_Image_Widget extends WS_ZMND_Widget_Base {

    /**
     * Get widget name
     */
    public function get_name() {
        return 'ws_zmnd_interactive_hover_image';
    }

    /**
     * Get widget title
     */
    public function get_title() {
        return esc_html__('Interactive Hover Image', 'watson');
    }

    /**
     * Get widget icon
     */
    public function get_icon() {
        return 'eicon-image-hotspot';
    }

    /**
     * Get widget keywords
     */
    public function get_keywords() {
        return ['hover', 'interactive', 'image', 'features', 'zmnd', 'watson'];
    }

    /**
     * Get script depends
     */
    public function get_script_depends() {
        return ['ws-zmnd-interactive-hover-image'];
    }

    /**
     * Get style depends
     */
    public function get_style_depends() {
        return ['ws-zmnd-widgets', 'ws-zmnd-interactive-hover-image'];
    }

    /**
     * Register widget controls
     */
    protected function register_controls() {
        // Content Section - Main Settings
        $this->start_controls_section(
            'ws_content_section',
            [
                'label' => esc_html__('Main Settings', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'default_image',
            [
                'label' => esc_html__('Default Center Image', 'watson'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->end_controls_section();

        // Content Section - Left Features
        $this->start_controls_section(
            'ws_left_features_section',
            [
                'label' => esc_html__('Left Features', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater_left = new \Elementor\Repeater();

        $repeater_left->add_control(
            'title',
            [
                'label' => esc_html__('Title', 'watson'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Feature Title', 'watson'),
            ]
        );

        $repeater_left->add_control(
            'description',
            [
                'label' => esc_html__('Description', 'watson'),
                'type' => \Elementor\Controls_Manager::TEXTAREA,
                'default' => esc_html__('Feature description goes here.', 'watson'),
            ]
        );

        $repeater_left->add_control(
            'hover_image',
            [
                'label' => esc_html__('Hover Image', 'watson'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater_left->add_control(
            'button_text',
            [
                'label' => esc_html__('Button Text', 'watson'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Learn More', 'watson'),
            ]
        );

        $repeater_left->add_control(
            'button_link',
            [
                'label' => esc_html__('Button Link', 'watson'),
                'type' => \Elementor\Controls_Manager::URL,
                'placeholder' => esc_html__('https://your-link.com', 'watson'),
                'default' => [
                    'url' => '#',
                ],
            ]
        );

        $repeater_left->add_control(
            'show_badge',
            [
                'label' => esc_html__('Show Badge', 'watson'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'watson'),
                'label_off' => esc_html__('No', 'watson'),
                'default' => 'yes',
            ]
        );

        $repeater_left->add_control(
            'badge_text',
            [
                'label' => esc_html__('Badge Text', 'watson'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('25% Discount', 'watson'),
                'condition' => [
                    'show_badge' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'left_features',
            [
                'label' => esc_html__('Left Features', 'watson'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater_left->get_controls(),
                'default' => [
                    [
                        'title' => esc_html__('Body Repair', 'watson'),
                        'description' => esc_html__('Professional smartphone body repair using modern technologies and high-quality materials.', 'watson'),
                        'button_text' => esc_html__('Learn More', 'watson'),
                        'badge_text' => esc_html__('25% Discount', 'watson'),
                    ],
                    [
                        'title' => esc_html__('Water Damage Repair', 'watson'),
                        'description' => esc_html__('Restoration of devices after water damage with guaranteed preservation of all functions and data.', 'watson'),
                        'button_text' => esc_html__('Learn More', 'watson'),
                        'badge_text' => esc_html__('25% Discount', 'watson'),
                    ],
                ],
                'title_field' => '{{{ title }}}',
            ]
        );

        $this->end_controls_section();

        // Content Section - Right Features
        $this->start_controls_section(
            'ws_right_features_section',
            [
                'label' => esc_html__('Right Features', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater_right = new \Elementor\Repeater();

        $repeater_right->add_control(
            'title',
            [
                'label' => esc_html__('Title', 'watson'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Feature Title', 'watson'),
            ]
        );

        $repeater_right->add_control(
            'description',
            [
                'label' => esc_html__('Description', 'watson'),
                'type' => \Elementor\Controls_Manager::TEXTAREA,
                'default' => esc_html__('Feature description goes here.', 'watson'),
            ]
        );

        $repeater_right->add_control(
            'hover_image',
            [
                'label' => esc_html__('Hover Image', 'watson'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater_right->add_control(
            'button_text',
            [
                'label' => esc_html__('Button Text', 'watson'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Learn More', 'watson'),
            ]
        );

        $repeater_right->add_control(
            'button_link',
            [
                'label' => esc_html__('Button Link', 'watson'),
                'type' => \Elementor\Controls_Manager::URL,
                'placeholder' => esc_html__('https://your-link.com', 'watson'),
                'default' => [
                    'url' => '#',
                ],
            ]
        );

        $repeater_right->add_control(
            'show_badge',
            [
                'label' => esc_html__('Show Badge', 'watson'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'watson'),
                'label_off' => esc_html__('No', 'watson'),
                'default' => 'yes',
            ]
        );

        $repeater_right->add_control(
            'badge_text',
            [
                'label' => esc_html__('Badge Text', 'watson'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('25% Discount', 'watson'),
                'condition' => [
                    'show_badge' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'right_features',
            [
                'label' => esc_html__('Right Features', 'watson'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater_right->get_controls(),
                'default' => [
                    [
                        'title' => esc_html__('Speaker Repair', 'watson'),
                        'description' => esc_html__('Replacement and restoration of speakers and microphones using original components.', 'watson'),
                        'button_text' => esc_html__('Learn More', 'watson'),
                        'badge_text' => esc_html__('25% Discount', 'watson'),
                    ],
                    [
                        'title' => esc_html__('LCD Screen Replacement', 'watson'),
                        'description' => esc_html__('Professional replacement of broken and damaged screens while preserving all touch functions.', 'watson'),
                        'button_text' => esc_html__('Learn More', 'watson'),
                        'badge_text' => esc_html__('25% Discount', 'watson'),
                    ],
                ],
                'title_field' => '{{{ title }}}',
            ]
        );

        $this->end_controls_section();

        // Style Section - Container
        $this->start_controls_section(
            'ws_container_style_section',
            [
                'label' => esc_html__('Container', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'container_background',
            [
                'label' => esc_html__('Background Color', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-service-application' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'container_box_shadow',
                'selector' => '{{WRAPPER}} .ws-zmnd-service-application',
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'container_border',
                'selector' => '{{WRAPPER}} .ws-zmnd-service-application',
            ]
        );

        $this->add_control(
            'container_border_radius',
            [
                'label' => esc_html__('Border Radius', 'watson'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-service-application' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'default' => [
                    'top' => 10,
                    'right' => 10,
                    'bottom' => 10,
                    'left' => 10,
                    'unit' => 'px',
                    'isLinked' => true,
                ],
            ]
        );

        $this->add_responsive_control(
            'container_padding',
            [
                'label' => esc_html__('Padding', 'watson'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-service-application' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'default' => [
                    'top' => 60,
                    'right' => 30,
                    'bottom' => 60,
                    'left' => 30,
                    'unit' => 'px',
                    'isLinked' => false,
                ],
            ]
        );

        $this->end_controls_section();

        // Style Section - Features
        $this->start_controls_section(
            'ws_features_style_section',
            [
                'label' => esc_html__('Features', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'feature_title_color',
            [
                'label' => esc_html__('Title Color', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#222222',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-app-features h5' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'feature_title_hover_color',
            [
                'label' => esc_html__('Title Hover Color', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#3498db',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-app-features:hover h5' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'feature_title_typography',
                'selector' => '{{WRAPPER}} .ws-zmnd-app-features h5',
            ]
        );

        $this->add_control(
            'feature_description_color',
            [
                'label' => esc_html__('Description Color', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#222',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-app-features p' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'feature_description_typography',
                'selector' => '{{WRAPPER}} .ws-zmnd-app-features p',
            ]
        );
        
        
             $this->add_control(
            'feature_background',
            [
                'label' => esc_html__('Background Color', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#fff',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-app-features' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        

        $this->add_control(
            'feature_hover_background',
            [
                'label' => esc_html__('Hover Background Color', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#f9f9f9',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-app-features:hover' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'feature_border_color',
            [
                'label' => esc_html__('Border Hover Color', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#3498db',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-left-features:hover' => 'border-right-color: {{VALUE}};',
                    '{{WRAPPER}} .ws-zmnd-right-features:hover' => 'border-left-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'feature_box_shadow',
                'selector' => '{{WRAPPER}} .ws-zmnd-app-features:hover',
            ]
        );

        $this->end_controls_section();

        // Style Section - Button & Badge
        $this->start_controls_section(
            'ws_button_badge_style_section',
            [
                'label' => esc_html__('Button & Badge', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'button_color',
            [
                'label' => esc_html__('Button Text Color', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-btn-options' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'button_background',
            [
                'label' => esc_html__('Button Background', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#3498db',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-btn-options' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'button_hover_background',
            [
                'label' => esc_html__('Button Hover Background', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#2980b9',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-btn-options:hover' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'button_typography',
                'selector' => '{{WRAPPER}} .ws-zmnd-btn-options',
            ]
        );

        $this->add_control(
            'badge_color',
            [
                'label' => esc_html__('Badge Text Color', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-discount-options' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'badge_background',
            [
                'label' => esc_html__('Badge Background', 'watson'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#e74c3c',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-discount-options' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'badge_typography',
                'selector' => '{{WRAPPER}} .ws-zmnd-discount-options',
            ]
        );

        $this->end_controls_section();
    }

    /**
     * Render widget output
     */
    protected function render() {
        $settings = $this->get_settings_for_display();
        $widget_id = $this->get_id();
        $default_image = $settings['default_image']['url'];
        ?>
        <div class="ws-zmnd-container">
            <div class="ws-zmnd-service-application" id="wsInteractiveHover<?php echo esc_attr($widget_id); ?>">
                <div class="row">
                    <!-- Left Features -->
                    <div class="col-md-4 col-sm-6 ws-zmnd-service-application-col01">
                        <?php foreach ($settings['left_features'] as $index => $item) : 
                            $image_url = $item['hover_image']['url'];
                        ?>
                            <div class="ws-zmnd-app-features ws-zmnd-left-features" data-src="<?php echo esc_url($image_url); ?>">
                                <h5><?php echo esc_html($item['title']); ?></h5>
                                <p><?php echo esc_html($item['description']); ?></p>
                                
                                <?php if (!empty($item['button_text'])) : 
                                    $target = $item['button_link']['is_external'] ? ' target="_blank"' : '';
                                    $nofollow = $item['button_link']['nofollow'] ? ' rel="nofollow"' : '';
                                ?>
                                    <a href="<?php echo esc_url($item['button_link']['url']); ?>" class="ws-zmnd-btn-options"<?php echo $target . $nofollow; ?>><?php echo esc_html($item['button_text']); ?></a>
                                <?php endif; ?>
                                
                                <?php if ('yes' === $item['show_badge'] && !empty($item['badge_text'])) : ?>
                                    <span class="ws-zmnd-discount-options"><?php echo esc_html($item['badge_text']); ?></span>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    
                    <!-- Center Image -->
                    <div class="col-md-4 hidden-sm hidden-xs ws-zmnd-service-application-col02">
                        <div class="ws-zmnd-service-application-wrap">
                            <div class="ws-zmnd-service-application-img">
                                <img class="ws-zmnd-app-demo" src="<?php echo esc_url($default_image); ?>" alt="<?php echo esc_attr__('Interactive Image', 'watson'); ?>">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Right Features -->
                    <div class="col-md-4 col-sm-6 ws-zmnd-service-application-col03">
                        <?php foreach ($settings['right_features'] as $index => $item) : 
                            $image_url = $item['hover_image']['url'];
                        ?>
                            <div class="ws-zmnd-app-features ws-zmnd-right-features" data-src="<?php echo esc_url($image_url); ?>">
                                <h5><?php echo esc_html($item['title']); ?></h5>
                                <p><?php echo esc_html($item['description']); ?></p>
                                
                                <?php if (!empty($item['button_text'])) : 
                                    $target = $item['button_link']['is_external'] ? ' target="_blank"' : '';
                                    $nofollow = $item['button_link']['nofollow'] ? ' rel="nofollow"' : '';
                                ?>
                                    <a href="<?php echo esc_url($item['button_link']['url']); ?>" class="ws-zmnd-btn-options"<?php echo $target . $nofollow; ?>><?php echo esc_html($item['button_text']); ?></a>
                                <?php endif; ?>
                                
                                <?php if ('yes' === $item['show_badge'] && !empty($item['badge_text'])) : ?>
                                    <span class="ws-zmnd-discount-options"><?php echo esc_html($item['badge_text']); ?></span>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
        <?php
    }
}
