<link href="{{CONFIG theme_url}}/js/colorpicker/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="{{CONFIG theme_url}}/js/colorpicker/js/bootstrap-colorpicker.js"></script>
<link href="{{CONFIG theme_url}}/js/lib/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="{{CONFIG theme_url}}/js/lib/jquery-datatable/jquery.dataTables.js"></script>
<script src="{{CONFIG theme_url}}/js/lib/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>

<div class="container-home">
	<h3 class="recent-articles heading_all_sections_top">
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M16.6256 3.12837L9.29145 10.4625L9.29886 14.7097L13.537 14.7022L20.8682 7.37102C21.5912 8.75426 22 10.3277 22 11.9966C22 17.5194 17.5228 21.9966 12 21.9966C6.47715 21.9966 2 17.5194 2 11.9966C2 6.47373 6.47715 1.99658 12 1.99658C13.6689 1.99658 15.2423 2.40541 16.6256 3.12837ZM20.4853 2.09709L21.8995 3.5113L12.7071 12.7037L11.2954 12.7062L11.2929 11.2895L20.4853 2.09709Z" fill="currentColor"></path></svg>
			<span>{{LANG add_card}}: {{TITLE}}</span>
		</span>
	</h3>
	
	<div class="row">
		<div class="col-md-5">
			<div class="pt_vid_card_prvw">
				<div class="responsive">
					<div class="wait"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="spin spin-svg"><path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" fill="currentColor"/></svg></div>
					<canvas id="main_canvas"></canvas>
				</div>
				<input id="my-input" type="range" min="0" max="72" value="0" disabled />
			</div>
		</div>
		
		<div class="col-md-7" id="edit-form">
			<div class="upload_video_bg_color">
				<div class="pt_video_player">
					<video id="my-video" class="hidden">
					   <?php if (!empty($pt->video->video_location)) { ?>
					   <source src="<?php echo($pt->video->video_location) ?>">
					   <?php } ?>
					   Your browser does not support HTML5 video.
					</video>
				</div>
				<form action="" class="step_2_form pt_vid_card_form" method="POST">
					<div id="video-success"></div>
					<div class="form-group">
						<label for="part">{{LANG placement}}</label>
						<select name="part" id="part" class="form-control" disabled>
						   <option value="top_left">{{LANG top_left}}</option>
						   <option value="top_right">{{LANG top_right}}</option>
						   <option value="bottom_left">{{LANG bottom_left}}</option>
						   <option value="bottom_right">{{LANG bottom_right}}</option>
						   <option value="center">{{LANG center}}</option>
						</select>
					</div>
					<div class="form-group">
						<label for="type">{{LANG type}}</label>
						<select name="type" id="typedd" class="form-control" disabled>
						   <option value="text">{{LANG text}}</option>
						   <option value="video">{{LANG video}}</option>
						   <option value="subscribe">{{LANG subscribe}}</option>
						</select>
					</div>
					<div class="text_card">
						<div class="form-group">
							<label for="url">URL</label>
							<input type="text" id="url" name="url" class="form-control" disabled>
						</div>
						<div class="form-group">
							<label for="title">{{LANG title}}</label>
							<input type="text" id="title" name="title" class="form-control" disabled>
						</div>
						<div class="form-group col-md-6">
							<label for="color">{{LANG color}}</label>
							<input type="text" class="colorpicker" id="color" name="color" class="form-control" disabled>
						</div>
						<div class="form-group col-md-6">
							<label for="background_color">{{LANG background_color}}</label>
							<input type="text" class="colorpicker" id="background_color" name="background_color" class="form-control" disabled>
						</div>
						<div class="clear"></div>
					</div>
					<div class="video_card" style="display: none;">
						<div class="form-group">
							<label for="video_search">{{LANG search_keyword}}</label>
							<input type="text" id="video_search" name="video_search" class="form-control" disabled>
							<div class="video_dropdown"></div>
						</div>
						<div class="form-group">
							<label for="video_selected">{{LANG selected}}</label>
							<input type="text" id="video_selected" name="video_selected" class="form-control" readonly>
						</div>
					</div>
					<div class="">
						<button type="submit" id="submit-btn" class="btn btn-main upload_custom_new" disabled>{{LANG publish}}</button>
					</div>
					<input type="hidden" name="video_id" class="video_id" value="{{ID}}">
					<input type="hidden" name="ref_video" class="ref_video" value="0">
					<input type="hidden" name="duration" class="duration">
				</form>
			</div>
		</div>
	</div>

	<div class="upload_video_bg_color pt_vid_card_table">
		<div class="">
			<table class="table" id="video_cards_table"> 
				<thead>
					<th>{{LANG id}}</th>
					<th>{{LANG type}}</th>
					<th>{{LANG name}}</th>
					<th>{{LANG part}}</th>
					<th>{{LANG action}}</th>
				</thead>
				<tbody>
					{{CARDS_LIST}}
				</tbody>
			</table>
		</div>
		<div id="frames" class="hidden"></div>
	</div>
