{{-- @extends('front.practitioner.import.template.import') --}}
@extends('front.inner-layout.app')
@section('content')

<style>
	body {
		height: 95vh;
	}

	.invoice-page-menu a.btn.setting-btn svg {
    width: 20px;
	}
	.invoice-page-menu a.btn.setting-btn {
		padding: 0 !important;
		max-width: none;
		width: auto;
		min-width: auto;
		height: 36px;
		width: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.invoice-page-menu a.btn:hover svg path {
		fill: #fff;
	}
	.invoice-page-menu a.btn.delete-btn {
		display: flex;
		align-items: center;
		padding: 5px 0 !important;
		justify-content: center;
	}
	.invoice-page-menu a.btn.delete-btn svg {
		width: 15px;
		height: auto;
		margin-right: 10px;
	}

	.tabs-my-client-list .tab-menu ul li {
		min-width: 190px;
		min-height: 41px;
		
		background-color: #b3b3b3;
		display: inline-block;
		text-align: center;
		border-radius: 10px 10px 0px 0px;
	}
	.tabs-my-client-list .tab-menu ul li.active{
		background-color: #68afb5;
	}
	.tabs-my-client-list .tab-menu ul li a{
		font-size: 15px;
		letter-spacing: 0px;
		line-height: 44px;
		color: #ffffff;
		font-family: "Europa";
		text-align: center;
	}
	.tabs-my-client-list .tab-menu ul {
		margin: 0;
		padding: 0;
		margin-left: 15px;
	}
	.my-client-list-new-v1 table tr td a:hover{
		color: #45747a;
	}
	.my-client-list-new-v1 table tr td a{
		color: #24303f;
	}
	.my-client-list-new-v1 table tr td:first-child {
		min-width: auto;
	}
	.my-client-list-new-v1 .dr-table .table th a {    color: #24303f;}

	#client-list table tr td a:hover {
		color: green;
	}
	#my-team-tab .myteam p {
		word-break: inherit;
	}

	ul.search_clients_v1_head_icon {
	padding: 0;
	margin: 0;
	}
	.search_clients_v1_head_icon li a {	
		min-width: 35px;
		min-height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #45747b;
		border-radius: 5px;
	}
	.search_clients_v1_head_icon li {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	text-align: center;
	}
	.display-inline-block {
	display: inline-block;
	}
	.search-box-outer form {
	width: 350px;
	margin: 0;
	margin-right: 15px;
	position: relative;
	}

	.search_clients_v1_input {
		border-radius: 18px;
		width: 100%;
		height: 35px;
		outline: none;
		border: none;
		padding-left: 20px;
		background-color: #ffffff;
		border: 0.5px solid #969696;
	}
	button.search_clients_v1_btn {
	background-color: #68afb5;
	border: none;
	outline: none;
	/* height: 37px; */
	/* width: 11.8%; */
	position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		border-radius: 0 20px 20px 0;
		padding: 0 13px;
		display: flex;
    align-items: center;
    justify-content: center;
	}

	.clientd-wrapper .page-title {
		z-index: 0 !important;
	}

	.search-box-btns {
		display: flex;
		flex-wrap: wrap;
	}
	.tab-box .tab-menu {
		max-width: 998px;
		width: 100%;
	}
	.dashspace-area .page-content {
		padding-left: 80px;
		padding-right: 0;
	}

	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
		margin: 0 !important;
		margin-left: 10px !important;
		min-height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 120px;
	}
	/* .search-box-outer form {margin-top: -2px;} */
	button.search_clients_v1_btn svg {
		margin-top: -2px;

	}
	.search_clients_v1_head_icon li img {
		max-width: 20px;
		width: 20px;
	}

	.taking-new-table .table td, .taking-new-table .table th, .service-new-table .table td, .service-new-table .table th, .dr-table .table td, .dr-table .table th {
		padding: 18px;
	}

	.my-client-list-new-v1 table  .checkedbox {
		position: relative;
		top: auto;
		left: auto;
	}
	@media (min-width:768px) and (max-width:991px) {
		.notes-menu {
			padding-left: 0;
			padding-right: 0;
		}
		.search-box-btns {
			padding-left: 0;
		}
		.search-box-outer form {
    		width: 250px;
		}
	}
	@media (min-width:992px) and (max-width:1199px) {
		.notes-menu {
			padding-left: 0;
			padding-right: 0;
		}
		.search-box-btns {
			padding-left: 0;
		}
		.search-box-outer form {
			width: 280px;
		}
	}
	@media (min-width: 1200px) and (max-width: 1365px) {
		.page-content {
		padding: 15px 20px 15px 290px;
	}
	}

	@media (max-width:767px) {
	.search_clients_v1_head_icon li {
		margin-right: 0px;
		min-width: 30px;
		min-height: 30px;
		padding-top: 2px;
	}

	.my-client-list-new-v1 table tr td a:hover {
		color:#24303f;
	}
	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
		margin-left: 5px !important;
		padding: 3px 8px !important;
	}
	.search-box-outer {margin-bottom: 10px;}
	.tabs-my-client-list .tab-menu ul li a {
		padding: 10px;
	}
	.tabs-my-client-list .tab-menu ul li {
		min-width: auto;
	}
	.tabs-my-client-list .tab-menu ul {
		margin-left: 0px;
	}

	.taking-new-table .table td, .taking-new-table .table th, .service-new-table .table td, .service-new-table .table th, .dr-table .table td, .dr-table .table th {
		padding: 12px;
	}

	.search-box-btns {
		padding-left: 0px;
		width: 100%;
	}

	.notes-menu {
			padding-left: 0;
			padding-right: 0;
		}
		.search-box-outer form {
			width: 280px;
		}

		.tabs-my-client-list [class*=col-] {
			padding: 0;
		}
	}

	.my-client-list-new-v1 .dr-table .table-responsive {
		border-radius: 5px;
		overflow-y: hidden;
	}
	.my-client-list-new-v1 .table tbody+tbody {
		border-top: none;
	}
	.client_access_file_toggle_permission_access_some_calendars {
		top: -50px !important;
		right: 0 !important;

		top: 20px !important;
		right: 40px !important;
		z-index: 9;
	}
	.client_access_file_toggle_permission_access_some_calendars.active {
		display: block !important;
	}
	.communication-table .count_tr .d-inline {
		position: relative;
	}

	.popover-body h5 {
		font-size: 13px;
		line-height: 17px;
		font-weight: 500;
	}
	.popover {
		font-size: 14px !important;
		border: 1px solid #ccc !important;
		background: #fff !important;
		padding: 10px !important;
		border-radius: 5px !important;
		width: 300px !important;
		max-width: 300px;
	}

	.popover .media {
		padding: 0;
	}

	.popover-body .media img {
		width: 18px;
	}
