@extends('dashboard/layout.app')
@section('title','BettrAi | Exercise Configuration') 
@section('content')
<style type="text/css">
    #divLoadingInPopup1.tabloadershow1 {
        display: none;
        position: fixed;
        z-index: 100;
        background-image: url("{{ asset('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;
	}
    .templates_div_section{
        max-height: 340px;
        scrollbar-color: rgba(var(--black-rgb),.2) rgba(var(--white-rgb),.1);
        scrollbar-width: thin !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
    }
    .template_list_tiles{
        background: none;
        border-bottom: 1px solid #eeecec;
        padding: 5px 5px 5px 10px;
        border-radius: 5px;
    }
    .template_tile_div{
        background: rgb(238, 238, 238);
    }
    .custom_modal_content{
        background-color: #000 !important;
        max-height: 500px !important;
        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;
    }
    .body_modal{
        text-align:center;
    }
    .modal-body{
        padding: 1px !important;
        text-align: center;
    }
    .modal-header{
        border-bottom: none !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;
    }
    .close_button {
        background: #fff !important;
        padding: 5px !important;
        border-radius: 5px !important;
    }
    
    @media (min-width: 992px) {
        .modal-lg {
            max-width: 60% !important;
        }
    }
</style>
<div class="d-flex flex-column-fluid">
    <!--begin::Container-->
    <div class="container">
        <div class="card card-custom">
            <div class="card-header flex-wrap py-5">
                <div class="card-title">
                    <span class="card-label font-weight-bolder text-dark">Exercise Configuration</span>
                </div>
                <div class="col-lg-12 bg-white">
                    <ul class="nav nav-tabs nav nav-pills">
                        <li class="nav-item"><a onclick="getExerciseList()" class="nav-link " data-toggle="tab" href="#kt_tab_pane_2">
                            Exercise List</a>
                        </li>
                        <li class="nav-item"><a onclick="getTemplateList('list')" class="nav-link " data-toggle="tab" href="#kt_tab_pane_3"> Templates </a></li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane  fade " id="kt_tab_pane_2" role="tabpanel" aria-labelledby="kt_tab_pane_2">
                            <div class="content d-flex flex-column flex-column-fluid" 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 col-lg-6">
                                                            <h6>Search Exercise</h6>
                                                        </div>
                                                        <div class="card-title col-lg-5">
                                                            <a class="btn btn-success font-weight-bold mr-1 p-1" onclick="createNewExercise()" autocomplete="off">Add New Exercise</a>

                                                        </div>
                                                    </div>
                                                    <!--begin::Form-->
                                                    <form class="form">
                                                        <div class="card-body">
                                                            <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">
                                                                <label class="font-weight-bolder">Search</label>
                                                                <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="resetExerciseList()">Reset</button>
                                                        </div>
                                                    </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-header">
                                                        <div class="card-title">
                                                            <h3 class="card-label" id="plan_text">Exercises List</h3>
                                                        </div>
                                                    </div>
                                                    <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> -->
                                                    <input type="hidden" name="exercise_page" id="exercise_page" value="1"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane  fade " id="kt_tab_pane_3" role="tabpanel" aria-labelledby="kt_tab_pane_3">
                        <div class="content d-flex flex-column flex-column-fluid" 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">
                                                            <h3 class="card-label" id="plan_text">Templates List</h3>
                                                        </div>
                                                        <div class="card-title">
                                                            <a class="btn btn-success font-weight-bold mr-1 p-1" onclick="createNewTemplate()" autocomplete="off">Add New Template</a>
                                                        </div>
                                                    </div>
                                                    <!--begin::Form-->
                                                    <div class="input-group input-group-solid">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <span class="svg-icon svg-icon-lg">
                                                                <!--begin::Svg Icon | path:assets/media/svg/icons/General/Search.svg-->
                                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                        <rect x="0" y="0" width="24" height="24"></rect>
                                                                        <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                                                        <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero"></path>
                                                                    </g>
                                                                </svg>
                                                                <!--end::Svg Icon-->
                                                                </span>
                                                            </span>
                                                        </div>
                                                        <input type="text" id="search_template" onkeyup="getTemplateList('search')" class="form-control h-auto" placeholder="Search Templates">
                                                        <div class="search_loader_templates" style="display:none;"><img id="small_loader_img" alt="Logo" src="{{ url('assets/images/loading-icon.gif') }}" class="logo-sticky max-h-35px"></div>
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text" onclick="clearTemplateSearch()" style="cursor:pointer;">
                                                                <i class="fa fa-times"></i>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="card-body templates_div_section" id="templates_list_div">
                                                        
                                                    </div>
                                                </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-header">
                                                        <div class="card-title">
                                                            <h3 class="card-label" id="plan_text">Exercises List</h3>
                                                        </div>
                                                    </div>
                                                    <div class="card-body" id="tempexercises_list_div">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="image_overview" tabindex="-1" role="dialog" aria-labelledby="image_overview" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content custom_modal_content" >
         <div class="modal-header p-0">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" aria-label="Close" onclick="stop_video()">
               <i aria-hidden="true" class="ki ki-close fa-1x" style="color: #000;"></i>
            </button>
         </div>
         <div class="modal-body body_modal" id="display_image">	
         </div>
      </div>
   </div>
