<?php
    $widget->add_render_attribute( 'counter', [
        'class' => 'pxl-number--value '.$settings['effect'],
        'data-duration' => $settings['duration'],
        'data-startnumber' => $settings['starting_number'],
        'data-endnumber' => $settings['ending_number'],
        'data-to-value' => $settings['ending_number'],
        'data-delimiter' => $settings['thousand_separator_char'],
    ]); 
    $is_cubes = (isset($settings['cubes']) && !empty($settings['cubes']) && count($settings['cubes'])) || false;
    $hidden_xs = (!empty($settings['hidden_xs'])) ? 'pxl-hidden-xs' : '';
    $hidden_sm = (!empty($settings['hidden_sm'])) ? 'pxl-hidden-sm' : '';
    $hidden_md = (!empty($settings['hidden_md'])) ? 'pxl-hidden-md' : '';
    $hidden_lg = (!empty($settings['hidden_lg'])) ? 'pxl-hidden-lg' : '';
    $hidden_xl = (!empty($settings['hidden_xl'])) ? 'pxl-hidden-xl' : '';
    $hidden_xxl = (!empty($settings['hidden_xxl'])) ? 'pxl-hidden-xxl' : '';
    $cube_responsive = $hidden_xs.' '.$hidden_sm.' '.$hidden_md.' '.$hidden_lg.' '.$hidden_xl.' '.$hidden_xxl;   
?>

<div class="pxl-counter pxl-counter1">
    <div class="pxl-item--container">
        <div class="pxl-item--inner">
            <?php if($is_cubes) : ?>
                <?php foreach($settings['cubes'] as $cube) : ?>
                    <svg class="pxl-item--cube <?php echo esc_attr($cube['cube_position'].' '.$cube_responsive); ?>" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="2.5" y="2.5" width="11" height="11" transform="rotate(45 7.5 7.5)" fill="#4AAB3D">
                            <?php if($cube['cube_effect'] === 'spin') : ?>
                                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 7.5 7.5" to="360 7.5 7.5" dur="5s" repeatCount="indefinite"/>
                            <?php endif;?>
                        </rect>
                    </svg>
                <?php endforeach; ?>
            <?php endif; ?>
            <div class="pxl-item--group">
                <div class="pxl-item--number">
                    <?php if(!empty($settings['prefix'])) : ?>
                        <span class="pxl-item--prefix"><?php pxl_print_html($settings['prefix']); ?></span>
                    <?php endif; ?>
                    <span 
                        <?php pxl_print_html($widget->get_render_attribute_string( 'counter' )); ?>>
                        <?php echo esc_html($settings['starting_number']); ?>
                    </span>
                    <?php if(!empty($settings['suffix'])) : ?>
                        <span class="pxl-item--suffix"><?php pxl_print_html($settings['suffix']); ?></span>
                    <?php endif; ?>
                </div>
                <?php if(!empty($settings['title'])) : ?>
                    <div class="pxl-item--title"><?php pxl_print_html($settings['title']); ?></div>
                <?php endif; ?>
            </div>
            <div class="pxl-item--desc el-empty">
                <?php echo esc_html($settings['desc']); ?>
            </div>
        </div>
    </div>
</div>