@extends('monitoring/layout.treatment_layout') 
@section('title','BettrAi | Create Template') 
@section('content')
<style type="text/css">
#divLoadingInPopup1.tabloadershow1 {
	display: none;
	position: fixed;
	z-index: 100;
	background-image: url("{{ url('assets/images/loading-icon.gif') }}");
	opacity: 0.90;
	left: 0px;
	bottom: 0px;
	right: 0px;
	top: 50px;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: white;
}
.exercise_thumbnails{
	height: 132px !important;
	width: 122px !important;
}
.selected_exercise_rows{
	border: 1px solid #ccc;
	border-radius: 10px;
	background: #f2f2f2;
	margin: 0px 0px 7px 0px;
}
.sel_exercise_thumbnails{
	height: 50px !important;
	width: 50px !important;
}
.exercises_list_class{
	max-height: 430px;
	overflow-y: auto;
	scrollbar-color: rgba(var(--black-rgb),.2) rgba(var(--white-rgb),.1);
	scrollbar-width: thin !important;
	overflow-x: hidden !important;
	overflow-y: scroll !important;
}

</style>
<div class="content d-flex flex-column flex-column-fluid mt-14" id="kt_content">
	<!--begin::Subheader-->
	<div class="subheader gutter-b subheader-transparent" id="kt_subheader" ></div>
	<div class="d-flex flex-column-fluid">
		<!--begin::Container-->
		<div class="container">
			<div class="row" data-sticky-container="">
				<div class="col-lg-4 col-xl-4 col-sm-12 border_class">
					<div class="card card-custom">
						<div class="card-header">
							<div class="card-title">
								@if($template_id=='')
									<h3 class="card-label" id="plan_text">Create Template</h3>
								@else
									<h3 class="card-label" id="plan_text">Update Template</h3>
								@endif
							</div>
							<div class="card-title">
								<a href="{{ url('/exerciseConfiguration') }}?pagetype=template" class="btn btn-primary mr-5 p-2 float-left">Back</a>
							</div>
						</div>
						<!--begin::Form-->
						<form class="form" name="create_template" id="create_template" method="post">
							<input type="hidden" name="template_id" id="template_id" value="{{ $template_id }}">
							<div class="card-body">
								<div class="form-group mb-2">
									<label class="font-weight-bolder">Template Name</label>
									<input type="text" class="form-control" placeholder="Template Name" name="template_name" id="template_name" value="{{ $template_name }}">
								</div>
								<div class="form-group mb-2">
									<label class="font-weight-bolder">Select Category</label>
									<select class="form-control" name="category_id" id="category_id" onchange="getExerciseList()">
										<option value="">Select Category</option>
										@foreach($categories_list as $categories_li)
											<option value="{{ $categories_li->id }}">{{ $categories_li->category_name }}</option>
										@endforeach
									</select>
								</div>
								<div class="form-group mb-2">
									<label class="font-weight-bolder">Select Position</label>
									<select class="form-control" name="position_id" id="position_id" onchange="getExerciseList()">
										<option value="">Select Position</option>
										@foreach($positions_list as $positions_li)
											<option value="{{ $positions_li->id }}">{{ $positions_li->position_name }}</option>
										@endforeach
									</select>
								</div>
								<div class="form-group mb-2">
									<input type="text" class="form-control" placeholder="Search" name="search_exercise" id="search_exercise">
								</div>
							</div>
							<div class="card-footer text-right">
								<button type="button" class="btn btn-primary mr-2" onclick="getExerciseList()">Search</button>
								<button type="button" class="btn btn-warning mr-2" onclick="resetTemplateList()">Reset</button>
							</div>
							<input type="hidden" name="selected_exercise_ids" id="selected_exercise_ids" value="{{ $selected_exercise_ids }}">
						</form>
						<!--end::Form-->
					</div>
				</div>
				<div class="col-lg-8 col-xl-8 col-sm-12">
					<div class="card card-custom gutter-b example example-compact">
						<div class="card-body p-4">
							<h6 id="plan_text" class="pt-3 pb-3">Selected Exercises</h6>
							<div class="row" id="selected_exercises_list">
								@if(isset($exercises_list) && count($exercises_list)>0)
									@foreach($exercises_list as $exercises_li)
										<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-1" id="exercise_tile_{{ $exercises_li['exercise_id'] }}">
											<div class="row selected_exercise_rows">
												<div class="col-xl-2">
													<div class="">
														<img alt="image" class="img-fluid symbol sel_exercise_thumbnails" src="{{ $exercises_li['image_file'] }}">
													</div>
												</div>
												<div class="col-xl-9">
													<h6 class="mt-4">{{ $exercises_li['exercise_name'] }}</h6>
												</div>
												<div class="col-xl-1">
													<a href="javascript:void(0)" onclick="remove_preview('{{ $exercises_li['exercise_id'] }}')">
														<i class="fa fa-times mt-5" style="color:#f26c85; font-size: 20px !important;"></i>
													</a>
												</div>
											</div>
										</div>
									@endforeach
								@else
									<h6 class="pl-4">N/A</h6>
								@endif
							</div>
						
							<h6 id="plan_text" class="pt-3 pb-3">Exercises List</h6>
							<div class="card-body" id="exercises_list_div">
							</div>
							<div class="row" id="exercise_load_more_div" style="display: none;">
								<div class="col-xl-12 col-md-12 col-sm-12 col-lg-12">
									<div class="card-body justify-content-center" text-align="center" style="text-align: center">
										<a href="javascript:;" onclick="loadExerciseList()" class="btn btn-outline-primary font-weight-bolder py-2">Load More</a>
									</div>
								</div>
							</div>
						</div>
						<input type="hidden" name="exercise_page" id="exercise_page" value="1"/>
						<div class="text-right mb-4">
							@if($template_id=='')
								<button type="button" class="btn btn-success font-weight-bold mr-3 p-2" onclick="save_template()" autocomplete="off">Save Template</button>
							@else
								<button type="button" class="btn btn-success font-weight-bold mr-3 p-2" onclick="save_template()" autocomplete="off">Update Template</button>
							@endif
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="divLoadingInPopup1" class="tabloadershow1"></div>
<script src="{{ url('/assets/js/date-pickerJs.js') }}"></script>
<script>
	var host_path1 = "{{Config::get('constants.options.host_path')}}";
