<?php function thb_counter( $atts, $content = null ) {
	$thousand_separator = true;
	$atts = vc_map_get_attributes( 'thb_counter', $atts );
	extract( $atts );
	$speed = $speed === '' ? 2000 : $speed;
	$out = '';
	$element_id = uniqid('thb-counter-');
	$description = vc_value_from_safe( $description );

	$el_class[] = 'thb-counter';
	$el_class[] = $style;
	$el_class[] = $alignment;

	$image = '';
	if ($icon_image) {
		$img = wpb_getImageBySize( array( 'attach_id' => $icon_image, 'thumb_size' => 'full', 'class' => 'thb_image' ) );
	}

	ob_start();
	?>
	<div class="<?php echo esc_attr(implode(' ', $el_class)); ?>" id="<?php echo esc_attr($element_id); ?>" data-separator="<?php echo esc_attr($thousand_separator); ?>">
		<?php if ($style === 'counter-style3') { ?>
			<?php if ($icon || $icon_image) { ?>
				<figure>
					<?php if ($icon_image) { ?>
						<div class="counter-image">
							<?php echo $img['thumbnail']; ?>
						</div>
					<?php } else { ?>
						<?php get_template_part( 'assets/svg/'.$icon ); ?>
					<?php } ?>
				</figure>
			<?php } ?>
			<div class="counter-container">
				<h6><?php echo esc_attr($heading); ?></h6>
				<?php if ($description) { ?>
				<div class="thb-description"><p><?php echo wp_kses_post($description); ?></p></div>
				<?php } ?>
				<div class="h1" data-count="<?php echo esc_attr($counter); ?>" data-speed="<?php echo esc_attr($speed); ?>">0</div>
			</div>
		<?php } elseif ($style === 'counter-style4') { ?>
			<div class="counter-container">
				<?php if ($prepend_counter_text) { ?><div class="counter-text counter counter-text-prepend"><?php echo esc_html($prepend_counter_text); ?></div><?php } ?>
				<div class="counter" data-count="<?php echo esc_attr($counter); ?>" data-speed="<?php echo esc_attr($speed); ?>">0</div>
				<?php if ($counter_text) { ?><div class="counter-text counter"><?php echo esc_html($counter_text); ?></div><?php } ?>
			</div>
			<p class="thb-title"><?php echo esc_attr($heading); ?></p>
			<?php if ($description) { ?>
			<div class="thb-description"><p><?php echo wp_kses_post($description); ?></p></div>
			<?php } ?>
			<?php if ($icon || $icon_image) { ?>
				<figure>
					<?php if ($icon_image) { ?>
						<div class="counter-image">
							<?php echo $img['thumbnail']; ?>
						</div>
					<?php } else { ?>
						<?php get_template_part( 'assets/svg/'.$icon ); ?>
					<?php } ?>
				</figure>
			<?php } ?>
		<?php } elseif ($style === 'counter-style5') { ?>
			<div class="counter-container">
				<?php if ($prepend_counter_text) { ?><div class="counter-text counter"><?php echo esc_html($prepend_counter_text); ?></div><?php } ?>
				<div class="h1 counter" data-count="<?php echo esc_attr($counter); ?>" data-speed="<?php echo esc_attr($speed); ?>">0</div>
				<?php if ($counter_text) { ?><div class="counter-text counter"><?php echo esc_html($counter_text); ?></div><?php } ?>
			</div>
			<h6 class="thb-title"><?php echo esc_attr($heading); ?></h6>
			<?php if ($description) { ?>
			<div class="thb-description"><p><?php echo wp_kses_post($description); ?></p></div>
			<?php } ?>
			<?php if ($icon || $icon_image) { ?>
				<figure>
					<?php if ($icon_image) { ?>
						<div class="counter-image">
							<?php echo $img['thumbnail']; ?>
						</div>
					<?php } else { ?>
						<?php get_template_part( 'assets/svg/'.$icon ); ?>
					<?php } ?>
				</figure>
			<?php } ?>
		<?php } elseif ($style === 'counter-style1') { ?>
			<div class="counter-container">
				<?php if ($prepend_counter_text) { ?><div class="h1 counter-text counter counter-text-prepend"><?php echo esc_html($prepend_counter_text); ?></div><?php } ?>
				<div class="h1" data-count="<?php echo esc_attr($counter); ?>" data-speed="<?php echo esc_attr($speed); ?>">0</div>
				<?php if ($counter_text) { ?><div class="h1 counter-text counter"><?php echo esc_html($counter_text); ?></div><?php } ?>
			</div>
			<h6><?php echo esc_attr($heading); ?></h6>
			<?php if ($description) { ?>
			<div class="thb-description"><p><?php echo wp_kses_post($description); ?></p></div>
			<?php } ?>
			<?php if ($icon || $icon_image) { ?>
				<figure>
					<?php if ($icon_image) { ?>
						<div class="counter-image">
							<?php echo $img['thumbnail']; ?>
						</div>
					<?php } else { ?>
						<?php get_template_part( 'assets/svg/'.$icon ); ?>
					<?php } ?>
				</figure>
			<?php } ?>
		<?php } else { ?>
			<div class="counter-container">
				<div class="h1" data-count="<?php echo esc_attr($counter); ?>" data-speed="<?php echo esc_attr($speed); ?>">0</div>
				<h6><?php echo esc_attr($heading); ?></h6>
			</div>
			<?php if ($description) { ?>
			<div class="thb-description"><p><?php echo wp_kses_post($description); ?></p></div>
			<?php } ?>
			<?php if ($icon || $icon_image) { ?>
				<figure>
					<?php if ($icon_image) { ?>
						<div class="counter-image">
							<?php echo $img['thumbnail']; ?>
						</div>
					<?php } else { ?>
						<?php get_template_part( 'assets/svg/'.$icon ); ?>
					<?php } ?>
				</figure>
			<?php } ?>
		<?php } ?>
		<style>
			#<?php echo esc_attr($element_id); ?> .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
			#<?php echo esc_attr($element_id); ?> .odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner {
				transition: transform <?php echo esc_attr($speed / 1000); ?>s;
			}
			<?php if ($thb_counter_color) { ?>
				#<?php echo esc_attr($element_id); ?>.thb-counter .h1,
				#<?php echo esc_attr($element_id); ?>.thb-counter .counter {
					color: <?php echo esc_attr($thb_counter_color); ?>;
				}
			<?php } ?>
			<?php if ($thb_heading_color) { ?>
				#<?php echo esc_attr($element_id); ?>.thb-counter h6,
				#<?php echo esc_attr($element_id); ?>.thb-counter .thb-title {
					color: <?php echo esc_attr($thb_heading_color); ?>;
				}
			<?php } ?>
			<?php if ($thb_icon_color) { ?>
				#<?php echo esc_attr($element_id); ?>.thb-counter figure svg path,
				#<?php echo esc_attr($element_id); ?>.thb-counter figure svg circle,
				#<?php echo esc_attr($element_id); ?>.thb-counter figure svg rect,
				#<?php echo esc_attr($element_id); ?>.thb-counter figure svg ellipse {
					stroke: <?php echo esc_attr($thb_icon_color); ?>;
				}
			<?php } ?>
			<?php if ($icon_image_width && $icon_image) { ?>
				#<?php echo esc_attr($element_id); ?>.thb-counter .counter-image img {
					width: <?php echo esc_attr($icon_image_width); ?>px;
					height: auto;
				}
			<?php } ?>
		</style>
	</div>
	<?php

  $out = ob_get_clean();

  return $out;
}
thb_add_short( 'thb_counter', 'thb_counter');