</style>

<div class="">
{{-- @include('front.practitioner.clients.modals.myclientsfilter') --}}

<input type="hidden" name="filter_name" class="filter_name" />
<input type="hidden" name="filter_age_from" class="filter_age_from" />
<input type="hidden" name="filter_age_to" class="filter_age_to" />
<input type="hidden" name="filter_gender" class="filter_gender" />
<input type="hidden" name="filter_balance" class="filter_balance" />

<input type="hidden" name="scroll_value"  value="1"/>
<input type="hidden" name="sortflag" id="sortflag" value="0">
<input type="hidden" name="order_by_name" id="order_by_name">
<input type="hidden" name="short_by_name" id="short_by_name">
<input type="hidden" name="hidden_client_id" id="hidden_client_id">

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper my-income-main">
	<div class="client-call-menu">
		<div class="row m-0 align-items-center">
			<nav class="navbar navbar-light invoice-page-menu notes-menu w-100 my-income-menu">
				<div class="left-menu">
					<a href="{{route('practitioner.dashboard.client.recalls.index')}}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
					<a class="navbar-brand p-0 " href="{{ URL::previous() }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>
					<h1 class="page-title eagle-font font-400 mr-3">Client Recalls</h1>				

				</div>
				
				<div class="right-menu">
					@if(!isset($practitioner->parent_id))
						<a id="settings_btn" href="{{route('practitioner.dashboard.client.recalls.add')}}" class="btn btn-unfill setting-btn">
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 1467 1467" enable-background="new 0 0 1467 1467" xml:space="preserve">
							<path fill="#45747a" d="M884.695,378.907c-195.905-83.662-422.542,7.354-506.204,203.259s7.354,422.542,203.259,506.204  s422.542-7.354,506.204-203.259c40.166-94.137,41.345-200.414,3.122-295.384C1053.199,494.688,978.902,418.796,884.695,378.907z   M998.812,846.61c-62.504,146.513-231.909,214.636-378.422,152.132S405.754,766.833,468.258,620.32S700.167,405.685,846.68,468.188  c70.343,30.038,125.909,86.715,154.421,157.682C1029.82,696.837,1028.988,776.268,998.812,846.61L998.812,846.61z"/>
							<path fill="#45747a" d="M1463.393,543.248l-71.383-177.591c-10.059-24.904-38.293-36.975-63.197-26.916l-104.335,41.97  c-35.657-49.878-78.876-93.929-127.991-130.626l44.121-103.502c10.544-24.627-0.833-53.208-25.46-63.752h-0.139L938.943,7.631  c-24.627-10.614-53.139,0.763-63.752,25.39v0.208l-44.259,103.502c-60.492-10.059-122.163-10.753-182.863-1.942L606.1,30.454  c-9.99-24.904-38.294-36.975-63.129-26.985L365.38,74.921c-24.904,9.989-36.975,38.293-26.985,63.197l0,0l41.97,104.335  c-49.878,35.657-93.929,78.875-130.627,127.991l-103.502-44.121c-24.627-10.614-53.139,0.763-63.752,25.39v0.208L7.423,527.917  c-10.544,24.627,0.833,53.208,25.459,63.753h0.139l103.502,44.189c-9.99,60.562-10.545,122.232-1.665,182.933l-104.335,41.9  c-24.904,9.99-36.975,38.294-26.916,63.198l0,0l71.383,177.591c10.059,24.835,38.293,36.905,63.128,26.916l104.335-41.97  c35.657,49.878,78.875,93.929,127.991,130.627l-44.12,103.502c-10.545,24.696,0.901,53.208,25.528,63.753h0.069l176.064,74.99  c24.627,10.614,53.139-0.763,63.753-25.39v-0.208l44.259-103.503c60.492,10.059,122.164,10.753,182.863,1.942l41.971,104.335  c9.989,24.904,38.293,36.906,63.128,26.916l177.591-71.383c24.904-9.99,36.906-38.293,26.916-63.197l0,0l-42.039-104.335  c49.879-35.727,93.93-78.876,130.627-127.991l103.502,44.19c24.558,10.613,53.069-0.694,63.684-25.252l0.139-0.347l75.06-176.064  c10.545-24.627-0.901-53.139-25.528-63.684l0,0l-103.502-44.12c10.059-60.492,10.752-122.163,1.941-182.863l104.335-41.97  c24.835-10.059,36.837-38.362,26.778-63.197L1463.393,543.248z M1259.232,572.939c-21.922,8.811-34.339,32.119-29.414,55.22  c15.678,72.979,14.915,148.524-2.358,221.156c-5.411,22.962,6.521,46.549,28.234,55.775l95.108,40.582l-36.975,86.714  l-95.108-40.513c-21.714-9.365-47.034-1.596-59.799,18.245c-40.443,62.712-94.414,115.573-157.959,154.698  c-20.048,12.418-28.234,37.53-19.424,59.382l38.57,95.941l-87.408,35.102l-38.57-95.94c-7.354-18.384-25.182-30.523-45.022-30.523  c-3.398,0-6.798,0.347-10.128,1.11c-72.979,15.678-148.524,14.914-221.156-2.359c-22.962-5.48-46.549,6.452-55.774,28.165  l-40.583,95.247l-86.714-36.975l40.582-95.108c9.227-21.714,1.526-46.965-18.245-59.799  c-62.712-40.443-115.572-94.415-154.768-157.959c-12.487-20.048-37.53-28.234-59.382-19.424l-95.941,38.57l-35.171-87.408  l95.941-38.57c21.921-8.811,34.27-32.119,29.344-55.22c-15.678-72.979-14.915-148.524,2.358-221.156  c5.411-22.962-6.521-46.549-28.234-55.775l-95.108-40.513l36.975-86.714l95.178,40.513c21.713,9.296,46.965,1.596,59.798-18.245  c40.443-62.712,94.415-115.573,157.959-154.698c20.049-12.487,28.234-37.53,19.424-59.452l-38.57-95.872l87.478-35.171l38.57,95.871  c8.811,21.921,32.119,34.339,55.22,29.414c72.979-15.678,148.524-14.845,221.157,2.29c22.961,5.411,46.548-6.452,55.774-28.165  l40.582-95.178l86.715,36.975l-40.583,95.108c-9.227,21.713-1.525,46.964,18.245,59.798  c62.712,40.443,115.573,94.415,154.698,157.959c12.487,20.048,37.53,28.234,59.451,19.424l96.011-38.501l35.171,87.408  l-95.94,38.501L1259.232,572.939z"/>
							</svg>
						</a>
					@endif
				</div>
			</nav>
		</div>
	</div>
   <div class="brdr-bttm"></div>

   <div class="client-call-setting">
        <div class="call-setting-box">
            <h2>Client recall settings</h2>
            <h3 class="sub-title">Set follow-up timings</h3>
				<form id="addrecallsdata" name="addrecallsdata" method="POST" autocomplete="off">
            	@csrf
				<input type="hidden" name="practitioner_id" id="practitioner_id"  value="{{ $practitioner->id }}" />

					<div class="row justify-content-between">
						<div class="col-sm-12 col-md-6">
							<div class="form-group">
								{{-- <label for="">Add to recall list when client hasn't had an appointment for:</label> --}}
								<label for="">1. When should the 1st follow-up be sent?</label>
							</div>
						</div>
						<div class="col-sm-12 col-md-6">
							<div class="form-group">
								<div class="row">
									<div class="col-sm-12 col-md-6">
										<input name="recall_day" id="recall_day" type="text" class="form-control" value="{{ $recallsdata->recall_day ?? "6"  }}" required>
									</div>
									<div class="col-sm-12 col-md-6">
										<select name="recall_day_type" id="recall_day_type" class="single-select2" id="" data-minimum-results-for-search="Infinity">
											<option @if(isset($recallsdata->recall_day_type) && $recallsdata->recall_day_type=="Days") {{ "selected"  }} @endif value="Days">Days</option>
											<option @if((isset($recallsdata->recall_day_type) && $recallsdata->recall_day_type == "Weeks") || !isset($recallsdata->recall_day_type)) {{ "selected"  }} @endif value="Weeks">Weeks</option>
											<option @if(isset($recallsdata->recall_day_type) && $recallsdata->recall_day_type=="Months") {{ "selected"  }} @endif value="Months">Months</option>
			
										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-12 col-md-6">
							<div class="form-group">
								{{-- <label for="">Add to recall list when client hasn't had an appointment for second follow-up:</label> --}}
								<label for="">2. When should the 2nd follow-up be sent?</label>
							</div>
						</div>
						<div class="col-sm-12 col-md-6">
							<div class="form-group">
								<div class="row">
									<div class="col-sm-12 col-md-6">
										<input name="second_recall_day" id="second_recall_day" type="text" class="form-control" value="{{ $recallsdata->second_recall_day ?? "2"  }}" >
									</div>
									<div class="col-sm-12 col-md-6">
										<select name="second_recall_day_type" id="second_recall_day_type" class="single-select2" id="" data-minimum-results-for-search="Infinity">
											<option @if(isset($recallsdata->second_recall_day_type) && $recallsdata->second_recall_day_type=="Days") {{ "selected"  }} @endif value="Days">Days</option>
											<option @if((isset($recallsdata->second_recall_day_type) && $recallsdata->second_recall_day_type == "Weeks") || !isset($recallsdata->second_recall_day_type)) {{ "selected"  }} @endif value="Weeks">Weeks</option>
											<option @if(isset($recallsdata->second_recall_day_type) && $recallsdata->second_recall_day_type=="Months") {{ "selected"  }} @endif value="Months">Months</option>
			
										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-12 col-md-6">
							<div class="form-group">
								{{-- <label for="">Add to recall list when client hasn't had an appointment for third follow-up:</label> --}}
								<label for="">3. When should the 3rd follow-up be sent?</label>
							</div>
						</div>
						<div class="col-sm-12 col-md-6">
							<div class="form-group">
								<div class="row">
									<div class="col-sm-12 col-md-6">
										<input name="third_recall_day" id="third_recall_day" type="text" class="form-control" value="{{ $recallsdata->third_recall_day ?? "4"  }}" >
									</div>
									<div class="col-sm-12 col-md-6">
										<select name="third_recall_day_type" id="third_recall_day_type" class="single-select2" id="" data-minimum-results-for-search="Infinity">
											<option @if(isset($recallsdata->third_recall_day_type) && $recallsdata->third_recall_day_type=="Days") {{ "selected"  }} @endif value="Days">Days</option>
											<option @if((isset($recallsdata->third_recall_day_type) && $recallsdata->third_recall_day_type == "Weeks") || !isset($recallsdata->third_recall_day_type)) {{ "selected"  }} @endif value="Weeks">Weeks</option>
											<option @if(isset($recallsdata->third_recall_day_type) && $recallsdata->third_recall_day_type=="Months") {{ "selected"  }} @endif value="Months">Months</option>
			
										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-12 col-md-12">
							<div class="form-group">
								<label for="">Appointments that require a follow up</label>
							</div>
						</div>
						@php
							if ($recallsdata) {
								$recallsdataId = explode(',', $recallsdata->appointment_type_id);
							} else {
								$recallsdataId = $practitonerAppointmentTypes->pluck('id')->toArray();
							}

							
							$allAppointmentTypeIds = $practitonerAppointmentTypes->pluck('id')->toArray(); 
							$isAllSelected = empty(array_diff($allAppointmentTypeIds, $recallsdataId)); 
						@endphp

						<div class="col-sm-12 col-md-12">
							<div class="form-group">
								<select name="appointment_types[]" id="appointment_types" class="single-select2 service-dd" multiple>
									<option class="text-capitalize" value="All"
										@if ($isAllSelected)
											selected
										@endif
									>All</option>
									@foreach ($practitonerAppointmentTypes as $appointmentType)
										<option class="text-capitalize" value="{{ $appointmentType->id }}"
											@if (in_array($appointmentType->id, $recallsdataId) || $isAllSelected)
												selected
											@endif
										>{{ $appointmentType->appointment_type }}</option>
									@endforeach
								</select>
							</div>
						</div>
						{{-- <div class="col-sm-12 col-md-6">
							<div class="form-group">
								<select name="appointment_types[]" id="appointment_types" class="single-select2 service-dd" data-minimum-results-for-search="Infinity" multiple>
									<option class="text-capitalize" value="All">All</option>
										@foreach ($practitonerAppointmentTypes as $appointmentType)
										<option class="text-capitalize" value="{{$appointmentType->id}}"
										@if (in_array($appointmentType->id, $recallsdataId))
											selected
										@endif
										>{{ $appointmentType->appointment_type }}</option>
										</option>
										@endforeach

									
								</select>
							</div>
						</div> --}}
						<div class="col-sm-12">
							<div class="form-group mt-3">
								<button type="submit" class="btn-fill recalls_save">Update and save</button>
							</div>
						</div>
					</div>
				</form>
            </div>
        </div>
   </div>
</div>
<!-- Client Modal -->
 

	

 

@endsection

@section('js')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js" integrity="sha512-eviLb3jW7+OaVLz5N3B5F0hpluwkLb8wTXHOTy0CyNaZM5IlShxX1nEbODak/C0k9UdsrWjqIBKOFY0ELCCArw==" crossorigin="anonymous"></script>
   <script type="text/javascript">
	$(document).ready(function(e) {
		$(".access-some-calendar-info-icon").hover(function(e) {
			$(this).parent().find(".access-some-calendar-info-box").toggleClass('active');
		});

		$("[data-toggle=popover]").popover({
        html : true,
		enable:true,
        content: function() {
            var content = $(this).attr("data-popover-content");
            return $(content).children(".popover-body").html();
        },
        
    	});
	});

	$(document).on( 'submit', '#addrecallsdata', function(e) {
        e.preventDefault();

        var formData = new FormData(this);
        formData.append( 'practitioner_id', $("#practitioner_id").val() );
    
        $.ajax({
          type: "post",
          url: "{{ route('practitioner.dashboard.client.recalls.store') }}",
          data: new FormData(this),
          dataType: "JSON",
          cache: false,
          processData: false,
          contentType: false,
          beforeSend: function(msg) {
            $(".loading").addClass("d-block");
          }
        }).done( function(response) {
          $(".loading").removeClass("d-block");
          if( response.status == 'success' ) {
            Swal.fire({
            icon: response.status,
            title: response.msg,
            showClass: {
              popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
              }
            })
            setTimeout(function() {
				var baseUrl = "{{route('practitioner.dashboard.client.recalls.index')}}";     
                window.location.href = baseUrl;
				
			}, 500);
            
          }else{
            Swal.fire({
            icon: response.status,
            title: response.msg,
            showClass: {
              popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
              }
            })
          }
        }).fail(function (error) {
          $(".loading").removeClass("d-block");
        });
    });

	// $(document).on('change', '#appointment_types', function() {
	// 	var selectedTypes = $(this).val();
		

	// 	$.each(selectedTypes, function (index,value) {
	// 		if(value =='All'){
	// 			$(this).val(['All']).trigger('change');
    //      	}else {
	// 			$(this).find('option[value="All"]').prop('selected', false);
    // 		}
				
	// 	});
	// });

	$('.service-dd').on("select2:select", function(e) {
         var data = e.params.data.text;
         if (data == 'All') {
            $(".service-dd > option").prop("selected", "selected");
            $(".service-dd").trigger("change");
         }
    });
</script>
@endsection