</div>

<script>
const rangeToPercent = slider => {
  const value = slider.value;
  const max = slider.getAttribute('max') || 10;
  const percent = value / max * 100;

  return `${parseInt(percent)}%`;
};

const sliders = document.querySelectorAll('.pt_vid_card_prvw input[type="range"]');

sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  });
});

function DeleteCard(id) {
	$.post('{{LINK aj/cards/delete}}', {id: id}, function(data, textStatus, xhr) {
		$("[data-card-list="+id+"]").remove();
	});
}
function SelectVideo(id,self) {
	$('.ref_video').val(id);
	$('#video_selected').val($(self).text());
	var search_dropdown = $('.video_dropdown');
	search_dropdown.addClass('hidden');
	search_dropdown.empty();
}
$('#video_search').keyup(function(event) {
	var search_value = $(this).val();
	var search_dropdown = $('.video_dropdown');
	if (search_value == '') {
		search_dropdown.addClass('hidden');
		search_dropdown.empty();
		return false;
	} else {
		search_dropdown.removeClass('hidden');
	}
    $.post('{{LINK aj/cards/search}}', {search_value: search_value}, function(data, textStatus, xhr) {
    	if (data.status == 200) {
    		search_dropdown.html(data.html);
    	} else {
	       search_dropdown.addClass('hidden');
		   search_dropdown.empty();
		   return false;
    	}
    });
});
$(document).on('change', '#typedd', function(event) {
	event.preventDefault();
	if ($(this).val() == 'text') {
		$('.text_card').slideDown();
		$('.video_card').slideUp();
		$('#my-input').removeAttr('disabled');
	}
	if ($(this).val() == 'video') {
		$('.video_card').slideDown();
		$('.text_card').slideUp();
		$('#my-input').attr('disabled', 'true');
	}
	if ($(this).val() == 'subscribe') {
		$('.video_card').slideUp();
		$('.text_card').slideUp();
		$('#my-input').attr('disabled', 'true');
	}
});
$('.colorpicker').colorpicker();

var main_canvas = document.getElementById("main_canvas");

jQuery(document).ready(function($) {
	video = document.querySelector('video');
	
	video.addEventListener('loadeddata', function() {
		$('.wait').remove();
    $('input').removeAttr('disabled');
    $('select').removeAttr('disabled');
    $('#submit-btn').removeAttr('disabled');
		var input = document.getElementById("my-input");
		input.min = 0;
		input.max = parseInt(video.duration);
		$('#video_cards_table').DataTable();
	});
});
	
	

$("#my-input").on("input", function(event) {
	video.currentTime = event.target.value;
	main_canvas.width = video.videoWidth;
  main_canvas.height = video.videoHeight;
  var context = main_canvas.getContext("2d");
  context.drawImage(video, 0, 0);
  $('.duration').val(event.target.value);
});
jQuery(document).ready(function($) {
	const video = document.querySelector('video');
	video.addEventListener('seeked', (event) => {
		$('.duration').val(video.currentTime);
	    var minutes = parseInt(video.duration / 60, 10);
	    var seconds = video.duration % 60;
	});

	$('.pt_vid_card_form').ajaxForm({
      url: '{{LINK aj/cards/create}}?hash=' + $('.main_session').val(),
      dataType:"json",
      beforeSend: function() {

        $('#submit-btn').attr('disabled', true).find('span').text("{{LANG please_wait}}");
        
      },
      uploadProgress: function(event, position, total, percentComplete) {
          if(percentComplete > 50) {
            percent.addClass('white');
          }
          var percentVal = percentComplete + '%';
          bar.width(percentVal);
          percent.html(percentVal);

          if (percentComplete == 100) {
            $("#video-success").empty();
          }
      },
      success: function(data) {
        scrollToTop();
        if (data.status == 200){
          $("#video-success").html('<div class="alert alert-success bg-success"><i class="fa fa-check"></i> '+
            data.message
            +'</div>');
          PT_Delay(function(){
            location.reload();
          },2000);
          
        }
        else {
          $('#submit-btn').removeAttr('disabled').find('span').text('{{LANG publish}}');
          $("#video-success").html('<div class="alert alert-danger bg-danger"><i class="fa fa-info-circle"></i> '+
            data.message
            +'</div>');
        }
      }
    });

});
</script>