<?php
/**
 * Before/After Image Comparison Widget
 * 
 * Interactive image slider for comparing two images.
 * 
 * @package AdMoreWidgetsSuite
 * @since   1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) exit;

class EPPRO_Before_After_Widget extends EPPRO_Base_Widget {

    public function get_name() {
        return 'eppro-before-after';
    }

    public function get_title() {
        return __( 'Before / After Image', 'admore-widgets-suite' );
    }

    public function get_icon() {
        return 'eicon-image-before-after';
    }

    public function get_categories() {
        return [ 'eppro-elements' ];
    }

    public function get_keywords() {
        return [ 'before', 'after', 'compare', 'comparison', 'slider', 'image' ];
    }

    public function get_script_depends() {
        return [ 'eppro-before-after' ];
    }

    public function get_style_depends() {
        return [ 'eppro-before-after' ];
    }

    protected function register_controls() {

        $before_placeholder = EPPRO_URL . 'widgets/before-after/assets/img/placeholder-before.svg';
        $after_placeholder  = EPPRO_URL . 'widgets/before-after/assets/img/placeholder-after.svg';

        // ═══════════════════════════════════════════════════════════════
        // CONTENT TAB
        // ═══════════════════════════════════════════════════════════════

        // Images
        $this->start_controls_section(
            'section_images',
            [
                'label' => __( 'Images', 'admore-widgets-suite' ),
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'before_image',
            [
                'label'   => __( 'Before Image', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::MEDIA,
                'default' => [ 'url' => $before_placeholder ],
            ]
        );

        $this->add_control(
            'before_image_alt',
            [
                'label'       => __( 'Before Alt Text', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => __( 'Before', 'admore-widgets-suite' ),
                'placeholder' => __( 'Describe before image', 'admore-widgets-suite' ),
            ]
        );

        $this->add_control(
            'after_image',
            [
                'label'   => __( 'After Image', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::MEDIA,
                'default' => [ 'url' => $after_placeholder ],
            ]
        );

        $this->add_control(
            'after_image_alt',
            [
                'label'       => __( 'After Alt Text', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => __( 'After', 'admore-widgets-suite' ),
                'placeholder' => __( 'Describe after image', 'admore-widgets-suite' ),
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Image_Size::get_type(),
            [
                'name'    => 'image_size',
                'default' => 'large',
            ]
        );

        $this->add_control(
            'image_fit',
            [
                'label'   => __( 'Image Fit', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::SELECT,
                'default' => 'cover',
                'options' => [
                    'cover'   => __( 'Cover (fill & crop)', 'admore-widgets-suite' ),
                    'contain' => __( 'Contain (show full image)', 'admore-widgets-suite' ),
                    'fill'    => __( 'Stretch', 'admore-widgets-suite' ),
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-before img, {{WRAPPER}} .eppro-before-after-after img' => 'object-fit: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'before_grayscale',
            [
                'label'        => __( 'Before Image: Grayscale', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => '',
                'description'  => __( 'Classic effect: grayscale before → color after.', 'admore-widgets-suite' ),
                'selectors'    => [
                    '{{WRAPPER}} .eppro-before-after-before img' => 'filter: grayscale(100%);',
                ],
            ]
        );

        $this->end_controls_section();

        // Labels
        $this->start_controls_section(
            'section_labels',
            [
                'label' => __( 'Labels', 'admore-widgets-suite' ),
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'show_labels',
            [
                'label'        => __( 'Show Labels', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );

        $this->add_control(
            'before_label',
            [
                'label'       => __( 'Before Label', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => __( 'Before', 'admore-widgets-suite' ),
                'placeholder' => __( 'Before', 'admore-widgets-suite' ),
                'condition'   => [ 'show_labels' => 'yes' ],
            ]
        );

        $this->add_control(
            'after_label',
            [
                'label'       => __( 'After Label', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => __( 'After', 'admore-widgets-suite' ),
                'placeholder' => __( 'After', 'admore-widgets-suite' ),
                'condition'   => [ 'show_labels' => 'yes' ],
            ]
        );

        $this->add_control(
            'label_vertical_position',
            [
                'label'     => __( 'Vertical Position', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::SELECT,
                'default'   => 'top',
                'options'   => [
                    'top'    => __( 'Top', 'admore-widgets-suite' ),
                    'middle' => __( 'Middle (center)', 'admore-widgets-suite' ),
                    'bottom' => __( 'Bottom', 'admore-widgets-suite' ),
                ],
                'condition' => [ 'show_labels' => 'yes' ],
            ]
        );

        $this->add_control(
            'label_horizontal_position',
            [
                'label'     => __( 'Horizontal Style', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::SELECT,
                'default'   => 'sides',
                'options'   => [
                    'sides'  => __( 'Sides (Before left · After right)', 'admore-widgets-suite' ),
                    'center' => __( 'Both centered', 'admore-widgets-suite' ),
                ],
                'condition' => [ 'show_labels' => 'yes' ],
            ]
        );

        $this->end_controls_section();

        // Settings
        $this->start_controls_section(
            'section_settings',
            [
                'label' => __( 'Settings', 'admore-widgets-suite' ),
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'orientation',
            [
                'label'   => __( 'Orientation', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::SELECT,
                'default' => 'horizontal',
                'options' => [
                    'horizontal' => __( 'Horizontal', 'admore-widgets-suite' ),
                    'vertical'   => __( 'Vertical', 'admore-widgets-suite' ),
                ],
            ]
        );

        $this->add_control(
            'initial_position',
            [
                'label'      => __( 'Initial Position (%)', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ '%' ],
                'range'      => [
                    '%' => [ 'min' => 0, 'max' => 100 ],
                ],
                'default' => [ 'size' => 50, 'unit' => '%' ],
            ]
        );

        $this->add_control(
            'handle_icon_type',
            [
                'label'   => __( 'Handle Icon', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::SELECT,
                'default' => 'arrows',
                'options' => [
                    'arrows'    => __( '← → Arrows', 'admore-widgets-suite' ),
                    'plus_minus'=> __( '+ − Plus/Minus', 'admore-widgets-suite' ),
                    'drag'      => __( '⋮⋮ Drag Lines', 'admore-widgets-suite' ),
                    'custom'    => __( 'Custom Icon', 'admore-widgets-suite' ),
                    'none'      => __( 'None (line only)', 'admore-widgets-suite' ),
                ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'handle_custom_icon',
            [
                'label'     => __( 'Custom Icon', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::ICONS,
                'default'   => [
                    'value'   => 'fas fa-arrows-alt-h',
                    'library' => 'fa-solid',
                ],
                'condition' => [ 'handle_icon_type' => 'custom' ],
            ]
        );

        $this->add_control(
            'smooth_animation',
            [
                'label'        => __( 'Smooth Animation on Load', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => 'yes',
                'description'  => __( 'Animate handle from edge to initial position on load.', 'admore-widgets-suite' ),
            ]
        );

        $this->add_control(
            'move_on_hover',
            [
                'label'        => __( 'Move on Hover', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => '',
                'description'  => __( 'Slider follows mouse movement on hover.', 'admore-widgets-suite' ),
                'separator'    => 'before',
            ]
        );

        $this->add_control(
            'move_on_click',
            [
                'label'        => __( 'Move on Click', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => 'yes',
            ]
        );

        $this->add_control(
            'overlay',
            [
                'label'        => __( 'Show Overlay', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'label_on'     => __( 'Yes', 'admore-widgets-suite' ),
                'label_off'    => __( 'No', 'admore-widgets-suite' ),
                'return_value' => 'yes',
                'default'      => '',
                'separator'    => 'before',
            ]
        );

        $this->end_controls_section();

        // ═══════════════════════════════════════════════════════════════
        // STYLE TAB
        // ═══════════════════════════════════════════════════════════════

        // Container Style
        $this->start_controls_section(
            'section_container_style',
            [
                'label' => __( 'Container', 'admore-widgets-suite' ),
                'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'container_height',
            [
                'label'      => __( 'Height', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px', 'vh' ],
                'range'      => [
                    'px' => [
                        'min' => 200,
                        'max' => 1000,
                    ],
                    'vh' => [
                        'min' => 20,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 500,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-container' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'container_border_radius',
            [
                'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors'  => [
                    '{{WRAPPER}} .eppro-before-after-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .eppro-before-after-container img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'container_box_shadow',
                'selector' => '{{WRAPPER}} .eppro-before-after-container',
            ]
        );

        $this->end_controls_section();

        // Handle Style
        $this->start_controls_section(
            'section_handle_style',
            [
                'label' => __( 'Handle', 'admore-widgets-suite' ),
                'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'handle_size',
            [
                'label'      => __( 'Size', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 20,
                        'max' => 80,
                    ],
                ],
                'default' => [
                    'size' => 44,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-handle' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'handle_background',
            [
                'label'     => __( 'Background Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-handle' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'handle_icon_color',
            [
                'label'     => __( 'Icon Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => '#374151',
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-handle' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name'     => 'handle_border',
                'selector' => '{{WRAPPER}} .eppro-before-after-handle',
            ]
        );

        $this->add_control(
            'handle_border_radius',
            [
                'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'default'    => [
                    'top'      => '50',
                    'right'    => '50',
                    'bottom'   => '50',
                    'left'     => '50',
                    'unit'     => '%',
                    'isLinked' => true,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-handle' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'handle_box_shadow',
                'selector' => '{{WRAPPER}} .eppro-before-after-handle',
            ]
        );

        $this->add_control(
            'divider_width',
            [
                'label'      => __( 'Divider Width', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 1,
                        'max' => 10,
                    ],
                ],
                'default' => [
                    'size' => 3,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-divider' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'separator' => 'before',
                'condition' => [
                    'orientation' => 'horizontal',
                ],
            ]
        );

        $this->add_control(
            'divider_height',
            [
                'label'      => __( 'Divider Height', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 1,
                        'max' => 10,
                    ],
                ],
                'default' => [
                    'size' => 3,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-divider' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'separator' => 'before',
                'condition' => [
                    'orientation' => 'vertical',
                ],
            ]
        );

        $this->add_control(
            'divider_color',
            [
                'label'     => __( 'Divider Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-divider' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Label Style
        $this->start_controls_section(
            'section_label_style',
            [
                'label'     => __( 'Labels', 'admore-widgets-suite' ),
                'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_labels' => 'yes',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name'     => 'label_typography',
                'selector' => '{{WRAPPER}} .eppro-before-after-label',
            ]
        );

        $this->add_control(
            'label_color',
            [
                'label'     => __( 'Text Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-label' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'label_background',
            [
                'label'     => __( 'Background Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => 'rgba(0,0,0,0.6)',
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-label' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'label_padding',
            [
                'label'      => __( 'Padding', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em' ],
                'selectors'  => [
                    '{{WRAPPER}} .eppro-before-after-label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'label_border_radius',
            [
                'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors'  => [
                    '{{WRAPPER}} .eppro-before-after-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Overlay Style
        $this->start_controls_section(
            'section_overlay_style',
            [
                'label'     => __( 'Overlay', 'admore-widgets-suite' ),
                'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
                'condition' => [
                    'overlay' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'overlay_color',
            [
                'label'     => __( 'Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => 'rgba(0,0,0,0.3)',
                'selectors' => [
                    '{{WRAPPER}} .eppro-before-after-overlay' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    /**
     * URL of an image control at the size chosen in "Image Size"
     * (placeholders and external URLs are used as they are).
     */
    private function get_image_url( array $settings, string $key ): string {
        $image = $settings[ $key ] ?? [];
        if ( ! empty( $image['id'] ) ) {
            $url = \Elementor\Group_Control_Image_Size::get_attachment_image_src( $image['id'], 'image_size', $settings );
            if ( $url ) {
                return (string) $url;
            }
        }
        return (string) ( $image['url'] ?? '' );
    }

    protected function render() {
        $settings = $this->get_settings_for_display();

        $before_image = $this->get_image_url( $settings, 'before_image' );
        $after_image  = $this->get_image_url( $settings, 'after_image' );

        if ( empty( $before_image ) || empty( $after_image ) ) {
            if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
                echo '<div class="eppro-editor-placeholder">
                    <svg width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" class="eppro-editor-placeholder__icon"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21" stroke-dasharray="3,2"/><path d="m7 8 2 2-2 2m8-4-2 2 2 2"/></svg>
                    <p class="eppro-editor-placeholder__title">' . esc_html__( 'Before / After', 'admore-widgets-suite' ) . '</p>
                    <p class="eppro-editor-placeholder__desc">' . esc_html__( 'Upload both Before and After images in the Content tab.', 'admore-widgets-suite' ) . '</p>
                </div>';
            }
            return;
        }

        $orientation = 'vertical' === ( $settings['orientation'] ?? '' ) ? 'vertical' : 'horizontal';
        $v_pos       = in_array( $settings['label_vertical_position'] ?? 'top', [ 'top', 'middle', 'bottom' ], true ) ? $settings['label_vertical_position'] : 'top';
        $h_pos       = 'center' === ( $settings['label_horizontal_position'] ?? '' ) ? 'center' : 'sides';
        $icon_type   = in_array( $settings['handle_icon_type'] ?? 'arrows', [ 'arrows', 'plus_minus', 'drag', 'custom', 'none' ], true ) ? $settings['handle_icon_type'] : 'arrows';
        $show_labels = 'yes' === ( $settings['show_labels'] ?? '' );
        $overlay     = 'yes' === ( $settings['overlay'] ?? '' );

        $container_classes = [
            'eppro-before-after-container',
            'eppro-before-after-container--' . $orientation,
            'eppro-label-v-' . $v_pos,
            'eppro-label-h-' . $h_pos,
        ];

        $initial = (float) ( $settings['initial_position']['size'] ?? 50 );

        $widget_settings = [
            'orientation'     => $orientation,
            'initialPosition' => max( 0, min( 100, $initial ) ),
            'moveOnHover'     => 'yes' === ( $settings['move_on_hover'] ?? '' ),
            'moveOnClick'     => 'yes' === ( $settings['move_on_click'] ?? '' ),
            'smoothAnimation' => 'yes' === ( $settings['smooth_animation'] ?? '' ),
        ];

        $before_alt = $settings['before_image_alt'] ?? ( $settings['before_label'] ?? __( 'Before', 'admore-widgets-suite' ) );
        $after_alt  = $settings['after_image_alt']  ?? ( $settings['after_label']  ?? __( 'After', 'admore-widgets-suite' ) );

        // Built-in handle icons (outline style, coloured by the "Icon Color" control).
        $icons = [
            'arrows'     => '<svg class="eppro-ba-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9,4 3,12 9,20"/><polyline points="15,4 21,12 15,20"/></svg>',
            'plus_minus' => '<svg class="eppro-ba-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="2" y1="12" x2="9" y2="12"/><line x1="15" y1="12" x2="22" y2="12"/><line x1="18.5" y1="8" x2="18.5" y2="16"/></svg>',
            'drag'       => '<svg class="eppro-ba-icon eppro-ba-icon--filled" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="8.5" cy="7" r="1.5"/><circle cx="15.5" cy="7" r="1.5"/><circle cx="8.5" cy="12" r="1.5"/><circle cx="15.5" cy="12" r="1.5"/><circle cx="8.5" cy="17" r="1.5"/><circle cx="15.5" cy="17" r="1.5"/></svg>',
        ];
        // wp_kses() compares attribute names in lower case — "viewbox", not "viewBox".
        $allowed_svg = [
            'svg'      => [ 'class' => true, 'width' => true, 'height' => true, 'viewbox' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'stroke-linecap' => true, 'stroke-linejoin' => true, 'aria-hidden' => true ],
            'polyline' => [ 'points' => true ],
            'line'     => [ 'x1' => true, 'y1' => true, 'x2' => true, 'y2' => true ],
            'circle'   => [ 'cx' => true, 'cy' => true, 'r' => true ],
        ];

        $custom_icon = $settings['handle_custom_icon'] ?? [];
        if ( 'custom' === $icon_type && empty( $custom_icon['value'] ) ) {
            $icon_type = 'none';
        }
        ?>

        <div class="<?php echo esc_attr( implode( ' ', $container_classes ) ); ?>"
             data-settings="<?php echo esc_attr( wp_json_encode( $widget_settings ) ); ?>">

            <!-- Before Image -->
            <div class="eppro-before-after-before">
                <img src="<?php echo esc_url( $before_image ); ?>" alt="<?php echo esc_attr( $before_alt ); ?>" draggable="false" decoding="async">

                <?php if ( $show_labels && ! empty( $settings['before_label'] ) ) : ?>
                    <div class="eppro-before-after-label eppro-before-after-label--before">
                        <?php echo esc_html( $settings['before_label'] ); ?>
                    </div>
                <?php endif; ?>

                <?php if ( $overlay ) : ?>
                    <div class="eppro-before-after-overlay"></div>
                <?php endif; ?>
            </div>

            <!-- After Image -->
            <div class="eppro-before-after-after">
                <img src="<?php echo esc_url( $after_image ); ?>" alt="<?php echo esc_attr( $after_alt ); ?>" draggable="false" decoding="async">

                <?php if ( $show_labels && ! empty( $settings['after_label'] ) ) : ?>
                    <div class="eppro-before-after-label eppro-before-after-label--after">
                        <?php echo esc_html( $settings['after_label'] ); ?>
                    </div>
                <?php endif; ?>

                <?php if ( $overlay ) : ?>
                    <div class="eppro-before-after-overlay"></div>
                <?php endif; ?>
            </div>

            <!-- Slider -->
            <div class="eppro-before-after-slider">
                <div class="eppro-before-after-divider"></div>
                <div class="eppro-before-after-handle eppro-before-after-handle--<?php echo esc_attr( $icon_type ); ?>"
                     tabindex="0" role="slider"
                     aria-label="<?php esc_attr_e( 'Image comparison slider', 'admore-widgets-suite' ); ?>"
                     aria-orientation="<?php echo esc_attr( $orientation ); ?>"
                     aria-valuemin="0" aria-valuemax="100"
                     aria-valuenow="<?php echo esc_attr( (string) round( $widget_settings['initialPosition'] ) ); ?>"><?php
                    if ( 'custom' === $icon_type ) {
                        echo '<span class="eppro-ba-custom-icon" aria-hidden="true">';
                        \Elementor\Icons_Manager::render_icon( $custom_icon, [ 'aria-hidden' => 'true' ] );
                        echo '</span>';
                    } elseif ( isset( $icons[ $icon_type ] ) ) {
                        echo wp_kses( $icons[ $icon_type ], $allowed_svg );
                    }
                ?></div>
            </div>

        </div>

        <?php
    }
}