</div><!--Modal 1 Ends-->
<div id="divLoading" class="tabloadershow"></div>
<script>var _tooltip = jQuery.fn.tooltip;</script>
<script>jQuery.fn.tooltip = _tooltip;</script>
<script type="text/javascript">
var pagetype = '{{ $pagetype }}';
if(pagetype=='template'){
    getTemplateList('list');
}
if(pagetype=='exercise'){
    getExerciseList();
}
//checkChange();
//console.log("selected Language--"+ currentLang )
//var trlang = currentLang.split("/")
function getExerciseList(){
    $(".tabloadershow").show();
    $('#exercise_page').val(1);
	var page = $('#exercise_page').val();
    var category_id = $('#category_id').val();
    var position_id = $('#position_id').val();
    var search_exercise = encodeURI($('#search_exercise').val());
	var load_exercise_url = "{{ url('/getExerciseList') }}?category_id="+category_id+"&position_id="+position_id+"&search_exercise="+search_exercise+"&page="+page+"&is_template=0&loadtype=list&selected_exercise_ids=";
	$('#exercises_list_div').load(load_exercise_url);
    setTimeout(function(){ 
    	$(".tabloadershow").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 load_exercise_url = "{{ url('/getExerciseList') }}?category_id="+category_id+"&position_id="+position_id+"&search_exercise="+search_exercise+"&page="+page+"&is_template=0&loadtype=list&selected_exercise_ids=";
    $("#exercises_list_div").append($("<div/>").load(load_exercise_url));
    $('#exercise_page').val(page);
    setTimeout(function(){ 
    	$(".tabloadershow1").hide();
	}, 2000);
}**/
function exerciseConfig(url){
	$(".tabloadershow_app").show();	
	$('.providerCentricGoals').html('Create Exercise');
	$('#saveProviderDisease').html('Add Exercise');
	$('#saveProviderDisease').attr('onclick',"saveProviderGoal()");
	$('#providerCentricGoals').modal('show');
	$('#provider_goal_div').load(url);
}
function templateConfig(url){
	$(".tabloadershow_app").show();	
	$('.patientCentricGoals').html('Create Template');
	$('#savePatientGoal').html('Add Template');
	$('#savePatientGoal').attr('onclick',"savePatientGoal()");
	$('#patientCentricGoals').modal('show');
	$('#patient_goal_div').load(url);
}

function cancel_exercise(){
	getExerciseList();
}
function cancel_template(){
	getTemplateList('list');
}

function createNewExercise(){
	window.location.href = "{{ url('/createExercise') }}";
}

function resetExerciseList(){
    $('#category_id').val('');
    $('#position_id').val('');
    $('#search_exercise').val('');
    getExerciseList();
}

function createNewTemplate(){
    window.location.href="{{ url('/createExerciseTemplate') }}";
}

function getTemplateList(load_type){
    var search_template = encodeURI($('#search_template').val());
    var load_exercise_url = "{{ url('/getExerciseTemplateList') }}?search_template="+search_template;
    $(".tabloadershow").show();
	$.ajax({
		url : load_exercise_url,
		success: function(data){
			$(".tabloadershow").hide();
            if(data.hasOwnProperty("status") && data['status']=="validation"){
              $(".tabloadershow1").hide();
              swal(data.message); return false;
            }
			$(".tabloadershow1").hide();
            $('#templates_list_div').html(data);
            if(load_type=='list'){
                setTimeout(function(){ 
                    var default_template_id = $('#default_template_id').val();
                    var exercise_ids = $('#exercise_ids').val();
                    get_template_exercises(default_template_id,exercise_ids);
                }, 1000);
            }
		}
	});
}

function get_template_exercises(default_template_id,exercise_ids){
    $(".tabloadershow").show();
    $('.template_list_tiles').removeClass('template_tile_div');
    $('#template_div_'+default_template_id).addClass('template_tile_div');
    var load_exercise_url = "{{ url('/getExerciseList') }}?category_id=&position_id=&search_exercise=&is_template=0&loadtype=list&selected_exercise_ids="+exercise_ids;
	$('#tempexercises_list_div').load(load_exercise_url);
    setTimeout(function(){ 
    	$(".tabloadershow").hide();
	}, 1500);
}

function clearTemplateSearch(){
    $('#search_template').val('');
    getTemplateList('list');
}
function view_file(file_type, file_url){
    if(file_type=='image'){
        $('#display_image').html('<img src="'+file_url+'" style="max-height:100%; max-width:100%;padding: 0 30px 0 30px;">');
    } else {
        $('#display_image').html('<video width="100%" height="350" controls autoplay style="padding: 0 30px 0 30px;"><source src="'+file_url+'" type="video/mp4"></video>');
    }
    $('#image_overview').modal({backdrop: 'static', keyboard: false});  
    $('#image_overview').modal('show');
}
function edit_exercise(exercise_id){
    var trlang = currentLang.split("/")
    window.location.href = "{{ url('/createExercise') }}?exercise_id="+exercise_id+'&to_lang='+trlang[2];
}
function edit_template(template_id){
    var trlang = currentLang.split("/")
	window.location.href = "{{ url('/createExerciseTemplate') }}?template_id="+template_id+'&to_lang='+trlang[2];
}
function stop_video(){
    $('#display_image').html('');
    $('#image_overview').modal('hide');
}

function delete_template(template_id){
    swal({
		title: "Are you sure you want to delete this Template?",
		text: "",
		type: 'warning',
		showCancelButton: true,
		confirmButtonColor: '#218838',
		cancelButtonColor: '#dc3545',
		cancelButtonText: "No",
		confirmButtonText: 'Yes',
		allowOutsideClick: false,
		allowEscapeKey : false,
		showLoaderOnConfirm: true,
		position: 'top',
		preConfirm: function(result) {
			if(result){
				return new Promise(function(resolve) {
					swal.close();
					var load_exercise_url = "{{ url('/deleteTemplate') }}?template_id="+template_id;
                    $(".tabloadershow").show();
                    $.ajax({
                        url : load_exercise_url,
                        success: function(data){
                            $(".tabloadershow").hide();
                            window.location.href = "{{ url('/exerciseConfiguration') }}?pagetype=template";
                        }
                    });
				});
			}
		},
	}).then(function (result) {
		swal.close();
		return false;
	});
    
}

 $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        fetchExercises(page);
    });

 function fetchExercises(page) {

    $(".tabloadershow").show();
    $('#exercise_page').val(1);
    var category_id = $('#category_id').val();
    var position_id = $('#position_id').val();
    var search_exercise = encodeURI($('#search_exercise').val());
    var load_exercise_url = "{{ url('/getExerciseList') }}?category_id="+category_id+"&position_id="+position_id+"&search_exercise="+search_exercise+"&page="+page+"&is_template=0&loadtype=list&selected_exercise_ids=";   
        $.ajax({
            url: load_exercise_url,
            type: 'GET',
            success: function(data) {
                $(".tabloadershow").hide();

                // $('#exercises_list_div').load(load_exercise_url);
                $('#exercises_list_div').html(data);
            },
            error: function(error) {
                console.log(error);
            }
        });
    }

</script>
@endsection