<?php 
if ( ! defined( 'ABSPATH' ) ) {
  die( '-1' );
}

/**
 * Shortcode attributes
 * @var $atts
 * @var $title
 * @var $level
 * @var $color
 * @var $content - shortcode content
 * Shortcode class
 * @var $this WPBakeryShortCode_qk_team
 */
$level =  $color = $offset = $title = $thumb = $thumbsize = $pagination = $class = '';
$output = $after_output = '';
$atts = vc_map_get_attributes( $this->getShortcode(), $atts );
extract( $atts );
wp_enqueue_script("appear", get_template_directory_uri()."/js/jquery.appear.js",array(),false,true);
wp_enqueue_script("raphael", get_template_directory_uri()."/js/raphael-min.js",array(),false,true);
wp_enqueue_script("DevSolutionSkill", get_template_directory_uri()."/js/DevSolutionSkill.min.js",array('jquery'),false,true);

?>

<div class="col-md-4 col-sm-4">
    <div class="skills-bar-<?php echo esc_attr($title); ?>">
    <h3><?php echo esc_html($title); ?></h3>
    <div id="circle<?php echo esc_attr($title); ?>" class="circle-skill" data-percent="<?php echo esc_attr($level); ?>" data-background="<?php echo esc_attr($color); ?>"></div>
    </div>
</div>

<script>
    (function($){
    "use strict";
    
        $(document).ready(function(){
            $('.skills-bar-<?php echo esc_js($title); ?>').appear(function() {
                DevSolutionSkill.init('circle<?php echo esc_js($title); ?>');
            });
        });
    })(jQuery);
</script>