<?php 
/**
* @package   Shortcode Ultimate
* @author    BdThemes http://www.bdthemes.com
* @copyright Copyright (C) BdThemes Ltd
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
*/
defined( '_JEXEC' ) or die( 'Restricted access' );

class Su_Shortcode_flip_countup extends Su_Shortcodes {

    function __construct() {
        parent::__construct();
    }

    public static function flip_countup($atts = null, $content = null) {
        $atts = su_shortcode_atts(array(
            'datetime'      => '2017-03-27T14:15:00', // example: 2017-03-27T14:15:00
            'count_size'    => 'default',  // default, medium, small, large
            'count_color'   => 'dark',  // dark, light
            'text'          => 'dark', // dark, light
            'time_name'     => 'yes',  // yes, no
            'prefix'        => '',
            'suffix'        => '',
            'layout'        => 'horizontal', // horizontal, vertical
            'align'         => 'left', // left, right, center
            'scroll_reveal' => '',
            'class'         => ''
        ), $atts, 'flip_countup');

        $id = uniqid('sufcu_');
        $output       = [];
        $tick_class   = ['tick'];
        $classes      = array('su-countup');
        $classes[]      = ($atts['align']!='') ? 'su-align-'.$atts['align'] : '';
        $classes[]      = ($atts['text']!='') ? 'su-text-'.$atts['text'] : '';
        $classes[]      = ($atts['layout']!='') ? 'su-layout-'.$atts['layout'] : '';
        
        $tick_class[] = ($atts['count_size']) ? 'tick-'.$atts['count_size'] : 'tick-default';
        $tick_class[] = ($atts['count_color']) ? 'tick-'.$atts['count_color'] : '';

        $settings ='
            <script>
                "use strict";
                function '.$id.'Init(tick) {
                    var nextYear = "'.$atts['datetime'].'";
                    var counter = Tick.count.up(nextYear);
                    counter.onupdate = function(value) {
                        tick.value = value;
                    };
                }
            </script>
        ';

        $output[] = '<div class="'.su_acssc($classes).'">';
            $output[] = '<div class="">';

                if($atts['datetime']!='') {
                    if ($atts['prefix'] != '') {
                        $output[] ='<div><h3 class="su_prefix-text">'.$atts['prefix'].'</h3></div>';
                    }

                    $output[] ='<div class="'.su_acssc($tick_class).'" data-did-init="'.$id.'Init">';
                        $output[] ='<div data-layout="'.$atts['layout'].' '.$atts['align'].'" data-repeat="true"
                                        data-transform="rotate( 
                                            transform( plural(day, days), input() ), 
                                            transform( plural(hour, hours), input() ),
                                            transform( plural(minute, minutes), input() ),
                                            transform( plural(second, seconds), input() )
                                         ) -> map( keys( label, value ) )">';

                            $output[] ='<div class="tick-group">';
                                $output[] = ($atts['time_name'] == 'yes') ? '<div data-key="label" data-view="text"></div>' : '';

                                $output[] ='<div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
                                    <span data-view="flip"></span>';
                                $output[] ='</div>';
                            $output[] ='</div>';
                        $output[] ='</div>';
                    $output[] ='</div>';

                    if ($atts['suffix'] != '') {
                        $output[] ='<div><h3 class="su_suffix-text">'.$atts['suffix'].'</h3></div>';
                    }

                    $output[] = $settings;
                    
                }
                else {
                    $output[] = '<strong>You did not enter any date of custom date.</strong>';
                }
            $output[] ='</div>';
        $output[] ='</div>';

        suAsset::addFile('css', 'tick.css');
        suAsset::addFile('css', 'flip-countup.css', __FUNCTION__);
        suAsset::addFile('js', 'tick.js');

        return implode("\n", $output);
    }
}
