@extends('dashboard/layout.app')
@section('title', 'BettrAi | Patient Registration')
@section('content')
<link href="{{ URL::to('assets/css/pages/wizard/wizard-1.css') }}?v={{ rand(1000000,9999999) }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::to('assets/css/style_patientact.css') }}?v={{ rand(1000000,9999999) }}" rel="stylesheet" type="text/css" />
<style>
	label>span {
		font-size: 13px;
		position: absolute;
		left: 50%;
		bottom: 30%;
		transform: translate(-50%, 80%);
		width: 100%;
		font-weight: 500;
		text-align: center;
		line-height: 14px;
	}
.popup_table_header{
	background-color: #156082;
	color: #FFFFFF;
	font-weight: 550;
	text-align: left;
	padding: 5px;
	border-bottom: 2px solid #fff;
	font-size: 14px;
}
.even_rowclass{
	background-color: #e7eaed;
	color: #212121 !important;
	font-size: 13px;
	text-align: left;
	padding: 5px;
	border-bottom: 1px solid #fff;
	font-weight: 450;
}
.odd_rowclass{
	background-color: #ccd2d8;
	color: #212121 !important;
	font-size: 13px;
	text-align: left;
	padding: 5px;
	border-bottom: 1px solid #fff;
	font-weight: 450;
}
.popup_heading{
	font-size: 25px;
  	font-weight: 450;
}
.popup_warning_small{
	font-size:13px;
}
.popup_confirm_text{
	font-size:15px;
}
.popup_normal_content{
	font-weight:400;
}
.validate_swal2_popup{
	width: 55% !important;
  	line-height: 25px;
}
.swal2-actions{
	margin: 0 !important;
}
.pop_middle_col{
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
.duplicate_table_div{
	max-height:150px;
	overflow-y: auto !important;
	scrollbar-color: rgba(var(--black-rgb),.2) rgba(var(--white-rgb),.1);
	scrollbar-width: thin !important;
	overflow-x: hidden !important;
}
</style>
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
		<!--begin::Subheader-->
	<div class="d-flex flex-column-fluid">
		<!--begin::Container-->
		<div class="container">
				<!--begin::Dashboard-->
			<div class="card card-custom gutter-b card-stretch">
					<!--begin::Header-->
				<div class="card-header border-0 pb-0 pt-2">
					<h3 class="card-title align-items-start flex-column">
						<span class="card-label font-weight-bolder text-dark">Add New Patient</span>
					</h3>
					@if($sourcepage!='')
						<div class="card-toolbar">		
							<a class="btn btn-light-primary font-weight-bold  mr-5 showloader" href="{{ url('/qualifiedPatients') }}">Back</a>
						</div>
					@endif
				</div>
				<div class="card-body pb-0 pt-2">
					<input type="hidden" name="page_steps_count" id="page_steps_count" value="3">
					<div class="wizard wizard-1" id="kt_wizard_v1" data-wizard-state="between" data-wizard-clickable="false">
						<!--begin::Wizard Nav-->
						<div class="wizard-nav">
							<div class="wizard-steps">
								<!--begin::Wizard Step 1 Nav-->
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="current">
									<div class="wizard-label">
										<i class="wizard-icon fas fa-user-md"></i>
										<h3 class="wizard-title">1. Patient Profile</h3>
									</div>
									<span class="svg-icon svg-icon-xl wizard-arrow">
										<!--begin::Svg Icon | path:assets/media/svg/icons/Navigation/Arrow-right.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">
												<polygon points="0 0 24 0 24 24 0 24"></polygon>
												<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000)" x="11" y="5" width="2" height="14" rx="1"></rect>
												<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997)"></path>
											</g>
										</svg>
										<!--end::Svg Icon-->
									</span>
								</div>
								<!--end::Wizard Step 1 Nav-->
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="pending" style="display: none;">
								</div>
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="pending" style="display: none;">
								</div>

								<!--begin::Wizard Step 2 Nav-->
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="">
									<div class="wizard-label">
										<i class="wizard-icon fas fas fa-medkit"></i>
										<h3 class="wizard-title">2. Care Program</h3>
									</div>
									<span class="svg-icon svg-icon-xl wizard-arrow">
										<!--begin::Svg Icon | path:assets/media/svg/icons/Navigation/Arrow-right.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">
												<polygon points="0 0 24 0 24 24 0 24"></polygon>
												<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000)" x="11" y="5" width="2" height="14" rx="1"></rect>
												<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997)"></path>
											</g>
										</svg>
										<!--end::Svg Icon-->
									</span>
								</div>
								<!--end::Wizard Step 2 Nav-->
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="pending" style="display: none;">
								</div>
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="pending" style="display: none;">
								</div>

								<!--begin::Wizard Step 3 Nav-->
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="">
									<div class="wizard-label">
										<i class="wizard-icon fas fa-user-injured"></i>
										<h3 class="wizard-title">3. Details and Submit</h3>
									</div>
									<!-- <span class="svg-icon svg-icon-xl wizard-arrow">
										<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">
												<polygon points="0 0 24 0 24 24 0 24"></polygon>
												<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000)" x="11" y="5" width="2" height="14" rx="1"></rect>
												<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997)"></path>
											</g>
										</svg>
									</span> -->
								</div>
								<!--end::Wizard Step 3 Nav-->
								
								<!--begin::Wizard Step 5 Nav-->
								<!-- <div class="wizard-step" data-wizard-type="step" data-wizard-state="">
									<div class="wizard-label">
										<i class="wizard-icon fas fa-clipboard-check"></i>
										<h3 class="wizard-title">4. Review and Submit</h3>
									</div>
									<span class="svg-icon svg-icon-xl wizard-arrow last">
										<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">
												<polygon points="0 0 24 0 24 24 0 24"></polygon>
												<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000)" x="11" y="5" width="2" height="14" rx="1"></rect>
												<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997)"></path>
											</g>
										</svg>
									</span>
								</div> -->
								<!--end::Wizard Step 5 Nav-->
							</div>
							<div class="d-flex flex-column w-80 mr-2">
								<div class="d-flex align-items-center justify-content-between mb-2">
									<span class="text-muted mr-2 font-size-sm font-weight-bold progress_value">0%</span>
									<span class="text-muted font-size-sm font-weight-bold">Progress</span>
								</div>
								<div class="progress progress-xs w-100">
									<div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
								</div>
							</div>
						</div>
						<!--end::Wizard Nav-->
					</div>
					<div class="row justify-content-center my-5 px-8 px-lg-10">
						<div class="col-xl-12 col-xxl-7">
							<!--begin::Wizard Form-->
							<form class="form fv-plugins-bootstrap fv-plugins-framework" id="newPatientForm" name="newPatientForm" method="post" enctype="multipart/form-data">
								<!--begin::Wizard Step 1-->
								<input type="hidden" id="vir_patient_id" name="vir_patient_id" value="">
								<input type="hidden" name="_token" value="{{csrf_token()}}"/>	
								<input type="hidden" id="actual_progress_value" name="actual_progress_value" value="0">
								<input type="hidden" id="after_save_progress" name="after_save_progress" value="16">
								<div class="pb-5" data-wizard-type="step-content">
									<div class="row">
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container has-success">
											<label>Prefix</label>
											<select class="form-control" name="patient_prefix" id="patient_prefix" autocomplete="off">
												<option value="">Select One</option>
												<option value="Mr." >Mr.</option>
												<option value="Mrs." >Mrs.</option>
												<option value="Miss" >Miss</option>
												<option value="Ms." >Ms.</option>
												<option value="Dr." >Dr.</option>
												<option value="Other" >Other</option>
					 						</select>
											<div class="fv-plugins-message-container"></div></div>
											<!--end::Input-->
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container has-success">
												<label>Last Name</label><span class="text-danger"> *</span>
												<input type="text" class="form-control form-control-solid " name="patient_last_name" placeholder="Last Name" value="" id="patient_last_name">
												<span class="form-text text-muted"></span>
												<div class="fv-plugins-message-container"></div>
											</div>
											<!--end::Input-->
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container has-success">
												<label>Middle Name</label>
												<input type="text" class="form-control form-control-solid " name="patient_middle_name" placeholder="Middle Name" value="" id="patient_middle_name" autocomplete="off">
												<span class="form-text text-muted"></span>
												<div class="fv-plugins-message-container"></div>
											</div>
											<!--end::Input-->
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container has-success">
												<label>First Name</label><span class="text-danger"> *</span>
												<input type="text" class="form-control form-control-solid " name="patient_first_name" placeholder="First Name" value="" id="patient_first_name">
												<span class="form-text text-muted"></span>
												<div class="fv-plugins-message-container"></div>
											</div>
											<!--end::Input-->
										</div>
										
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container has-success">
												<label>DOB</label><span class="text-danger"> *</span>
												<input type="text" class="form-control form-control-solid date_picker" name="dob" id="dob" placeholder="MM/DD/YYYY" required="required" value="" data-value="" data-end="yes" onkeyup="validate_dateval();">
											
											<div class="fv-plugins-message-container"></div></div>
											<!--end::Input-->
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container has-success">
											<label>Gender</label><span class="text-danger"> *</span>
											<select class="form-control" name="gender" id="gender">
												<option value="">Select Gender</option>
												<option  value="Male">Male</option>
												<option  value="Female">Female</option>
												<option  value="Other">Other</option>
					 						</select>
											<div class="fv-plugins-message-container"></div></div>
											<!--end::Input-->
										</div>
									</div>
									
									<h3 class="mb-7 font-weight-bold text-dark sub_heading_text">Select primary reason for patient BettrAi program</h3>
									<div class="fv-plugins-message-container">
										<div data-validator="notEmpty" class="fv-help-block other_reason_error" style="display: none;">Please scan all selected devices</div>
									</div>
									<div class="row mb-10 form-group">
																				<div class="col-xl-4 col-sm text-center" style="padding: 0 0 25px">
											<input type="checkbox" name="reason_id[]" id="other" value="other" class="reason_select" >
											<label for="other" class="icon-radio">
											<img src="{{ URL::to('assets/media/disease/reason/06-other.png') }}" align="center" width="80px" height="80px" class="faicon"/>	
											<span>Other <input type="text" name="other_reason" id="other_reason" value="" class="form-control p-4 other_reason_text" placeholder="Please specify other" style="height: 5px;"></span>
											</label>
										</div>
									</div>	
								</div>
							
								<!--begin::Wizard Actions-->
								<div class="d-flex justify-content-between border-top mt-5 next_button float-right">
									<button type="button" class="btn btn-primary font-weight-bold px-9 py-4" onclick="save_patientreason()">Save & Next</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="divLoading" class="tabloadershow"></div>
