<script>
jQuery(document).ready(function(){
	var timer = new Timer();
	timer.start({countdown: true, startValues: {seconds: <?php echo $data['seconds_remain'];?>}});
	timer.addEventListener('secondsUpdated', function (e) {
	    jQuery('#ulp_lesson_countdown').html(timer.getTimeValues().toString());
	});	
	timer.addEventListener('targetAchieved', function (e) {
		IndeedLesson.doComplete();
	});		
});
</script>
<div class="ulp-lesson-complete-wrapp">
	
	<?php 
	if (empty($data['is_completed'])):?>
		<?php $class = $data['seconds_remain']<1 ? 'ulp-lesson-complete-the-button' : 'ulp-lesson-complete-the-button-wait ulp-cursor-default';?>
		<?php if ($data['seconds_remain']>0):?>
          <div class="ulp_lesson_countdown-wrapper">
			<div class="ulp_lesson_countdown" id="ulp_lesson_countdown">00:00:00</div>
            <div class="ulp_lesson_countdown-text"><?php _e('you can complete the lesson only after the time ends', 'ulp');?></div>
         </div>	
		<?php endif;?>
        <div class="<?php echo $class;?>" data-lesson_id="<?php echo $data['lesson_id'];?>" id="ulp_lesson_complete_bttn"><?php _e('Complete Lesson', 'ulp');?></div>
	<?php else:?>
		<div class="ulp-lesson-completed"><?php _e('Completed Lesson', 'ulp');?></div>
	<?php endif;?>
	
</div>
