<?php
namespace Softech_Addons_for_Elementor\Widgets;
if (!defined('ABSPATH'))
    exit;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;

class sitsel_image_accordion extends Widget_Base
{

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

    public function get_title()
    {
        return __('SITS Image Accordion ', 'softech-addons-for-elementor');
    }

    public function get_icon()
    {
        return 'eicon-gallery-grid';
    }

    public function get_categories()
    {
        return ['sits-category']; // Change to your category slug
    }

    protected function _register_controls()
    {
        $this->start_controls_section(
            'content_section',
            [
                'label' => __('Add Accordion items ', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new Repeater();

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

        $repeater->add_control(
            'title',
            [
                'label' => __('Title', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Title Here', 'softech-addons-for-elementor'),
            ]
        );

        $repeater->add_control(
            'description',
            [
                'label' => __('Description', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __('Description here', 'softech-addons-for-elementor'),
                'input_attrs' => [
                    'maxlength' => 150, 
                ],
                'description' => __('Maximum 150 characters allowed.', 'softech-addons-for-elementor'),
            ]
        );

        $repeater->add_control(
            'button_text',
            [
                'label' => __('Button Text', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Learn More', 'softech-addons-for-elementor'),
            ]
        );

        $repeater->add_control(
            'button_link',
            [
                'label' => __('Button Link', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::URL,
                'placeholder' => __('https://your-link.com', 'softech-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'items',
            [
                'label' => __('Accordion Items', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'max' => 7,
                'default' => [
                    ['title' => __('Item 1', 'softech-addons-for-elementor')],
                    ['title' => __('Item 2', 'softech-addons-for-elementor')],
                    ['title' => __('Item 3', 'softech-addons-for-elementor')],
                ],
            ]
        );
        
        $this->add_control(
            'items_notice',
            [
                'type' => Controls_Manager::RAW_HTML,
                'raw'  => __('Maximum 7 accordion items allowed.', 'softech-addons-for-elementor'),
            ]
        );

        $this->end_controls_section();

        // =====================
        // Layout Settings
        // =====================
        $this->start_controls_section(
            'section_layout_settings',
            [
                'label' => __('Layout Settings', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'accordion_orientation',
            [
                'label' => __('Orientation', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'default' => 'horizontal',
                'options' => [
                    'horizontal' => __('Horizontal', 'softech-addons-for-elementor'),
                    'vertical' => __('Vertical', 'softech-addons-for-elementor'),
                ],
            ]
        );

        $this->add_control(
            'accordion_trigger',
            [
                'label' => __('Trigger Action', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'default' => 'hover',
                'options' => [
                    'hover' => __('On Hover', 'softech-addons-for-elementor'),
                    'click' => __('On Click', 'softech-addons-for-elementor'),
                ],
            ]
        );

        $this->add_control(
            'default_active_item',
            [
                'label' => __('Default Active Item', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::NUMBER,
                'default' => 1,
                'min' => 1,
                'max' => 7,
                'description' => __('Which item should be active by default? (1-7)', 'softech-addons-for-elementor'),
            ]
        );

        $this->end_controls_section();

        // style tabs
        /* ---------------------
         * STYLE TAB
         * -------------------- */
        // =====================
        // Accordion Container Style
        // =====================
        $this->start_controls_section(
            'section_container_style',
            [
                'label' => __('Accordion Container', 'softech-addons-for-elementor'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'accordion_gap',
            [
                'label' => __('Gap Between Items', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'range' => [
                    'px' => ['min' => 0, 'max' => 100],
                    '%' => ['min' => 0, 'max' => 10],
                ],
                'default' => [
                    'size' => 20,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-image-accordion' => 'gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        
        $this->add_responsive_control(
    'accordion_height_min',
    [
        'label' => __('Accordion Min Height', 'softech-addons-for-elementor'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', '%', 'vh'],
        'range' => [
            'px' => [
                'min' => 100,
                'max' => 2000,
                'step' => 1,
            ],
            '%' => [
                'min' => 10,
                'max' => 100,
            ],
            'vh' => [
                'min' => 10,
                'max' => 100,
            ],
        ],
        'default' => [
            'unit' => 'px',
            'size' => 300,
        ],
        'selectors' => [
            '{{WRAPPER}} .sitsel-image-accordion.sitsel-horizontal .sitsel-item' => 'min-height: {{SIZE}}{{UNIT}};',
        //    '{{WRAPPER}} .sitsel-image-accordion.sitsel-vertical .sitsel-item' => 'height: {{SIZE}}{{UNIT}};'
            // '{{WRAPPER}} .sitsel-image-accordion.sitsel-vertical .sitsel-item'   => 'min-height: {{SIZE}}{{UNIT}};',
        ],
    ]
);

		
		  $this->add_responsive_control(
    'accordion_height',
    [
        'label' => __('Accordion Height', 'softech-addons-for-elementor'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', '%', 'vh'],
        'range' => [
            'px' => [
                'min' => 100,
                'max' => 2000,
                'step' => 1,
            ],
            '%' => [
                'min' => 10,
                'max' => 100,
            ],
            'vh' => [
                'min' => 10,
                'max' => 100,
            ],
        ],
        'default' => [
            'unit' => 'px',
            'size' => 400,
        ],
        'selectors' => [
            '{{WRAPPER}} .sitsel-image-accordion.sitsel-horizontal .sitsel-item' => 'height: {{SIZE}}{{UNIT}};',
            '{{WRAPPER}} .sitsel-image-accordion.sitsel-vertical .sitsel-item'   => 'height: {{SIZE}}{{UNIT}};',
        ],
    ]
);

		
		// ADD THIS NEW CONTROL HERE:
$this->add_responsive_control(
    'accordion_vertical_height',
    [
        'label' => __('Vertical Layout Height', 'softech-addons-for-elementor'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', '%', 'vh'],
        'range' => [
            'px' => [
                'min' => 300,
                'max' => 2000,
            ],
            '%' => [
                'min' => 10,
                'max' => 100,
            ],
            'vh' => [
                'min' => 10,
                'max' => 100,
            ],
        ],
        'default' => [
            'unit' => '%',
            'size' => 100,
        ],
        'selectors' => [
            '{{WRAPPER}} .sitsel-image-accordion.sitsel-vertical' => 'height: {{SIZE}}{{UNIT}};',
        ],
        'condition' => [
            'accordion_orientation' => 'vertical',
        ],
    ]
);
$this->add_responsive_control(
    'accordion_aspect_ratio',
    [
        'label' => __('Aspect Ratio', 'softech-addons-for-elementor'),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => '16/9',
        'placeholder' => 'e.g. 16/9, 4/3, 1/1',
        'selectors' => [
            '{{WRAPPER}} .sitsel-image-accordion.sitsel-vertical ' => 'aspect-ratio: {{VALUE}};',
        ],
          'condition' => [
            'accordion_orientation' => 'vertical',
        ],
    ]
);


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

        $this->end_controls_section();

        // =====================
        // Accordion Item Style
        // =====================
        $this->start_controls_section(
            'section_item_style',
            [
                'label' => __('Accordion Item', 'softech-addons-for-elementor'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'item_radius',
            [
                'label' => __('Border Radius', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-image-accordion .sitsel-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        
        // image Overlay Animation
        $this->add_control(
            'sitsel_item_overlay_animation',
            [
                'label' => esc_html__('Overlay Animation', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'fade-in',
                'options' => [
                    'none' => __('None', 'softech-addons-for-elementor'),
                    'fade-in' => __('Fade In', 'softech-addons-for-elementor'),
                    'fade-out' => __('Fade Out', 'softech-addons-for-elementor'),
                    'slide-up' => __('Slide Up', 'softech-addons-for-elementor'),
                ],
            ]
        );
        
        // Overlay Background Color
        $this->add_control(
            'sitsel_overlay_background_color',
            [
                'label' => esc_html__('Overlay Background Color', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => 'rgba(0, 0, 0, 0.4)',
                'selectors' => [
                    '{{WRAPPER}} .sitsel-image-overlay' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        
        // Overlay Transition Duration
        $this->add_control(
            'sitsel_overlay_transition_duration',
            [
                'label' => esc_html__('Transition Duration (s)', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'default' => [
                    'size' => 0.4,
                ],
                'range' => [
                    'px' => [
                        'min' => 0.1,
                        'max' => 5,
                        'step' => 0.1,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-image-overlay' => 'transition-duration: {{SIZE}}s;',
                ],
            ]
        );
        
        $this->add_responsive_control(
            'item_alignment',
            [
                'label' => __('Content Alignment', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __('Left', 'softech-addons-for-elementor'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => __('Center', 'softech-addons-for-elementor'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => __('Right', 'softech-addons-for-elementor'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'default' => 'left',
                'selectors' => [
                    '{{WRAPPER}} .sitsel-content' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        /* ---------------------
         * TITLE STYLE
         * -------------------- */
        $this->start_controls_section(
            'section_style_title',
            [
                'label' => __('Title', 'softech-addons-for-elementor'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'title_color',
            [
                'label' => __('Color', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-content h3' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography',
                'selector' => '{{WRAPPER}} .sitsel-content h3',
            ]
        );

        $this->end_controls_section();

        /* ---------------------
         * DESCRIPTION STYLE
         * -------------------- */
        $this->start_controls_section(
            'section_style_description',
            [
                'label' => __('Description', 'softech-addons-for-elementor'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'description_color',
            [
                'label' => __('Color', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-content p' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'description_typography',
                'selector' => '{{WRAPPER}} .sitsel-content p',
            ]
        );

        $this->end_controls_section();

        /* ---------------------
         * BUTTON STYLE
         * -------------------- */
        $this->start_controls_section(
            'section_style_button',
            [
                'label' => __('Button', 'softech-addons-for-elementor'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        /* Typography */
        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'button_typography',
                'selector' => '{{WRAPPER}} .sitsel-btn',
            ]
        );

        /* Tabs */
        $this->start_controls_tabs('tabs_button_style');

        /* -------------------
         * NORMAL TAB
         * ------------------- */
        $this->start_controls_tab(
            'tab_button_normal',
            [
                'label' => __('Normal', 'softech-addons-for-elementor'),
            ]
        );

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

        $this->add_control(
            'button_bg_color',
            [
                'label' => __('Background Color', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        /* Border */
        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'button_border',
                'selector' => '{{WRAPPER}} .sitsel-btn',
            ]
        );

        $this->end_controls_tab();

        /* -------------------
         * HOVER TAB
         * ------------------- */
        $this->start_controls_tab(
            'tab_button_hover',
            [
                'label' => __('Hover', 'softech-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'button_text_color_hover',
            [
                'label' => __('Text Color', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn:hover' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'button_bg_color_hover',
            [
                'label' => __('Background Color', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn:hover' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'button_border_color_hover',
            [
                'label' => __('Border Color', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn:hover' => 'border-color: {{VALUE}};',
                ],
                'condition' => [
                    'button_border_border!' => 'none',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        /* Border Radius */
        $this->add_responsive_control(
            'button_border_radius',
            [
                'label' => __('Border Radius', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn' =>
                        'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        /* Padding */
        $this->add_responsive_control(
            'button_padding',
            [
                'label' => __('Padding', 'softech-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn' =>
                        'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

   public function get_style_depends()
{
    // Only register once
    if (!wp_style_is('sitsel-image-accordion', 'registered')) {
        wp_register_style(
            'sitsel-image-accordion',
            false,
            [],
            '1.0.2'
        );

        // Add inline CSS only once
        $custom_css = "
        .sitsel-image-accordion {
            display: flex;
            width: 100%;
            overflow: hidden;
            border-radius: 15px;
        }
        
        .sitsel-image-accordion.sitsel-horizontal {
            flex-direction: row;
        }
        
        .sitsel-image-accordion.sitsel-vertical {
            flex-direction: column;
            height: auto;
        }

        .sitsel-image-accordion.sitsel-vertical .sitsel-item {
            flex: 1;
            min-height: 100px;
            transition: flex 0.3s ease-in-out;
        }

        .sitsel-image-accordion.sitsel-vertical .sitsel-item.active {
            flex: 3 1 0%;
        }
            
        .sitsel-item {
            background-size: cover;
            background-position: center;
            position: relative;
            transition: flex 0.5s ease-in-out;
            cursor: pointer;
            overflow: hidden;
        }

        .sitsel-image-accordion.sitsel-horizontal .sitsel-item {
            flex: 1;
            min-height: 400px;
            transition: flex 0.3s ease-in-out;
        }

        .sitsel-image-accordion.sitsel-horizontal .sitsel-item.active {
            flex: 3 1 0%;
        }

        .sitsel-image-accordion.sitsel-vertical .sitsel-item {
            flex: 1;
            min-height: 150px;
            transition: flex 0.3s ease-in-out;
        }

        .sitsel-image-accordion.sitsel-vertical .sitsel-item.active {
            flex: 3 1 0%;
        }
        
        .sitsel-content {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            color: #fff;
            opacity: 0;
                z-index: 1;
            visibility: hidden;
            transform: translateY(16px);
            transition: opacity 0.2s ease-in-out,
                        transform 0.2s ease-in-out;
        }
        
       .sitsel-item.active .sitsel-content {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition: opacity 0.3s ease-in-out 0.25s,
                        transform 0.3s ease-in-out 0.25s;
        }
        
        .sitsel-btn {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 16px;
            background: rgba(0,0,0,0.6);
            border-radius: 20px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
        }
        
        .sitsel-image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.2);
            opacity: 0;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
            z-index: 1;
        }

        .sitsel-item.active .sitsel-image-overlay {
            opacity: 1;
        }
        
        .sitsel-item.active.sitsel-anim-fade-in .sitsel-image-overlay {
            opacity: 1;
        }

        .sitsel-item.sitsel-anim-fade-out .sitsel-image-overlay {
            opacity: 1;
        }

        .sitsel-item.active.sitsel-anim-fade-out .sitsel-image-overlay {
            opacity: 0;
        }

        .sitsel-item.sitsel-anim-slide-up .sitsel-image-overlay {
            transform: translateY(100%);
            opacity: 0;
            transition: all 0.4s ease;
        }

        .sitsel-item.active.sitsel-anim-slide-up .sitsel-image-overlay {
            transform: translateY(0);
            opacity: 1;
        }

        @media (max-width: 767px) {
            .sitsel-image-accordion {
                flex-direction: column !important;
                height: auto;
            }
            
            .sitsel-item {
                min-height: 250px;
            }
        }
        ";
        
        wp_add_inline_style('sitsel-image-accordion', $custom_css);
    }

    return ['sitsel-image-accordion'];
}

    protected function render()
    {
        $settings = $this->get_settings_for_display();
   
        if (empty($settings['items'])) {
            return;
        }
        
        // Build animation class
        $animation_class = '';
        if (!empty($settings['sitsel_item_overlay_animation']) && $settings['sitsel_item_overlay_animation'] !== 'none') {
            $animation_class = 'sitsel-anim-' . esc_attr($settings['sitsel_item_overlay_animation']);
        }
        
        $items = array_slice($settings['items'], 0, 7);
        
        // Get orientation and trigger settings
        $orientation = !empty($settings['accordion_orientation']) ? $settings['accordion_orientation'] : 'horizontal';
        $trigger = !empty($settings['accordion_trigger']) ? $settings['accordion_trigger'] : 'hover';
        $default_active = !empty($settings['default_active_item']) ? absint($settings['default_active_item']) : 1;
        
        // Build data attributes
        $data_attrs = sprintf(
            'data-trigger="%s" data-default-active="%s"',
            esc_attr($trigger),
            esc_attr($default_active)
        );

        echo '<div class="sitsel-image-accordion sitsel-' . esc_attr($orientation) . '" ' . $data_attrs . '>';
        
        $item_index = 1;
        foreach ($items as $item) {
            $img_url = !empty($item['image']['url']) ? esc_url($item['image']['url']) : '';
            $title = !empty($item['title']) ? $item['title'] : '';
            $desc = !empty($item['description']) ? $item['description'] : '';
            $btn_text = !empty($item['button_text']) ? $item['button_text'] : '';
            $btn_link = !empty($item['button_link']['url']) ? esc_url($item['button_link']['url']) : '#';
            
            // Add active class to default item
            $active_class = ($item_index === $default_active) ? 'active' : '';

            echo '<div class="sitsel-item ' . esc_attr($animation_class) . ' ' . esc_attr($active_class) . '" style="background-image: url(' . esc_url($img_url) . ');" data-item-index="' . esc_attr($item_index) . '">';

            echo '<div class="sitsel-image-overlay"></div>';
            echo '<div class="sitsel-content">';

            if ($title) {
                echo '<h3>' . esc_html($title) . '</h3>';
            }

            if ($desc) {
                echo '<p>' . esc_html($desc) . '</p>';
            }

            if ($btn_text) {
                echo '<a href="' . esc_url($btn_link) . '" class="sitsel-btn">' . esc_html($btn_text) . '</a>';
            }

            echo '</div></div>';
            
            $item_index++;
        }
        
        echo '</div>';
    }

    public function get_script_depends()
{
    // Only register once
    if (!wp_script_is('sitsel-image-accordion', 'registered')) {
        wp_register_script(
            'sitsel-image-accordion',
            false,
            ['jquery'],
            '1.0.2',
            true
        );

        $custom_js = "
            jQuery(document).ready(function($){
                $('.sitsel-image-accordion').each(function(){
                    const accordion = \$(this);
                    const items = accordion.find('.sitsel-item');
                    const trigger = accordion.data('trigger');
                    const defaultActive = accordion.data('default-active') || 1;
                    let hoverTimer = null;
            
                    items.removeClass('active');
                    items.eq(defaultActive - 1).addClass('active');
            
                    if (trigger === 'hover') {
                        items.on('mouseenter', function(){
                            clearTimeout(hoverTimer);
                            const that = \$(this);
                            hoverTimer = setTimeout(function(){
                                items.removeClass('active');
                                that.addClass('active');
                            }, 80); // small debounce prevents flicker on fast mouse moves
                        });
                    } else if (trigger === 'click') {
                        items.on('click', function(e){
                            if (!\$(e.target).hasClass('sitsel-btn') && !\$(e.target).closest('.sitsel-btn').length) {
                                items.removeClass('active');
                                \$(this).addClass('active');
                            }
                        });
                    }
                });
            });
            ";
        
        wp_add_inline_script('sitsel-image-accordion', $custom_js);
    }

    return ['sitsel-image-accordion'];
}
}