<?php
    $builderHelper = $this->helper('MGS\Fbuilder\Helper\Builder');
    $iconClass = $this->getFbuilderIcon();
    $title = $this->getFbuilderSubtitle();
    $description = $this->getFbuilderTextContent();
    $style = $this->getStyle();
    $iconWidth = $this->getWidth();
    $lineHeight = $height = 0;
    $width = 'auto';
    $borderRaudius = 'unset';
    $marginright = '5px';
    
    $icon_background = $this->getIconBackground();
    
    $icon_font_size = 55;
if ($this->getIconFontSize()!='') {
    $icon_font_size = $this->getIconFontSize();
}
    
    $lineHeight = $height = $icon_font_size;
    
    $border = $this->getBorder();
    $border_width = $this->getBorderWidth();
    
if ($icon_background!='') {
    $height = $lineHeight = $icon_font_size + 30;
    $borderRaudius = '50%';
    $width = $height.'px';
    $marginright = '10px';
}
    
if ($border!='' && $border_width!='') {
    $height = $icon_font_size + 30 + $border_width + $border_width;
    $lineHeight = $height - $border_width - $border_width;
    $borderRaudius = '50%';
    $width = $height.'px';
    $marginright = '10px';
}
    
if ($iconWidth!='') {
    $height = $iconWidth;
    $width = $height.'px';
    if ($border!='' && $border_width!='') {
        $lineHeight = $height - $border_width - $border_width;
    } else {
        $lineHeight = $height;
    }
}
    
    $icon_color = $this->getIconColor();
    
    $subtitle_font_size = $this->getSubtitleFontSize();
    $subtitle_font_color = $this->getSubtitleFontColor();
    $desc_font_size = $this->getDescFontSize();
    $box_border = $this->getBoxBorder();
    $number_color = $this->getNumberColor();
    $number_font_size = $this->getNumberFontSize();
    $number_from = $this->getNumberFrom();
    $number_to = $this->getNumberTo();
    $duration = $this->getDuration();
    $separators = $this->getSeparators();
    $blockId = 'count'.rand() . time();
?>

<div class="counter-block">
    <div class="mgs-counter-box box-<?php echo $this->getStyle() ?>" style="<?php if ($box_border!=''): ?>border:1px solid <?php echo $box_border ?>; padding:20px<?php endif ?>">
        <?php if ($iconClass!=''): ?>
            <div class="icon-wrapper" style="<?php if ($icon_font_size!=''):?>font-size:<?php echo $icon_font_size ?>px;<?php endif ?><?php if ($icon_color!=''):?>color:<?php echo $icon_color ?>;<?php endif ?><?php if ($icon_background!=''):?>background:<?php echo $icon_background ?>;<?php endif ?><?php if ($border!='' && $border_width!=''): ?>border:<?php echo $border_width ?>px solid <?php echo $border ?>;<?php endif ?>width:<?php echo $width ?>;<?php if ($height!=0): ?>height:<?php echo $height ?>px;<?php endif ?><?php if ($lineHeight!=0): ?>line-height:<?php echo $lineHeight ?>px;<?php endif ?>border-radius:<?php echo $borderRaudius ?>;<?php if ($this->getStyle()=='horizontal'): ?>margin-right:<?php echo $marginright ?>;<?php endif ?><?php if (($this->getStyle()!='horizontal') && (($icon_background!='') || ($border!='' && $border_width!=''))): ?>margin-bottom:15px;<?php endif ?>">
                <span class="<?php echo $builderHelper->decodeHtmlTag($iconClass) ?>"></span>
            </div>
        <?php endif ?>
        <div class="counter-box" style="<?php if ($this->getStyle()=='horizontal'): ?>line-height:<?php echo $lineHeight ?>px<?php endif ?>">
            <span class="number" id="<?php echo $blockId ?>" style="<?php if ($number_font_size!=''):?>font-size:<?php echo $number_font_size ?>px;<?php endif ?><?php if ($number_color!=''):?>color:<?php echo $number_color ?>;<?php endif ?>"><?php echo $number_to ?></span>
            
            <?php if ($title!=''): ?>
                <span class="subtitle" style="<?php if ($subtitle_font_size!=''):?>font-size:<?php echo $subtitle_font_size ?>px;<?php endif ?><?php if ($subtitle_font_color!=''):?>color:<?php echo $subtitle_font_color ?>;<?php endif ?>"><?php echo $builderHelper->decodeHtmlTag($title) ?></span>
            <?php endif ?>
        </div>
        
        <?php if ($description!=''): ?>
            <div class="content"<?php if ($desc_font_size!=''): ?> style="font-size:<?php echo $desc_font_size ?>px"<?php endif ?>><?php echo $builderHelper->decodeHtmlTag($description) ?></div>
        <?php endif ?>
    </div>
    
    
</div>
<script type="text/javascript">
    require([
        'jquery',
    ], function(jQuery){
        (function($) {
            $(document).ready(function(){
                $('#<?php echo $blockId ?>').prop('Counter',<?php echo $number_from ?>).animate({
                    Counter: $('#<?php echo $blockId ?>').text()
                }, {
                    duration: <?php echo $duration ?>,
                    easing: 'swing',
                    step: function (now) {
                        <?php if ($separators!=''): ?>
                        $('#<?php echo $blockId ?>').text(Math.ceil(now).toString().replace(/\B(?=(\d{3})+(?!\d))/g, "<?php echo $separators ?>"));
                        <?php else: ?>
                            $('#<?php echo $blockId ?>').text(Math.ceil(now));
                        <?php endif ?>
                    }
                });
            });
        })(jQuery);
    });
</script>