@extends('dashboard/layout.app')
@section('title', 'BettrAi | Programs and Devices')
@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">
.behavioral_plus_btn{
	position: absolute;
	left: -32px;
	top: 20px;
}
.search_loader_codes{
	margin-top:-20px;
	text-align: center;
}
.checkbox > span {
  background-color: #E5E8EA !important;
}
.trBorder{
	border-top: 1px solid #ECF0F3;
}
.accordion_title{
	height: 40px;
	margin-bottom: 15px;
}
.recommend_td_class{
	width:25% !important;
}
.radio_span{
	transform: translate(0) !important;
}
.btn-custom-icon {
    height: 25px !important;
    width: 30px !important;
}
.dial_plus_btn {
    position: absolute;
    right: 112% !important;
}
/* .consent_btn_div{
	float: right;
	margin-top: -25px;
} */
.file_attach_style{
	padding: 15px 12px;
	background: #f2f2f2;
	border-radius: 7px;
}
.remove_preview{
	position: absolute;
	left: 90% !important;
	bottom: 40% !important;
}
.upload_form_sec{
	padding:10px;
}
.disabledCursor{
	cursor: not-allowed !important;
}

.behavioral_plus_btn{
	position: absolute;
	left: -32px;
	top: 20px;
}
.search_loader_codes{
	margin-top:-20px;
	text-align: center;
}
.form-group label {
    font-size: 1rem;
    font-weight: 400;
    color: #464E5F;
    /* word-wrap: unset; */
    word-break: break-all !important;
}
</style>
<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;
}
#divLoadingInPopup.tabloadershow1 {
    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>
<div class="content d-flex flex-column flex-column-fluid mt-8" 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="6">
					<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="pending">
									<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>
						<!--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" 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="80">
								<div class="pb-5 form-group" data-wizard-type="step-content">