@extends($layout_app)
@section('title','BettrAi | Treatment Plan Configuration') 
@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;
}
.sel_exercise_thumbnails{
	height: 50px !important;
	width: 50px !important;
	border: 1px solid #ccc;
}
.remove_icon{
	color: #f26c85;
	font-size: 20px !important;
	position: absolute;
	top: -50%;
	left: 10%;
}
.selected_exercise_rows{
	border: 1px solid #ccc;
	border-radius: 10px;
	background: #f2f2f2;
	margin: 0px 0px 7px 0px;
}
.remove_icon_video{
	color: #f26c85;
	font-size: 20px !important;
	position: absolute;
	top: -10%;
	right: -50%;
}
.label_formats{
	padding-right: 2px;
	padding-left: 2px;
}

/* Set modal to relative to contain the dropdown within its boundaries */
.modal-content {
    position: relative;
}

/* Ensure the select dropdown options are contained within the modal */
select.form-control {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    z-index: 1051; /* Ensure the dropdown stays on top */
}

/* Fix for Bootstrap select dropdown options overflowing in mobile */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 5px; /* Add small margins on mobile to keep it within the viewport */
    }
    .dropdown-menu {
        position: static; /* Keep the dropdown inside the modal */
    }
}
@media (max-width: 576px) {
    .nav-tabs {
        display: flex;
        justify-content: space-between;
    }
    .nav-item {
        flex: 1;
        text-align: center;
    }
}



