@extends('dashboard/layout.app')
@section('title', 'BettrAi | Patient Info Details')
@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 type="text/css">
#divLoading.tabloadershow {
    display: none;
    position: fixed;
    z-index: 100;
    background-image: url("{{ url('assets/images/loading-icon.gif') }}");
    opacity: 0.4;
    left: 0px;
    bottom: 0px;
    right: 0px;
    top: 50px;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>
<style>
	#divLoading.tabloadershow{
		/*margin-bottom:70% !important;*/
		margin-bottom: 10% !important;
		top: 0px !important;
		position: absolute !important; 
		background-image : url('../assets/images/loading-icon.gif') !important;
	}
	#divLoadingDoc.tabloadershowDoc {
		display: none;
		position: fixed;
		z-index: 100;
		background-image: url('../assets/images/loading-icon.gif') !important;
		opacity: 0.90;
		left: 0px;
		bottom: 0px;
		right: 0px;
		top: 50px;
		background-repeat: no-repeat;
		background-position: center center;
		background-color: white;
	}
</style>
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
		<!--begin::Subheader-->
	<div class="gutter-b" id="kt_subheader"></div>
	<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>
					<div class="card-toolbar">
					</div>
				</div>
				<div class="card-body pb-0 pt-2">
					<input type="hidden" name="page_steps_count" id="page_steps_count" value="7">
					<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="done">
									<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="done" style="display: none;">
								</div>
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="done" style="display: none;">
								</div>

								<!--begin::Wizard Step 2 Nav-->
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="done">
									<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="done" style="display: none;">
								</div>
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="done" style="display: none;">
								</div>

								<!--begin::Wizard Step 3 Nav-->
								<div class="wizard-step" data-wizard-type="step" data-wizard-state="current">
									<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="pending">
									<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">%</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: %;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
								</div>
							</div>
						</div>
					</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">									
								<input type="hidden" name="_token" value="{{csrf_token()}}"/>
								<input type="hidden" id="vir_patient_id" name="vir_patient_id" value="">
								<input type="hidden" id="actual_progress_value" name="actual_progress_value" value="">
								<input type="hidden" id="after_save_progress" name="after_save_progress" value="100">
								<!--end::Wizard Nav-->
								<div class="pb-5 form-group" data-wizard-type="step-content">
									<h3 class="mt-10 mb-10 font-weight-bold text-dark sub_heading_text">Patient Profile</h3>
									<div class="row mb-5">
										<div class="col-xl-6">
											<div class="form-group fv-plugins-icon-container">
												<label>Provider</label>
												<input type="text" readonly="readonly" disabled="disabled" value="" name="provider_name" class="form-control">
											</div>
										</div>
										<div class="col-xl-6">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>Patient Risk Level</label>
												<select name="medical_condition" id="medical_condition" class="form-control">
													<option value="">Select</option>
													<option  value="critical">High</option>
													<option  value="elevated">Medium</option>
													<option  value="normal">Low</option>
												</select>
											</div>
											<!--end::Input-->
										</div>
									</div>
									
									<div class="row mb-5">
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>Address 1</label>
												<input type="text" class="form-control" name="address1" id="address1" placeholder="Address" value="" autocomplete="off">
											</div>
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>Address 2</label>
												<input type="text" class="form-control" name="address2" id="address2" placeholder="Address" value="" autocomplete="nope">
											</div>
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>City</label><!-- <span class="text-danger">*</span> -->
												<input type="text" class="form-control" name="city" id="city" placeholder="City" value="" autocomplete="nope">
											</div>
											<!--end::Input-->
										</div>
									</div>
									<div class="row mb-5">
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>State</label>
												<input type="text" class="form-control" name="state" id="state" placeholder="State" value="" autocomplete="off">
											</div>
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>ZIP</label><!-- <span class="text-danger">*</span> -->
												<input type="text" class="form-control mask_zip" name="zip" id="zip" placeholder="ZIP" value="" autocomplete="nope" im-insert="true">
											</div>
											<!--end::Input-->
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>Patient E-mail ID</label><!-- <span class="text-danger">*</span> -->
												<input type="email" class="form-control" name="patient_email_id" id="patient_email_id" placeholder="E-mail" value="" autocomplete="nope">
											</div>
											<!--end::Input-->
										</div>
									</div>
									<div class="row mb-5">
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>Mobile Phone</label>
												<input type="text" class="form-control mask_phone" name="patient_contact_num" id="patient_contact_num" placeholder="Mobile Phone" value="" autocomplete="off" im-insert="true">
											</div>
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>Home Phone</label>
												<input type="text" class="form-control mask_phone" name="patient_home_phone" id="patient_home_phone" placeholder="Home Phone" value="" autocomplete="nope" im-insert="true">
											</div>
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>Other Phone</label>
												<input type="text" class="form-control mask_phone" name="patient_other_phone" id="patient_other_phone" placeholder="Other Phone" value="" autocomplete="nope" im-insert="true">
											</div>
										</div>
									</div>
									
									<div class="row mb-5">
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>MRN(Medical Record Number) - EHR/EMR</label>
												<input type="text" class="form-control" name="patient_mrn" id="patient_mrn" placeholder="" value="">
											</div>
											<!--end::Input-->
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>Preferred Language</label>
												<select id="preferred_language1" name="preferred_language" class="form-control" required="required">											
													<option  value="en">English</option>
													<option  value="es">Spanish</option>
													<option  value="zh-CN">Chinese</option>
													<option  value="tl">Filipino</option>
													<option  value="de">German</option>
													<option  value="vi">Vietnamese</option>
												</select>	
											</div>
											<!--end::Input-->
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>Preferred Contact Method</label>
												<div class="checkbox-inline">
													<label class="checkbox">
													<input type="checkbox"  name="preferred_contact_method[]" value="e">Email
													<span  class="span_al"></span></label>
													<label class="checkbox">
													<input type="checkbox"  name="preferred_contact_method[]" value="s">Text
													<span class="span_al"></span></label>
													<label class="checkbox">
													<input type="checkbox"  name="preferred_contact_method[]" value="p">Phone
													<span class="span_al"></span></label>
												</div>
											</div>
											<!--end::Input-->
										</div>
										<div class="col-xl-4">
											<!--begin::Input-->
											<div class="form-group fv-plugins-icon-container">
												<label>Primary Care Physician</label>
												<select id="overall_primary_physician" name="overall_primary_physician" class="form-control">	
													<option value="">-Select-</option>										
																									</select>	
											</div>
											<!--end::Input-->
										</div>
									</div>
																		<input type="hidden" name="sel_service_types" id="sel_service_types" value="">
									<div class="form-group1 row mb-5 pt-4" style="border-top: 2px solid #ccc;">
										<div class="col-lg-12">
											<div class="form-group1 row align-items-center data-repeater-item">
												<div class="col-lg-4">
													<label>Emergency Contact Name</label>
													<input type="text" class="form-control" placeholder="Emergency Contact Name" name="e_name" value="">
													<div class="d-md-none mb-2"></div>
												</div>
												<div class="col-lg-4">
													<label>Emergency Contact No</label>
													<input type="text" class="form-control mask_phone" placeholder="Emergency Contact Number" name="e_contact" value="">
													<div class="d-md-none mb-2"></div>
												</div>
												<div class="col-lg-4">
													<label>Relation</label>
													<select name="e_relation" id="e_relation" class="form-control">
																											</select>
													<div class="d-md-none mb-2"></div>
												</div>
												<div class="col-12"><div class="separator separator-dashed my-2"></div></div>
											</div>
										</div>
									</div>
									<div id="kt_repeater_2">