<script type="text/javascript">
	function save_patientreason(){
	var patient_prefix = $('#patient_prefix').val();
	var patient_first_name = $('#patient_first_name').val();
	var patient_last_name = $('#patient_last_name').val();
	var patient_middle_name = $('#patient_middle_name').val();
	var other_reason = $('#other_reason').val();
	// patient_first_name = getTranslateText(patient_first_name,trlang[2],'en');
	// $('#patient_first_name').val(patient_first_name);
	// patient_last_name = getTranslateText(patient_last_name,trlang[2],'en');
	// $('#patient_last_name').val(patient_last_name);
	// other_reason = getTranslateText(other_reason,trlang[2],'en');
	// $('#other_reason').val(other_reason);
	var dob = $('#dob').val();
	var gender = $('#gender').val();
	var all_reasons = $("input[name='reason_id\\[\\]']:checked").map(function(){
		return $(this).val();
	}).get();
	if(patient_last_name==''){
		swal("Please enter patient last name");
		return false;
	}
	if(patient_first_name==''){
		swal("Please enter patient first name");
		return false;
	}
	if(dob==''){
		swal("Please select date of birth");
		return false;
	}
	if(gender==''){
		swal("Please select gender");
		return false;
	}
	if (all_reasons.length == 0) {
		swal("Please select reason");
		return false;
	}
	if (all_reasons.length==1 && all_reasons[0] == 'other' && other_reason=='') {
		swal("Please enter other reason");
		return false;
	}
	var patient_id = '';
	var posturl = "{{ url('/validateDuplicate') }}";
	$(".tabloadershow").show();
	$.ajax({
		url : posturl,
		type:"POST",
		data:$('#newPatientForm').serializeArray(),
		success: function(data){
			$(".tabloadershow").hide();
			if(data=='success'){
				save_after_validation();
			} else {
				var yes_str = '"Yes"';
				var no_str = '"No"';
				var pop_msg = "<span class='popup_heading'>Duplicate Patient Warning</span>\n";
					pop_msg += "<span class='popup_normal_content'>There are one or more patients with the same last name, date of birth and gender in the portal.</span>\n";
				    pop_msg += "<span class='popup_normal_content'>Duplicate Patient Details:</span>"+data;
					pop_msg += "<span class='popup_warning_small'>To view the previously created patient chart, go to your dashboard and enter the patient's name or UID in the search box.";
					pop_msg += " If you do not have access to the original patient's chart, please contact your provider administrator to obtain access.</span>\n";
					pop_msg += "<span class='popup_confirm_text'>Select "+yes_str+" to create a new patient chart.(Warning: This may create a duplicate patient)</span>\n";
					pop_msg += "<span class='popup_confirm_text'>Select "+no_str+" if you wish to clear the entry and be redirected back to the patient registration screen.</span>\n";
				swal({
					title: pop_msg,
					text: "",
					//type: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#218838',
					cancelButtonColor: '#dc3545',
					cancelButtonText: "No",
					confirmButtonText: 'Yes',
					allowOutsideClick: false,
					allowEscapeKey : false,
					showLoaderOnConfirm: true,
					customClass: 'validate_swal2_popup',
					position: 'center',
					preConfirm: function(result) {
						if(result){
							return new Promise(function(resolve) {
								swal.close();
								save_after_validation();
							});
						}
					},
				}).then(function (result) {
					swal.close();
					//$('#newPatientForm').trigger('reset');
					location.reload();
					return false;
				});
			}
		}
	});
		// $.ajax({
		// 	url : posturl,
		// 	type:"POST",
		// 	data:$('#newPatientForm').serializeArray(),
		// 	success: function(data){
		// 		$(".tabloadershow").hide();
		// 		window.location.href= "{{ url('/recommendedPatientDetails') }}?patient_id="+data;
		// 	}
		// });
	
}
function save_after_validation(){
	var patient_id = '';
	$(".tabloadershow").show();
	var posturl = "{{ url('/savePatientReason') }}";
	$.ajax({
		url : posturl,
		type:"POST",
		data:$('#newPatientForm').serializeArray(),
		success: function(data){
			$(".tabloadershow").hide();
			window.location.href= "{{ url('/recommendedPatientDetails') }}?patient_id="+data;
		}
	});
}
function validate_dateval(){
	var date = $('#dob').val();
	var date_val = date.replace("_","");
	var loadurl = "{{ url('/validateDate') }}?date_val="+date_val;
	if(date_val.length==10){
		$.ajax({
			url : loadurl,
			success: function(data){
				if(data=='incorrect'){
					swal("Please enter/select valid DOB");
					$('#dob').val('');
				}
			}
		});
	}
}
</script>
@endsection