<?php

namespace Softech_Addons_for_Elementor\Widgets;

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

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;

class sitsel_before_after_slider extends Widget_Base
{

    public function get_name()
    {
        return 'sitsel_before_after_slider';
    }

    public function get_title()
    {
        return __('SITS Before After Slider', 'softech-addons-for-elementor');
    }

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

    public function get_categories()
    {
        return ['sits-category'];
    }

    public function get_keywords()
    {
        return ['before', 'after', 'slider', 'comparison', 'image', 'transform'];
    }
   public function get_style_depends()
{
    if (!wp_style_is('sitsel-before-after-slider-css', 'registered')) {
        wp_register_style(
            'sitsel-before-after-slider-css',
            SITS_ELEMENTOR_ADDONS_PLUGIN_URL . 'assets/css/sitsel-before-after-slider.css',
            [],
            SITS_ELEMENTOR_ADDONS_VERSION
        );
    }
    return ['sitsel-before-after-slider-css'];
}

public function get_script_depends()
{
    if (!wp_script_is('sitsel-before-after-slider-js', 'registered')) {
        wp_register_script(
            'sitsel-before-after-slider-js',
            SITS_ELEMENTOR_ADDONS_PLUGIN_URL . 'assets/js/sitsel-before-after-slider.js',
            ['jquery'],
            SITS_ELEMENTOR_ADDONS_VERSION,
            true
        );
    }

    if (!wp_script_is('sitsel-before-after-slider-editor-js', 'registered')) {
        wp_register_script(
            'sitsel-before-after-slider-editor-js',
            SITS_ELEMENTOR_ADDONS_PLUGIN_URL . 'assets/js/sitsel-before-after-slider-editor.js',
            [],
            SITS_ELEMENTOR_ADDONS_VERSION,
            true
        );
    }

    return ['sitsel-before-after-slider-js', 'sitsel-before-after-slider-editor-js'];
}
    protected function _register_controls()
    {
       
        $this->start_controls_section(
            'content_section',
            [
                'label' => __('Images', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'before_image',
            [
                'label' => __('Before Image', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->add_control(
            'after_image',
            [
                'label' => __('After Image', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->add_control(
            'before_label',
            [
                'label' => __('Before Label', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Before', 'softech-addons-for-elementor'),
                'placeholder' => __('Before', 'softech-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'after_label',
            [
                'label' => __('After Label', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('After', 'softech-addons-for-elementor'),
                'placeholder' => __('After', 'softech-addons-for-elementor'),
            ]
        );
        $this->add_control(
            'direction',
            [
                'label' => __('Direction', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'horizontal' => __('Horizontal', 'softech-addons-for-elementor'),
                    'vertical' => __('Vertical', 'softech-addons-for-elementor'),
                ],
                'default' => 'horizontal',
            ]
        );

        $this->add_control(
            'trigger_type',
            [
                'label' => __('Trigger', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'click_drag' => __('Click & Drag', 'softech-addons-for-elementor'),
                    'hover' => __('Hover', 'softech-addons-for-elementor'),
                ],
                'default' => 'click_drag',
            ]
        );

        $this->add_control(
            'icon_style',
            [
                'label' => __('Icon', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'caret' => __('Caret', 'softech-addons-for-elementor'),
                    'angle' => __('Angle', 'softech-addons-for-elementor'),
                    'arrow' => __('Arrow', 'softech-addons-for-elementor'),
                    'long_arrow' => __('Long Arrow', 'softech-addons-for-elementor'),
                    'chevron' => __('Chevron', 'softech-addons-for-elementor'),
                ],
                'default' => 'caret',
            ]
        );
        $this->add_control(
            'initial_position',
            [
                'label' => __('Initial Position', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['%'],
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 50,
                ],
            ]
        );

        $this->add_control(
            'show_labels',
            [
                'label' => __('Show Labels', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => __('Show', 'softech-addons-for-elementor'),
                'label_off' => __('Hide', 'softech-addons-for-elementor'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->end_controls_section();


        $this->start_controls_section(
            'container_style_section',
            [
                'label' => __('Container', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'container_height',
            [
                'label' => __('Height', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'vh'],
                'range' => [
                    'px' => [
                        'min' => 200,
                        'max' => 1000,
                    ],
                    'vh' => [
                        'min' => 20,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 400,
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-before-after-container' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'container_border',
                'selector' => '{{WRAPPER}} .sitsel-before-after-container',
            ]
        );

        $this->add_responsive_control(
            'container_border_radius',
            [
                'label' => __('Border Radius', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-before-after-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

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

        $this->end_controls_section();


        
    $this->start_controls_section(
    'labels_style_section',
    [
        'label' => __('Labels', 'softech-addons-for-elementor'),
        'tab' => Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_labels' => 'yes',
        ],
    ]
);

$this->add_control(
    'label_background_color',
    [
        'label' => __('Background Color', 'softech-addons-for-elementor'),
        'type' => Controls_Manager::COLOR,
        'default' => 'rgba(0,0,0,0.7)',
        'selectors' => [
            '{{WRAPPER}} .sitsel-label' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'label_text_color',
    [
        'label' => __('Text Color', 'softech-addons-for-elementor'),
        'type' => Controls_Manager::COLOR,
        'default' => '#ffffff',
        'selectors' => [
            '{{WRAPPER}} .sitsel-label' => 'color: {{VALUE}};',
        ],
    ]
);

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

$this->add_responsive_control(
    'label_padding',
    [
        'label' => __('Padding', 'softech-addons-for-elementor'),
        'type' => Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'default' => [
            'top' => '8',
            'right' => '15',
            'bottom' => '8',
            'left' => '15',
            'unit' => 'px',
        ],
        'selectors' => [
            '{{WRAPPER}} .sitsel-label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

// NEW: Border Color Control
$this->add_control(
    'label_border_color',
    [
        'label' => __('Border Color', 'softech-addons-for-elementor'),
        'type' => Controls_Manager::COLOR,
        'default' => '#000000',
        'selectors' => [
            '{{WRAPPER}} .sitsel-label' => 'border-color: {{VALUE}};',
        ],
    ]
);


$this->add_responsive_control(
    'label_border_width',
    [
        'label' => __('Border Width', 'softech-addons-for-elementor'),
        'type' => Controls_Manager::DIMENSIONS,
        'size_units' => ['px'],
        'default' => [
            'top' => '0',
            'right' => '0',
            'bottom' => '0',
            'left' => '0',
            'unit' => 'px',
            'isLinked' => true,
        ],
        'selectors' => [
            '{{WRAPPER}} .sitsel-label' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; border-style: solid;',
        ],
    ]
);

$this->add_responsive_control(
    'label_border_radius',
    [
        'label' => __('Border Radius', 'softech-addons-for-elementor'),
        'type' => Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .sitsel-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();
        // Icon Style Section
        $this->start_controls_section(
            'icon_style_section',
            [
                'label' => __('Icon', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'icon_color',
            [
                'label' => __('Icon Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#333333',
                'selectors' => [
                    '{{WRAPPER}} .sitsel-handle svg' => 'stroke: {{VALUE}}; color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'icon_bg_color',
            [
                'label' => __('Icon Background Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .sitsel-handle' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'icon_border_color',
            [
                'label' => __('Icon Border Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#cccccc',
                'selectors' => [
                    '{{WRAPPER}} .sitsel-handle' => 'border-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'line_color',
            [
                'label' => __('Line Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .sitsel-divider' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'line_thickness',
            [
                'label' => __('Line Thickness', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 20,
                    ],
                ],
                'default' => [
                    'size' => 3,
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-before-after-container.horizontal .sitsel-divider' => 'width: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .sitsel-before-after-container.vertical .sitsel-divider' => 'height: {{SIZE}}{{UNIT}}; width: 100%;',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_size',
            [
                'label' => __('Icon Size', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 24,
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-handle svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_width',
            [
                'label' => __('Icon Width', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 150,
                    ],
                ],
                'default' => [
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-handle' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_height',
            [
                'label' => __('Icon Height', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 150,
                    ],
                ],
                'default' => [
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-handle' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'icon_border_type',
            [
                'label' => __('Border Type', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'solid' => __('Solid', 'softech-addons-for-elementor'),
                    'dashed' => __('Dashed', 'softech-addons-for-elementor'),
                    'dotted' => __('Dotted', 'softech-addons-for-elementor'),
                    'double' => __('Double', 'softech-addons-for-elementor'),
                    'none' => __('None', 'softech-addons-for-elementor'),
                ],
                'default' => 'solid',
                'selectors' => [
                    '{{WRAPPER}} .sitsel-handle' => 'border-style: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_border_width',
            [
                'label' => __('Border Width', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 10,
                    ],
                ],
                'default' => [
                    'size' => 2,
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-handle' => 'border-width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_border_radius',
            [
                'label' => __('Border Radius', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => '50',
                    'right' => '50',
                    'bottom' => '50',
                    'left' => '50',
                    'unit' => '%',
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-handle' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

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

    if (empty($settings['before_image']['url']) || empty($settings['after_image']['url'])) {
        return;
    }

    $before_image_url = esc_url($settings['before_image']['url']);
    $after_image_url = esc_url($settings['after_image']['url']);
    $initial_position = $settings['initial_position']['size'];

    $direction = isset($settings['direction']) ? $settings['direction'] : 'horizontal';
    $trigger_type = isset($settings['trigger_type']) ? $settings['trigger_type'] : 'click_drag';
    $icon_style = isset($settings['icon_style']) ? $settings['icon_style'] : 'caret';

    // Calculate clip-path value based on direction
    $clip_path_value = '';
    $divider_style = '';
    
    if ($direction === 'horizontal') {
        $clip_path_value = 'inset(0 ' . (100 - $initial_position) . '% 0 0)';
        $divider_style = 'left: ' . $initial_position . '%;';
    } else {
        $clip_path_value = 'inset(0 0 ' . (100 - $initial_position) . '% 0)';
        $divider_style = 'top: ' . $initial_position . '%;';
    }

    echo '<div class="sitsel-before-after-container ' . esc_attr($direction) . '" data-initial-position="' . esc_attr($initial_position) . '" data-direction="' . esc_attr($direction) . '" data-trigger-type="' . esc_attr($trigger_type) . '" data-icon-style="' . esc_attr($icon_style) . '">';
    
  
    echo '<img src="' . esc_url($after_image_url) . '" 
         alt="' . esc_attr($settings['after_label']) . '" 
         class="sitsel-after-image"
         loading="lazy"
         decoding="async" />';

 
    echo '<img src="' . esc_url($before_image_url) . '" 
         alt="' . esc_attr($settings['before_label']) . '" 
         class="sitsel-before-image"
         loading="lazy"
         decoding="async"
         style="clip-path: ' . esc_attr($clip_path_value) . ';" />';

    
    echo '<div class="sitsel-divider" style="' . esc_attr($divider_style) . '">';
    echo '<div class="sitsel-handle">';
    // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    echo $this->get_icon_svg($icon_style, $direction);
    echo '</div>';
    echo '</div>';

    if ($settings['show_labels'] === 'yes') {
        if (!empty($settings['before_label'])) {
            echo '<div class="sitsel-label before">' . esc_html($settings['before_label']) . '</div>';
        }
        if (!empty($settings['after_label'])) {
            echo '<div class="sitsel-label after">' . esc_html($settings['after_label']) . '</div>';
        }
    }

    echo '</div>';
}


    private function get_icon_svg($icon_style, $direction = 'horizontal')
    {
        $icons = [
            // CARET - Triangular pointers pointing OUTWARD (away from center)
            'caret' => $direction === 'horizontal'
                ? '<svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg">
                <polygon points="6,12 12,6 12,18" fill="currentColor"/>
                <polygon points="26,12 20,6 20,18" fill="currentColor"/>
               </svg>'
                : '<svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg">
                <polygon points="12,6 6,12 18,12" fill="currentColor"/>
                <polygon points="12,26 6,20 18,20" fill="currentColor"/>
               </svg>',

            // ANGLE - V-shaped angle brackets pointing INWARD (toward center) like > <
            'angle' => $direction === 'horizontal'
                ? '<svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M 10 6 L 14 12 L 10 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M 22 6 L 18 12 L 22 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>'
                : '<svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg">
                <path d="M 6 10 L 12 14 L 18 10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M 6 22 L 12 18 L 18 22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>',

            // ARROW
            'arrow' => $direction === 'horizontal' ?
                '<svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 12h5m8 0h5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M22 9l3 3-3 3M10 9l-3 3 3 3" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' :
                '<svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg"><path d="M12 7v5m0 8v5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M9 22l3 3 3-3M9 10l3-3 3 3" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>',

            // LONG ARROW
            'long_arrow' => $direction === 'horizontal' ?
                '<svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg"><line x1="3" y1="12" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="20" y1="12" x2="29" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><polyline points="25 9 29 12 25 15" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><polyline points="7 9 3 12 7 15" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' :
                '<svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg"><line x1="12" y1="3" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="12" y1="20" x2="12" y2="29" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><polyline points="9 25 12 29 15 25" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><polyline points="9 7 12 3 15 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>',

            // CHEVRON
            'chevron' => $direction === 'horizontal' ?
                '<svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg"><polyline points="19 8 23 12 19 16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><polyline points="13 8 9 12 13 16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' :
                '<svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg"><polyline points="8 19 12 23 16 19" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><polyline points="8 13 12 9 16 13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>',
        ];

        return isset($icons[$icon_style]) ? $icons[$icon_style] : $icons['caret'];
    }


    protected function content_template()
{
?>
    <#
        var iconSVGs={ 'caret_h' : '<svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg"><polygon points="6,12 12,6 12,18" fill="currentColor"/><polygon points="26,12 20,6 20,18" fill="currentColor"/></svg>' , 'caret_v' : '<svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg"><polygon points="12,6 6,12 18,12" fill="currentColor"/><polygon points="12,26 6,20 18,20" fill="currentColor"/></svg>' , 'angle_h' : '<svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg"><path d="M 10 6 L 14 12 L 10 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M 22 6 L 18 12 L 22 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' , 'angle_v' : '<svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg"><path d="M 6 22 L 12 18 L 18 22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M 6 10 L 12 14 L 18 10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' , 'arrow_h' : '<svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 12h5m8 0h5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M22 9l3 3-3 3M10 9l-3 3 3 3" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' , 'arrow_v' : '<svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg"><path d="M12 7v5m0 8v5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M9 22l3 3 3-3M9 10l3-3 3 3" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' , 'long_arrow_h' : '<svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg"><line x1="3" y1="12" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="20" y1="12" x2="29" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><polyline points="25 9 29 12 25 15" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><polyline points="7 9 3 12 7 15" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' , 'long_arrow_v' : '<svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg"><line x1="12" y1="3" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="12" y1="20" x2="12" y2="29" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><polyline points="9 25 12 29 15 25" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><polyline points="9 7 12 3 15 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' , 'chevron_h' : '<svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg"><polyline points="19 8 23 12 19 16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><polyline points="13 8 9 12 13 16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' , 'chevron_v' : '<svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg"><polyline points="8 19 12 23 16 19" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><polyline points="8 13 12 9 16 13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'
        };

        var direction = settings.direction || 'horizontal';
        var isVertical = direction === 'vertical';
        var iconKey = (settings.icon_style || 'caret') + '_' + (isVertical ? 'v' : 'h');
        var iconSvg = iconSVGs[iconKey] || iconSVGs['caret_h'];

        // Generate unique ID for this instance
        var uniqueId = 'sitsel-' + Math.random().toString(36).substr(2, 9);
        
        // Calculate initial position
        var initialPos = settings.initial_position.size || 50;
        var clipPath = direction === 'horizontal' 
            ? 'inset(0 ' + (100 - initialPos) + '% 0 0)'
            : 'inset(0 0 ' + (100 - initialPos) + '% 0)';
        var dividerPos = direction === 'horizontal'
            ? 'left: ' + initialPos + '%;'
            : 'top: ' + initialPos + '%;';
    #>
    <div id="{{ uniqueId }}" class="sitsel-before-after-container {{ direction }}" data-initial-position="{{ settings.initial_position.size }}" data-direction="{{ direction }}" data-trigger-type="{{ settings.trigger_type || 'click_drag' }}" data-icon-style="{{ settings.icon_style || 'caret' }}">

        <img src="{{ settings.after_image.url }}" alt="{{ settings.after_label }}" class="sitsel-after-image">
        <img src="{{ settings.before_image.url }}" alt="{{ settings.before_label }}" class="sitsel-before-image" style="clip-path: {{ clipPath }};">

        <div class="sitsel-divider" style="{{ dividerPos }}">
            <div class="sitsel-handle">
                {{{ iconSvg }}}
            </div>
        </div>

        <# if ( settings.show_labels === 'yes' ) { #>
            <# if ( settings.before_label ) { #>
                <div class="sitsel-label before">{{ settings.before_label }}</div>
            <# } #>
            <# if ( settings.after_label ) { #>
                <div class="sitsel-label after">{{ settings.after_label }}</div>
            <# } #>
        <# } #>
    </div>
    <script>
        (function() {
            if (typeof SitselBeforeAfterEditor !== 'undefined') {
                SitselBeforeAfterEditor.initEditorSlider('{{ uniqueId }}');
            }
        })();
    </script>
<?php
}
}
