<?php
/**
 * Stats Counter Widget
 * 
 * Animated number counters with viewport detection and scroll triggers.
 * 
 * @package AdMoreWidgetsSuite
 * @since   1.0.0
 */

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

class EPPRO_Stats_Counter_Widget extends EPPRO_Base_Widget {

    public function get_name(): string {
        return 'eppro-stats-counter';
    }

    public function get_title(): string {
        return __( 'Stats Counter', 'admore-widgets-suite' );
    }

    public function get_icon(): string {
        return 'eicon-counter';
    }

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

    public function get_keywords(): array {
        return [ 'counter', 'stats', 'number', 'animated', 'count', 'statistics' ];
    }

    public function get_script_depends(): array {
        return [ 'eppro-stats-counter' ];
    }

    public function get_style_depends(): array {
        return [ 'eppro-stats-counter' ];
    }

    protected function register_controls(): void {
        
        // ═══════════════════════════════════════════════════════════════
        // CONTENT TAB
        // ═══════════════════════════════════════════════════════════════
        
        $this->start_controls_section(
            'section_counters',
            [
                'label' => __( 'Counters', 'admore-widgets-suite' ),
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'icon',
            [
                'label' => __( 'Icon', 'admore-widgets-suite' ),
                'type'  => \Elementor\Controls_Manager::ICONS,
                'default' => [
                    'value'   => 'fas fa-star',
                    'library' => 'fa-solid',
                ],
            ]
        );

        $repeater->add_control(
            'from_number',
            [
                'label'   => __( 'Start Number', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'default' => 0,
                'min'     => 0,
                'step'    => 1,
            ]
        );

        $repeater->add_control(
            'number',
            [
                'label'   => __( 'Target Number', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'default' => 1000,
                'min'     => 0,
                'step'    => 1,
            ]
        );

        $repeater->add_control(
            'prefix',
            [
                'label'       => __( 'Prefix', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => '',
                'placeholder' => '$',
            ]
        );

        $repeater->add_control(
            'suffix',
            [
                'label'       => __( 'Suffix', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => '+',
                'placeholder' => '%',
            ]
        );

        $repeater->add_control(
            'label',
            [
                'label'       => __( 'Label', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => __( 'Happy Clients', 'admore-widgets-suite' ),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'description',
            [
                'label'       => __( 'Description', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::TEXTAREA,
                'default'     => '',
                'placeholder' => __( 'Optional description', 'admore-widgets-suite' ),
            ]
        );

        $repeater->add_control(
            'item_link',
            [
                'label'       => __( 'Link', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::URL,
                'placeholder' => 'https://example.com',
                'dynamic'     => [ 'active' => true ],
                'separator'   => 'before',
            ]
        );

        $this->add_control(
            'counters',
            [
                'label'       => __( 'Counter Items', 'admore-widgets-suite' ),
                'type'        => \Elementor\Controls_Manager::REPEATER,
                'fields'      => $repeater->get_controls(),
                'default'     => [
                    [
                        'number' => 500,
                        'suffix' => '+',
                        'label'  => __( 'Projects Completed', 'admore-widgets-suite' ),
                        'icon'   => [ 'value' => 'fas fa-rocket', 'library' => 'fa-solid' ],
                    ],
                    [
                        'number' => 1200,
                        'suffix' => '+',
                        'label'  => __( 'Happy Clients', 'admore-widgets-suite' ),
                        'icon'   => [ 'value' => 'fas fa-users', 'library' => 'fa-solid' ],
                    ],
                    [
                        'number' => 15,
                        'suffix' => '+',
                        'label'  => __( 'Years Experience', 'admore-widgets-suite' ),
                        'icon'   => [ 'value' => 'fas fa-award', 'library' => 'fa-solid' ],
                    ],
                ],
                'title_field' => '{{{ label }}}',
            ]
        );

        $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(
            'icon_position',
            [
                'label'   => __( 'Icon Position', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                    'top'  => [ 'title' => __( 'Top',  'admore-widgets-suite' ), 'icon' => 'eicon-v-align-top' ],
                    'left' => [ 'title' => __( 'Left', 'admore-widgets-suite' ), 'icon' => 'eicon-h-align-left' ],
                ],
                'default'      => 'top',
                'prefix_class' => 'eppro-sc--icon-pos-',
            ]
        );

        $this->add_control(
            'counter_style',
            [
                'label'   => __( 'Style', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::SELECT,
                'default' => 'default',
                'options' => [
                    'default'  => __( 'Default (Card)', 'admore-widgets-suite' ),
                    'minimal'  => __( 'Minimal', 'admore-widgets-suite' ),
                    'bordered' => __( 'Bordered', 'admore-widgets-suite' ),
                    'gradient' => __( 'Gradient', 'admore-widgets-suite' ),
                ],
            ]
        );

        $this->add_responsive_control(
            'columns',
            [
                'label'   => __( 'Columns', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::SELECT,
                'default' => '3',
                'tablet_default' => '2',
                'mobile_default' => '1',
                'options' => [
                    '1' => '1',
                    '2' => '2',
                    '3' => '3',
                    '4' => '4',
                    '5' => '5',
                    '6' => '6',
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-stats-counters' => 'grid-template-columns: repeat({{VALUE}}, 1fr);',
                ],
            ]
        );

        $this->add_control(
            'duration',
            [
                'label'   => __( 'Animation Duration (ms)', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'default' => 2000,
                'min'     => 500,
                'max'     => 5000,
                'step'    => 100,
            ]
        );

        $this->add_control(
            'delay',
            [
                'label'   => __( 'Animation Delay (ms)', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'default' => 0,
                'min'     => 0,
                'max'     => 3000,
                'step'    => 100,
            ]
        );

        $this->add_control(
            'easing',
            [
                'label'   => __( 'Easing Function', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::SELECT,
                'default' => 'easeOutExpo',
                'options' => [
                    'linear'        => __( 'Linear', 'admore-widgets-suite' ),
                    'easeInQuad'    => __( 'Ease In Quad', 'admore-widgets-suite' ),
                    'easeOutQuad'   => __( 'Ease Out Quad', 'admore-widgets-suite' ),
                    'easeInOutQuad' => __( 'Ease In Out Quad', 'admore-widgets-suite' ),
                    'easeOutExpo'   => __( 'Ease Out Expo', 'admore-widgets-suite' ),
                ],
            ]
        );

        $this->add_control(
            'decimal_places',
            [
                'label'   => __( 'Decimal Places', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'default' => 0,
                'min'     => 0,
                'max'     => 3,
            ]
        );

        $this->add_control(
            'separator',
            [
                'label'        => __( 'Thousand Separator', '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(
            'separator_char',
            [
                'label'     => __( 'Separator Character', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::SELECT,
                'default'   => ',',
                'options'   => [
                    ','  => __( 'Comma (1,000)', 'admore-widgets-suite' ),
                    '.'  => __( 'Dot (1.000)', 'admore-widgets-suite' ),
                    ' '  => __( 'Space (1 000)', 'admore-widgets-suite' ),
                    '\'' => __( "Apostrophe (1'000)", 'admore-widgets-suite' ),
                ],
                'condition' => [ 'separator' => 'yes' ],
            ]
        );

        $this->add_control(
            'trigger_on_scroll',
            [
                'label'        => __( 'Trigger on Scroll', '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'  => __( 'Start counting when element enters viewport', 'admore-widgets-suite' ),
            ]
        );

        $this->end_controls_section();

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

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

        $this->add_responsive_control(
            'item_spacing',
            [
                'label'      => __( 'Spacing Between Items', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 20,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-stats-counters' => 'gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

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

        $this->add_group_control(
            \Elementor\Group_Control_Background::get_type(),
            [
                'name'     => 'item_background',
                'selector' => '{{WRAPPER}} .eppro-stats-counter-item',
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name'     => 'item_border',
                'selector' => '{{WRAPPER}} .eppro-stats-counter-item',
            ]
        );

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

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'item_box_shadow',
                'selector' => '{{WRAPPER}} .eppro-stats-counter-item',
            ]
        );

        $this->add_control(
            'item_alignment',
            [
                'label'   => __( 'Alignment', 'admore-widgets-suite' ),
                'type'    => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __( 'Left', 'admore-widgets-suite' ),
                        'icon'  => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => __( 'Center', 'admore-widgets-suite' ),
                        'icon'  => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => __( 'Right', 'admore-widgets-suite' ),
                        'icon'  => 'eicon-text-align-right',
                    ],
                ],
                'default'   => 'center',
                'selectors' => [
                    '{{WRAPPER}} .eppro-stats-counter-item' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

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

        $this->add_control(
            'icon_shape',
            [
                'label'        => __( 'Icon Shape', 'admore-widgets-suite' ),
                'type'         => \Elementor\Controls_Manager::SELECT,
                'default'      => 'none',
                'options'      => [
                    'none'    => __( 'None (icon only)', 'admore-widgets-suite' ),
                    'circle'  => __( 'Circle', 'admore-widgets-suite' ),
                    'square'  => __( 'Square', 'admore-widgets-suite' ),
                    'rounded' => __( 'Rounded', 'admore-widgets-suite' ),
                ],
                'prefix_class' => 'eppro-sc--icon-shape-',
                'separator'    => 'after',
            ]
        );

        $this->add_control(
            'icon_bg_color',
            [
                'label'     => __( 'Icon Background Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => '#f0f4ff',
                'selectors' => [ '{{WRAPPER}} .eppro-stats-counter-icon' => 'background-color: {{VALUE}};' ],
                'condition' => [ 'icon_shape!' => 'none' ],
            ]
        );

        $this->add_responsive_control(
            'icon_size',
            [
                'label'      => __( 'Size', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 40,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-stats-counter-icon' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .eppro-stats-counter-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'icon_color',
            [
                'label'     => __( 'Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'default'   => EPPRO_Elementor_Helper::brand_color(),
                'selectors' => [
                    '{{WRAPPER}} .eppro-stats-counter-icon' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .eppro-stats-counter-icon svg' => 'fill: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_spacing',
            [
                'label'      => __( 'Bottom Spacing', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'default' => [
                    'size' => 12,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-stats-counter-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

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

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name'     => 'number_typography',
                'selector' => '{{WRAPPER}} .eppro-stats-counter-number-wrapper',
            ]
        );

        $this->add_control(
            'number_color',
            [
                'label'     => __( 'Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .eppro-stats-counter-number-wrapper' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'number_spacing',
            [
                'label'      => __( 'Bottom Spacing', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'default' => [
                    'size' => 8,
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-stats-counter-number-wrapper' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

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

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

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

        $this->end_controls_section();

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

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name'     => 'description_typography',
                'selector' => '{{WRAPPER}} .eppro-stats-counter-description',
            ]
        );

        $this->add_control(
            'description_color',
            [
                'label'     => __( 'Color', 'admore-widgets-suite' ),
                'type'      => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .eppro-stats-counter-description' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control( 'description_bg_color', [
            'label'     => __( 'Background Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-stats-counter-description' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_responsive_control( 'description_alignment', [
            'label'     => __( 'Alignment', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::CHOOSE,
            'options'   => [
                'left'   => [ 'title' => __( 'Left', 'admore-widgets-suite' ),   'icon' => 'eicon-text-align-left' ],
                'center' => [ 'title' => __( 'Center', 'admore-widgets-suite' ), 'icon' => 'eicon-text-align-center' ],
                'right'  => [ 'title' => __( 'Right', 'admore-widgets-suite' ),  'icon' => 'eicon-text-align-right' ],
            ],
            'selectors' => [ '{{WRAPPER}} .eppro-stats-counter-description' => 'text-align: {{VALUE}};' ],
            'separator' => 'before',
        ] );

        $this->add_responsive_control( 'description_max_width', [
            'label'      => __( 'Max Width', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 50, 'max' => 600 ], '%' => [ 'min' => 10, 'max' => 100 ] ],
            'size_units' => [ 'px', '%' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-stats-counter-description' => 'max-width: {{SIZE}}{{UNIT}}; margin-left: auto; margin-right: auto;' ],
        ] );

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

        $this->add_control( 'description_border_radius', [
            'label'     => __( 'Border Radius', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SLIDER,
            'range'     => [ 'px' => [ 'min' => 0, 'max' => 50 ] ],
            'selectors' => [ '{{WRAPPER}} .eppro-stats-counter-description' => 'border-radius: {{SIZE}}px;' ],
        ] );

        $this->add_responsive_control(
            'description_spacing',
            [
                'label'      => __( 'Top Spacing', 'admore-widgets-suite' ),
                'type'       => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [
                    'px' => [
                        'min' => 0,
                        'max' => 30,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .eppro-stats-counter-description' => 'margin-top: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        
        if ( empty( $settings['counters'] ) ) {
            if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
                echo '<div class="eppro-editor-placeholder">
                    <svg width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" class="eppro-editor-placeholder__icon"><path d="M3 3v18h18"/><path d="m7 16 4-4 4 4 4-4"/></svg>
                    <p class="eppro-editor-placeholder__title">' . esc_html__( 'Stats Counter', 'admore-widgets-suite' ) . '</p>
                    <p class="eppro-editor-placeholder__desc">' . esc_html__( 'Add counter items in the Content tab to display statistics.', 'admore-widgets-suite' ) . '</p>
                </div>';
            }
            return;
        }

        $sep_char = 'yes' === ( $settings['separator'] ?? '' ) ? ( $settings['separator_char'] ?? ',' ) : '';

        $counter_settings = [
            'duration'    => $settings['duration'],
            'delay'       => $settings['delay'],
            'easing'      => $settings['easing'],
            'decimals'    => $settings['decimal_places'],
            'separator'   => $sep_char,
            'onScroll'    => ( $settings['trigger_on_scroll'] ?? '' ) === 'yes',
        ];

        $counter_style  = sanitize_key( $settings['counter_style'] ?? 'default' );
        $counters_class = 'eppro-stats-counters';
        if ( 'default' !== $counter_style ) {
            $counters_class .= ' eppro-stats-counters--' . $counter_style;
        }
        ?>
        <div class="eppro-stats-counters-wrapper" data-settings='<?php echo wp_json_encode( $counter_settings ); ?>'>
            <div class="<?php echo esc_attr( $counters_class ); ?>">
                <?php foreach ( $settings['counters'] as $index => $item ) :
                    $item_url = $item['item_link']['url'] ?? '';
                    $item_ext = ! empty( $item['item_link']['is_external'] );
                    $item_rel = $item_ext ? ' rel="noopener noreferrer"' : '';
                    $item_trg = $item_ext ? ' target="_blank"' : '';
                    $wrap_el  = $item_url ? 'a' : 'div';
                    $wrap_at  = $item_url ? ( ' href="' . esc_url( $item_url ) . '"' . $item_trg . $item_rel ) : '';
                ?>
                    <<?php echo esc_html( $wrap_el ); ?> class="eppro-stats-counter-item"<?php echo wp_kses_post( $wrap_at ); ?>>
                        <?php if ( ! empty( $item['icon']['value'] ) ) : ?>
                            <div class="eppro-stats-counter-icon">
                                <?php \Elementor\Icons_Manager::render_icon( $item['icon'], [ 'aria-hidden' => 'true' ] ); ?>
                            </div>
                        <?php endif; ?>

                        <div class="eppro-stats-counter-number-wrapper">
                            <?php if ( ! empty( $item['prefix'] ) ) : ?>
                                <span class="eppro-stats-counter-prefix"><?php echo esc_html( $item['prefix'] ); ?></span>
                            <?php endif; ?>
                            <span class="eppro-stats-counter-number"
                                  data-target="<?php echo esc_attr( $item['number'] ); ?>"
                                  data-from="<?php echo esc_attr( $item['from_number'] ?? 0 ); ?>"><?php echo esc_attr( $item['from_number'] ?? 0 ); ?></span>
                            <?php if ( ! empty( $item['suffix'] ) ) : ?>
                                <span class="eppro-stats-counter-suffix"><?php echo esc_html( $item['suffix'] ); ?></span>
                            <?php endif; ?>
                        </div>

                        <?php if ( ! empty( $item['label'] ) ) : ?>
                            <div class="eppro-stats-counter-label"><?php echo esc_html( $item['label'] ); ?></div>
                        <?php endif; ?>

                        <?php if ( ! empty( $item['description'] ) ) : ?>
                            <div class="eppro-stats-counter-description"><?php echo esc_html( $item['description'] ); ?></div>
                        <?php endif; ?>
                    </<?php echo esc_html( $wrap_el ); ?>>
                <?php endforeach; ?>
            </div>
        </div>

        <?php
    }
}