</style>
<div class="content d-flex flex-column flex-column-fluid {{ $content_style }}" id="kt_content">
                        <!--begin::Subheader-->	
	<!--begin::Entry-->
	<div class="d-flex flex-column-fluid">
		<!--begin::Container-->
		<!--begin::Container-->
		<div class="container">
			<div class="row" data-sticky-container="">
				<div class="col-lg-12 col-xl-12">
					<div class="card card-custom gutter-b example example-compact">
												<div class="card-header">
							<div class="card-title">
								@if($exercise_id=='')
									<h3 class="card-label" id="plan_text">Create Exercise</h3>
								@else
									<h3 class="card-label" id="plan_text">Edit Exercise</h3>
								@endif
							</div>
							<div class="card-title">
								<a href="{{ url('/exerciseConfiguration') }}?pagetype=exercise" class="btn btn-primary mr-5 p-2 float-left">Back</a>
							</div>
						</div>
												<div class="card-body">
							<form class="form" id="create_exercise" name="create_exercise" method="post" enctype="multipart/form-data">
								<input type="hidden" name="exercise_id" id="exercise_id" value="{{ $exercise_id }}">
								<div class="form-group row">
									<div class="col-lg-4 col-md-4 col-sm-12">
										<span>Exercise Name<label class="text-danger">*</label></span>
										<div></div>
										<div class="custom-file">
											<input type="text" class="form-control" id="exercise_name" name="exercise_name" value="{{ isset($details)?$details->exercise_name:'' }}">
										</div>
									</div>
									<div class="col-lg-4 col-md-4 col-sm-12">
										<span>Select Category<label class="text-danger">*</label></span>
										<div></div>
										<div class="custom-file">
											<select class="form-control" name="category_id" id="category_id">
												<option value="">Select</option>
												@foreach($categories_list as $categories_li)
													<option  value="{{ $categories_li->id }}">{{ $categories_li->category_name }}</option>
												@endforeach
											</select>
										</div>
									</div>
									<div class="col-lg-4 col-md-4 col-sm-12">
										<span>Select Position<label class="text-danger">*</label></span>
										<div></div>
										<div class="custom-file">
											<select class="form-control" name="position_id" id="position_id">
												<option value="">Select</option>
												@foreach($positions_list as $positions_li)
													<option  value="{{ $positions_li->id }}">{{ $positions_li->position_name }}</option>
												@endforeach
											</select>
										</div>
									</div>
								</div>
								<div class="row">
									<!--Box 2-->							
									<div class="col-lg-6 col-md-6 col-sm-12">
										<div class="mr-1" style="border: 1px solid #E5EAEE;border-radius:15px;">
											<textarea class="form-control" id="instructions" name="instructions" rows="10" cols="2" style="border: 0;border-radius:15px;padding-top:1px;resize: none;">{{ isset($details)?$details->instructions:'' }}</textarea>
										</div>
									</div>
									<!--Box 3-->							
									<div class="col-lg-6 col-md-6 col-sm-6">
										<div class="form-group row align-items-center">
										    <label class="col-lg-2 col-form-label">Repeat</label>
										    <div class="col-lg-6 d-flex align-items-center">
										        <input type="text" class="form-control rule_settings" id="reps" name="reps" value="{{ isset($details) ? $details->reps : '' }}">
										        <label class="ml-2 mb-0">Time(s)</label>
										    </div>
										</div>

										<div class="form-group row align-items-center">
										    <label class="col-lg-2 col-form-label">Hold</label>
										    <div class="col-lg-6 d-flex align-items-center">
										        <input type="text" class="form-control rule_settings" id="hold" name="hold" value="{{ isset($details) ? $details->hold : '' }}">
										        <label class="ml-2 mb-0">Second(s)</label>
										    </div>
										</div>

										<div class="form-group row align-items-center">
										    <label class="col-lg-2 col-form-label label_formats">Complete</label>
										    <div class="col-lg-6 d-flex align-items-center">
										        <input type="text" class="form-control rule_settings" id="complete" name="complete" value="{{ isset($details) ? $details->complete : '' }}">
										        <label class="ml-2 mb-0">Set(s)</label>
										    </div>
										</div>

										<div class="form-group row align-items-center">
										    <label class="col-lg-2 col-md-12 col-form-label">Perform</label>
										    <div class="col-lg-4 col-md-12 col-12 d-flex align-items-center">
										        <input type="text" class="form-control rule_settings" id="perform" name="perform" value="{{ isset($details) ? $details->perform : '' }}">
										        <label class="ml-2 mb-0">Time(s)</label>
										    </div>
										    <div class="col-lg-4 col-md-12 col-12 mt-2 mt-lg-0">
										        <select class="form-control" id="no_of_times" name="no_of_times">
										            <option {{ isset($details) && $details->no_of_times == 'a Day' ? 'selected' : '' }} value="a Day">a Day</option>
										            <option {{ isset($details) && $details->no_of_times == 'a Week' ? 'selected' : '' }} value="a Week">a Week</option>
										            <option {{ isset($details) && $details->no_of_times == 'an Hour' ? 'selected' : '' }} value="an Hour">an Hour</option>
										        </select>
										    </div>
										</div>




										<div class="form-group row">
											<label class="col-lg-2 col-form-label">Status</label>
											<div class="col-lg-4">
												<select class="form-control" id="status" name="status">
													<option  value="1">Active</option>
													<option  value="0">Inactive</option>
												</select>
											</div>
										</div>
										<!--end::Card-->
									</div>
									<div class="col-lg-12 card mt-10">
										<div class="card-header card-header-tabs-pills">
										<div class="card-toolbar">
											<ul class="nav nav-tabs nav-bold nav-tabs-pills">
												<li class="nav-item">
													<a class="nav-link active p-1" data-toggle="tab" href="#kt_tab_pane_1_4">
														<span class="nav-icon mr-2">
															<i class="icon-xl text-dark-50 flaticon-photo-camera"></i>
														</span>
														<span class="nav-text">Photo</span>
													</a>
												</li>
												<li class="nav-item">
													<a class="nav-link p-1" data-toggle="tab" href="#kt_tab_pane_2_4">
														<span class="nav-icon mr-2">
															<i class="icon-xl text-dark-50 fas fa-video"></i>
														</span>
														<span class="nav-text">Video</span>
													</a>
												</li>
											</ul>
										</div>

										</div>
										<div class="card-body">
											<div class="tab-content">
												<div class="tab-pane fade active show" id="kt_tab_pane_1_4" role="tabpanel" aria-labelledby="kt_tab_pane_1_4">
													<div class="row">
																												@if(isset($exercise_images) && count($exercise_images)>0)
															@foreach($exercise_images as $exercise_imag)
																<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-1" id="exercise_tile_{{ $exercise_image_ids[$ikey] }}">
																	<div class="row">
																		<div class="col-xl-12">
																			<div class="">
																				<img alt="image" class="img-fluid symbol sel_exercise_thumbnails" src="{{ $exercise_imag }}">
																				<a href="javascript:void(0)" onclick="remove_preview('{{ $exercise_image_ids[$ikey] }}','image')"><i class="fa fa-times mt-5 remove_icon"></i></a>
																			</div>
																		</div>
																	</div>
																</div>
																															@endforeach
														@endif
													</div>
													<div class="form-group">
														<label>File Browser</label>
														<div></div>
														<div class="custom-file">
															<input type="file" class="custom-file-input" id="image_files" accept="image/*" multiple name="attachment_file[]">
															<label class="custom-file-label" for="image_files">Choose file</label>
														</div>
													</div>
												</div>
												<div class="tab-pane fade" id="kt_tab_pane_2_4" role="tabpanel" aria-labelledby="kt_tab_pane_2_4">
												<div class="row">
																												@if(isset($exercise_videos) && count($exercise_videos)>0)
															@foreach($exercise_videos as $exercise_video)
																<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-1" id="exercise_tile_{{ $exercise_video_ids[$vkey] }}">
																	<div class="row selected_exercise_rows">
																		<div class="col-xl-10 p-4">
																			<span class="mt-4">{{ $exercise_video_names[$vkey] }}</span>
																		</div>
																		<div class="col-xl-1">
																			<a href="javascript:void(0)" onclick="remove_preview('{{ $exercise_video_ids[$vkey] }}','video')"><i class="fa fa-times mt-5 remove_icon_video"></i></a>
																		</div>
																	</div>
																</div>
																															@endforeach
														@endif
													</div>
													<div class="form-group">
														<label>File Browser</label>
														<div></div>
														<div class="custom-file">
															<input type="file" class="custom-file-input" id="video_files" accept="video/mp4,video/x-m4v,video/*" name="attachment_file[]">
															<label class="custom-file-label" for="video_files">Choose file</label>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<input type="hidden" name="deleted_images" id="deleted_images" value="">
								<input type="hidden" name="deleted_videos" id="deleted_videos" value="">
							</form>
							<div class="card-footer text-right">
								<button type="button" class="btn btn-success font-weight-bold mr-3 p-2" onclick="save_exercise()" autocomplete="off">Save Exercise</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--end::Container-->
	<!--end::Wrapper-->
	<!--end::Page-->