</script>
<script type="text/javascript">
getExerciseList();
function getExerciseList(){
    $(".tabloadershow1").show();
	$('#exercise_page').val(1);
	var page = $('#exercise_page').val();
    var category_id = $('#category_id').val();
    var position_id = $('#position_id').val();
	var template_id = $('#template_id').val();
    var search_exercise = encodeURI($('#search_exercise').val());
	var selected_exercise_ids = $('#selected_exercise_ids').val();
	var load_exercise_url = "{{ url('/getExerciseList') }}?category_id="+category_id+"&position_id="+position_id+"&template_id="+template_id+"&search_exercise="+search_exercise+"&is_template=1&loadtype=all&page="+page+"&selected_exercise_ids="+selected_exercise_ids;
	$('#exercises_list_div').load(load_exercise_url);
	setTimeout(function(){ 
    	$(".tabloadershow1").hide();
	}, 2000);
}
function loadExerciseList(){
    $(".tabloadershow1").show();
	var page = $('#exercise_page').val();
    page = parseInt(page) + 1;
    var category_id = $('#category_id').val();
    var position_id = $('#position_id').val();
    var search_exercise = encodeURI($('#search_exercise').val());
	var template_id = $('#template_id').val();
	var selected_exercise_ids = $('#selected_exercise_ids').val();
	var load_exercise_url = "{{ url('/getExerciseList') }}?category_id="+category_id+"&position_id="+position_id+"&template_id="+template_id+"&search_exercise="+search_exercise+"&is_template=1&loadtype=all&page="+page+"&selected_exercise_ids="+selected_exercise_ids;
    $("#exercises_list_div").append($("<div/>").load(load_exercise_url));
    $('#exercise_page').val(page);
    setTimeout(function(){ 
    	$(".tabloadershow1").hide();
	}, 2000);
}
function save_template(){
	
	var template_name = $('#template_name').val();
	checkChange();
	console.log("selected Language--"+ currentLang )
	var trlang = currentLang.split("/")
	// template_name =  getTranslateText(template_name,trlang[2],'en');
	// $('#template_name').val(template_name);
	var search_exercise =  $('#search_exercise').val();
	//$('#search_exercise').val(search_exercise);
		
	var formData = new FormData();
	formData = new FormData($('#create_template')[0]);
	formData.append( "_token", '{{csrf_token()}}' ); 
	var selected_exercise_ids = $('#selected_exercise_ids').val();
	
	if(template_name==''){
		swal("Please enter template name");
		return false;
	}
	let exercise_ids = $("input[name='exercise_list\\[\\]']:checked")
						.map(function(){
							return $(this).val();
						}).get();
	if(selected_exercise_ids==''){
		swal("Please select atleast one exercise");
		return false;
	}
	$(".tabloadershow1").show();
	$.ajax({
		url : "{{ url('/saveTemplate') }}",
		type:"POST",
		data : formData,
		contentType: false,
		processData: false,
		success: function(data){
			$(".tabloadershow1").hide();
			if(data=='success'){
				//swal("Template created successfully");
				$('#create_template').trigger('reset');
				window.location.href = "{{ url('/exerciseConfiguration') }}?pagetype=template";
			} else {
				swal("Something went wrong. Please try again");
			}
		}
	});
}
function check_exercise_list(exercise_id,exercise_name,image_file){
	var template_id = $('#template_id').val();
	let exercise_ids = $("input[name='exercise_list\\[\\]']:checked")
						.map(function(){
							return $(this).val();
						}).get();
	var selected_exercise_ids = $('#selected_exercise_ids').val();
	console.log(selected_exercise_ids+'----');
	var selected_exercise_array = selected_exercise_ids.split(",");
	if($('#exercise_list_'+exercise_id).is(":checked")){
		if(selected_exercise_ids==''){
			$('#selected_exercises_list').html('');
		}
		var preview_html = '<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-1" id="exercise_tile_'+exercise_id+'">'+
							'<div class="row selected_exercise_rows">'+
								'<div class="col-xl-2">'+
									'<div class="">'+
										'<img alt="image" class="img-fluid symbol sel_exercise_thumbnails" src="'+image_file+'">'+
									'</div>'+
								'</div>'+
								'<div class="col-xl-9">'+
									'<h6 class="mt-4">'+exercise_name+'</h6>'+
								'</div>'+
								'<div class="col-xl-1">'+
									'<a href="javascript:void(0)" onclick="remove_preview('+exercise_id+')"><i class="fa fa-times mt-5" style="color:#f26c85; font-size: 20px !important;"></i></a>'+
								'</div>'+
							'</div>'+
						'</div>';
		$('#selected_exercises_list').append(preview_html);
		manage_exercises(exercise_id,'add');
	} else {
		remove_preview(exercise_id);
	}
	let after_exercise_ids = $("input[name='exercise_list\\[\\]']:checked")
						.map(function(){
							return $(this).val();
						}).get();
	var selected_exercise_ids = $('#selected_exercise_ids').val();
	var selected_exercise_array = selected_exercise_ids.split(",");
	if(selected_exercise_ids==''){
		$('#selected_exercises_list').html('<h6 class="pl-4">N/A</h6>');
	}
}
function remove_preview(exercise_id){ 
	$('#exercise_list_'+exercise_id).prop('checked',false);
	$('#exercise_tile_'+exercise_id).remove();
	let after_exercise_ids = $("input[name='exercise_list\\[\\]']:checked")
						.map(function(){
							return $(this).val();
						}).get();
	var selected_exercise_ids = $('#selected_exercise_ids').val();
	var selected_exercise_array = selected_exercise_ids.split(",");
	if(selected_exercise_array.length==0){
		$('#selected_exercises_list').html('<h6 class="pl-4">N/A</h6>');
	}
	manage_exercises(exercise_id,'remove');
}
function manage_exercises(exercise_id,action){
	var selected_exercise_ids = $('#selected_exercise_ids').val();
	if(selected_exercise_ids==''){
		var selected_exercise_array = [];
	} else {
		var selected_exercise_array = selected_exercise_ids.split(",");
	}
	
	console.log(selected_exercise_array);
	if(action=='add'){
		if(jQuery.inArray(exercise_id, selected_exercise_array) != -1){
			return true;
		} else {
			selected_exercise_array.push(exercise_id);
			if(selected_exercise_array.length==1){
				$('#selected_exercise_ids').val(exercise_id);
			} else {
				$('#selected_exercise_ids').val(selected_exercise_array.join(','));
			}
		}
	} else {
		selected_exercise_array.splice( $.inArray(exercise_id, selected_exercise_array), 1 );
		$('#selected_exercise_ids').val(selected_exercise_array.join(','));
	}
}

function resetTemplateList(){
	location.reload();
}
</script>
@endsection