</div>
<div id="divLoadingInPopup1" class="tabloadershow1"></div>
<script src="{{ url('/assets/js/date-pickerJs.js') }}"></script>
<script type="text/javascript">
$('.rule_settings').on('keypress keydown keyup',function(e){
	var allowed_keycodes = [9,8,0,46,37,39,16];
	if ($.inArray(e.which, allowed_keycodes) === -1 && (e.which < 48 || e.which > 57) && (e.which < 96 || e.which > 105)) {
		return false;
	}
});

//checkChange();
// $(document).on("focusout", "input", function() {
// 	console.log($(this).val()+"text")
// 	checkChange();
// 	console.log("selected Language--"+ currentLang )
// 	var trlang = currentLang.split("/")
// 	var tertext =  getTranslateText($(this).val(),'en',trlang[2]);
// 	console.log("selected Language array---"+ trlang[2] )
// 	console.log("selected Language translate text---"+ tertext )
// 	$(this).val(tertext)
// });
// $(document).on("focusout", ".sendglobalmsg_pop", function() {
// 	//alert()
// });	
function save_exercise(){
	//checkChange();
	// console.log("selected Language--"+ currentLang )
	// var trlang = currentLang.split("/");
	var instructions =  $("#instructions").val();
	//$("#instructions").val(instructions);
	var exercise_name =  $("#exercise_name").val();
	//$("#exercise_name").val(exercise_name);
	var exercise_id = $('#exercise_id').val();
	var images_count = '{{ $ikey }}';
	var videos_count = '{{ $vkey }}';
	var deleted_images = $('#deleted_images').val();
	var deleted_videos = $('#deleted_videos').val();
	var deleted_images_count = 0;
	//exercise_name = $('#exercise_name').val();
	var category_id = $('#category_id').val();
	var position_id = $('#position_id').val();
	var formData = new FormData();
	formData = new FormData($('#create_exercise')[0]);
	formData.append( "_token", '{{csrf_token()}}' ); 
	if(exercise_name==''){
		swal("Please enter exercise name");
		return false;
	}
	if(category_id==''){
		swal("Please enter category");
		return false;
	}
	if(position_id==''){
		swal("Please select position");
		return false;
	}
	if(deleted_images!=''){
		var deleted_images_array = deleted_images.split(",");
		var deleted_images_count = deleted_images_array.length;
	}
	if((exercise_id=='' && document.getElementById("image_files").files.length == 0) || 
	(exercise_id!='' && (images_count==0 || images_count==deleted_images_count) && document.getElementById("image_files").files.length == 0)){
		swal("Please select atleast one image file");
		return false;
	}
	if((exercise_id=='' && document.getElementById("video_files").files.length == 0) || 
		(exercise_id!='' && (videos_count==0 || deleted_videos!='') && document.getElementById("video_files").files.length == 0)){
		swal("Please select atleast one video file");
		return false;
	}
	$(".tabloadershow1").show();
	var page_type = '{{ $page_type }}';
	
	$.ajax({
		url : "{{ url('/saveExercise') }}?page_type="+page_type,
		type:"POST",
		data : formData,
		contentType: false,
		processData: false,
		success: function(data){
			$(".tabloadershow1").hide();
			if(data=='success'){
				$('#create_exercise').trigger('reset');
				if(page_type == 'Patient'){
					//$('#addExercise').modal('hide');
					$("#addExercise .close").click();
					//getExerciseList();
				}else{
					window.location.href = "{{ url('/exerciseConfiguration') }}?pagetype=exercise";
				}
			} else if(data=='exist'){
				swal("An Exercise already exist with this name");
				return false;
			}else {
				swal("Something went wrong. Please try again");
				return false;
			}
		}
	});
}

function remove_preview(file_id, file_type){
	// $(".tabloadershow1").show();
	// $.ajax({
	// 	url : "{{ url('/deleteExerciseFile') }}?file_id="+file_id,
	// 	success: function(data){
	// 		$(".tabloadershow1").hide();
	// 		//$('#exercise_tile_'+file_id).remove();
	// 		location.reload();
	// 	}
	// });
	var deleted_images = $('#deleted_images').val();
	var deleted_videos = $('#deleted_videos').val();
	if(file_type=='video'){
		$('#deleted_videos').val(file_id);
	} else {
		if(deleted_images==''){
			$('#deleted_images').val(file_id);
		} else {
			var after_deleted_val = $('#deleted_images').val();
			$('#deleted_images').val(after_deleted_val+','+file_id);
		}
	}
	$('#exercise_tile_'+file_id).remove();
}
</script>
@endsection