Updates

public/css/style.css

@@ -3,6 +3,9 @@
   --primary-color: #1c4587;
   --bg-grey: #EDEEF1;
 }
+.border-lighter {
+    border: 1px solid #f3f3f3;
+}
 /* login css */
 .login-container {
   background-color: var(--bg-grey);

resources/views/app/new-patient.blade.php

@@ -23,7 +23,7 @@ $medicaidStates = Config::get('constants.medicaid_states');
 					<div class="alert alert-danger">{{ session('message') }}</div>
 					@endif
 					<div class="row">
-						<div class="col-md-6">
+						<div class="col-md-5">
 							<div class="row">
 								<div class="col-md-12 bg-light p-3 mb-2">
 									<h5 class="m-0 font-weight-bold">Patient Name / Demographics:</h5>
@@ -157,139 +157,148 @@ $medicaidStates = Config::get('constants.medicaid_states');
 
 							<div class='form-group mb-3'>
 								<label class='control-label'>How did you hear about us?</label>
-								<input  class='form-control' type='text' required="" name='initiative'/>
+								<input class='form-control' type='text' required="" name='initiative' />
 							</div>
 
 						</div>
-						<div class="col-md-6">
-							<div class="col-md-12 bg-light py-3 px-1 mb-2 ">
-								<h5 class="m-0 font-weight-bold">Insurance Coverage:</h5>
-							</div>
-							<div class="px-1">
-								<div class="row">
-									<div class="form-group col-md-12">
-										<p class="mb-1 font-weight-bold">Type of insurance card:</p>
-										<div class="form-check form-check-inline">
-											<label class="form-check-label"><input class="form-check-input" type="radio" v-model="planType" name="planType" value="MEDICARE">Medicare Part B (Primary)</label>
-										</div>
-										<div class="form-check form-check-inline">
-											<label class="form-check-label"><input class="form-check-input" type="radio" v-model="planType" name="planType" value="MEDICAID">Medicaid (Primary)</label>
-										</div>
-										<div class="form-check form-check-inline">
-											<label class="form-check-label"><input class="form-check-input" type="radio" v-model="planType" name="planType" value="COMMERCIAL">Commercial / Third Party (Primary)</label>
-										</div>
-									</div>
+						<div class="col-md-7">
+							<div class="border-lighter">
+								<div class="col-md-12 bg-light py-3 px-1 mb-2 ">
+									<h5 class="m-0 font-weight-bold">Insurance Coverage:</h5>
 								</div>
-								<div class="px-1">
-									<div class="row" v-show="planType == 'COMMERCIAL'">
-										<div class="form-group col-md-12">
-											<label for="" class="control-label">Commercial Payer</label>
-											<input name="commercialPayerUidSuggest" class="form-control input-sm" value="" stag-suggest stag-suggest-ep="/search-payer/json" />
-											<input type="hidden" name="commercialPayerUid" />
-										</div>
-										<div class="form-group col-md-6">
-											<label class="control-label">Patient Member Identifier</label>
-											<input type="text" name="commercialMemberIdentifier" class="form-control input-sm">
-										</div>
-										<div class="form-group col-md-6">
-											<label class="control-label">Patient Group Number</label>
-											<input type="text" name="commercialGroupNumber" class="form-control input-sm">
-										</div>
-									</div>
+								<div class="px-4">
 									<div class="row">
-										<div class="form-group col-md-12" v-if="planType == 'MEDICAID' || planType == 'COMMERCIAL'">
+										<div class="form-group col-md-12">
+											<p class="mb-1 font-weight-bold">Type of insurance card:</p>
 											<div class="form-check form-check-inline">
-												<label class="form-check-label"><input class="form-check-input" type="checkbox" name="isPatientSubscriber" v-model="isPatientSubscriber">Is Patient The Subscriber?</label>
+												<label class="form-check-label"><input class="form-check-input" type="radio" v-model="planType" name="planType" value="MEDICARE">Medicare Part B (Primary)</label>
+											</div>
+											<div class="form-check form-check-inline">
+												<label class="form-check-label"><input class="form-check-input" type="radio" v-model="planType" name="planType" value="MEDICAID">Medicaid (Primary)</label>
+											</div>
+											<div class="form-check form-check-inline">
+												<label class="form-check-label"><input class="form-check-input" type="radio" v-model="planType" name="planType" value="COMMERCIAL">Commercial / Third Party (Primary)</label>
 											</div>
 										</div>
 									</div>
-
-									<div v-if="!isPatientSubscriber && (planType == 'MEDICAID' || planType == 'COMMERCIAL')" class="row">
-										<div class="col-md-12 bg-light p-3 mb-2">
-											<h5 class="m-0 font-weight-bold">Subscriber Details:</h5>
-										</div>
-										<div class="form-group col-md-4">
-											<label class="control-label">Subscriber First Name</label>
-											<input type="text" name="subscriberNameFirst" value="" class="form-control input-sm">
-										</div>
-										<div class="form-group col-md-4">
-											<label class="control-label">Subscriber Middle Name / MI</label>
-											<input type="text" name="subscriberNameMiddle" value="" class="form-control input-sm">
-										</div>
-										<div class="form-group col-md-4">
-											<label class="control-label">Subscriber Last Name</label>
-											<input type="text" name="subscriberNameLast" value="" class="form-control input-sm">
-										</div>
-										<div class="form-group col-md-4">
-											<label class="control-label">Subscriber Suffix</label>
-											<input type="text" name="subscriberNameSuffix" value="" class="form-control input-sm">
-										</div>
-										<div class="form-group col-md-4">
-											<label class="control-label">Subscriber Sex</label>
-											<select class="form-control input-sm" name="subscriberSex">
-												<option value="">--</option>
-												<option value="M">Male</option>
-												<option value="F">Female</option>
-												<option value="UNKNOWN">Unknown</option>
-											</select>
-										</div>
-										<div class="form-group col-md-4">
-											<label class="control-label">Subscriber Dob</label>
-											<input type="date" name="subscriberDob" value="" class="form-control input-sm">
+									<div class="px-4">
+										<div class="row" v-show="planType == 'COMMERCIAL'">
+											<div class="form-group col-md-12">
+												<label for="" class="control-label">Commercial Payer</label>
+												<input name="commercialPayerUidSuggest" class="form-control input-sm" value="" stag-suggest stag-suggest-ep="/search-payer/json" />
+												<input type="hidden" name="commercialPayerUid" />
+											</div>
+											<div class="form-group col-md-6">
+												<label class="control-label">Patient Member Identifier</label>
+												<input type="text" name="commercialMemberIdentifier" class="form-control input-sm">
+											</div>
+											<div class="form-group col-md-6">
+												<label class="control-label">Patient Group Number</label>
+												<input type="text" name="commercialGroupNumber" class="form-control input-sm">
+											</div>
 										</div>
-										<div class="form-group col-md-12">
-											<label class="control-label">What is the patient's relationship to the subscriber?</label>
-											<select name="patientRelationshipToSubscriber" class="form-control input-sm">
-												<option value="">--</option>
-												<option value="SPOUSE">Spouse</option>
-												<option value="CHILD">Child</option>
-												<option value="EMPLOYEE">Employee</option>
-												<option value="ORGAN_DONOR">Organ Donor</option>
-												<option value="CADAVER_DONOR">Cadaver Donor</option>
-												<option value="LIFE_PARTNER">Life Partner</option>
-												<option value="OTHER_RELATIONSHIP">Other Relationship</option>
-												<option value="UNKNOWN">Unknown</option>
-											</select>
+										<div class="row">
+											<div class="form-group col-md-12" v-if="planType == 'MEDICAID' || planType == 'COMMERCIAL'">
+												<div class="form-check form-check-inline">
+													<label class="form-check-label"><input class="form-check-input" type="checkbox" name="isPatientSubscriber" v-model="isPatientSubscriber">Is Patient The Subscriber?</label>
+												</div>
+											</div>
 										</div>
-									</div>
-									<div class="mb-1" v-if="planType == 'COMMERCIAL'">
-										<h6 class="font-weight-bold">Does the patient also have either a Medicare or Medicaid #? (optional)</h6>
-									</div>
-									<div class="row" v-if="planType == 'MEDICAID' || planType == 'COMMERCIAL'" :class="planType == 'COMMERCIAL' ? 'mx-0' : ''">
-										<div class="col-md-12">
-											<div class="bg-light p-3 mb-2">
-											<h5 class="m-0 font-weight-bold">Medicaid Information:</h5>
+
+										<div v-if="!isPatientSubscriber && (planType == 'MEDICAID' || planType == 'COMMERCIAL')" class="row">
+											<div class="col-md-12 bg-light p-3 mb-2">
+												<h5 class="m-0 font-weight-bold">Subscriber Details:</h5>
+											</div>
+											<div class="form-group col-md-4">
+												<label class="control-label">Subscriber First Name</label>
+												<input type="text" name="subscriberNameFirst" value="" class="form-control input-sm">
+											</div>
+											<div class="form-group col-md-4">
+												<label class="control-label">Subscriber Middle Name / MI</label>
+												<input type="text" name="subscriberNameMiddle" value="" class="form-control input-sm">
+											</div>
+											<div class="form-group col-md-4">
+												<label class="control-label">Subscriber Last Name</label>
+												<input type="text" name="subscriberNameLast" value="" class="form-control input-sm">
+											</div>
+											<div class="form-group col-md-4">
+												<label class="control-label">Subscriber Suffix</label>
+												<input type="text" name="subscriberNameSuffix" value="" class="form-control input-sm">
+											</div>
+											<div class="form-group col-md-4">
+												<label class="control-label">Subscriber Sex</label>
+												<select class="form-control input-sm" name="subscriberSex">
+													<option value="">--</option>
+													<option value="M">Male</option>
+													<option value="F">Female</option>
+													<option value="UNKNOWN">Unknown</option>
+												</select>
+											</div>
+											<div class="form-group col-md-4">
+												<label class="control-label">Subscriber Dob</label>
+												<input type="date" name="subscriberDob" value="" class="form-control input-sm">
+											</div>
+											<div class="form-group col-md-12">
+												<label class="control-label">What is the patient's relationship to the subscriber?</label>
+												<select name="patientRelationshipToSubscriber" class="form-control input-sm">
+													<option value="">--</option>
+													<option value="SPOUSE">Spouse</option>
+													<option value="CHILD">Child</option>
+													<option value="EMPLOYEE">Employee</option>
+													<option value="ORGAN_DONOR">Organ Donor</option>
+													<option value="CADAVER_DONOR">Cadaver Donor</option>
+													<option value="LIFE_PARTNER">Life Partner</option>
+													<option value="OTHER_RELATIONSHIP">Other Relationship</option>
+													<option value="UNKNOWN">Unknown</option>
+												</select>
 											</div>
-											
 										</div>
-										<div class="form-group col-md-6">
-											<label for="" class="control-label">Medicaid State</label>
-											<input class="form-control input-sm" list="mcdPayer" name="mcdPayerName" id="mcdPayerName">
-											<datalist id="mcdPayer">
-												<option value="">--</option>
-												@foreach($medicaidStates as $state)
-												<option>{{ $state }}</option>
-												@endforeach
-											</datalist>
+										<div class="mb-1" v-if="planType == 'COMMERCIAL'">
+											<h6 class="font-weight-bold">Does the patient also have either a Medicare or Medicaid #? (optional)</h6>
 										</div>
+										<div class="row" v-if="planType == 'MEDICAID' || planType == 'COMMERCIAL'" :class="planType == 'COMMERCIAL' ? 'mx-0' : ''">
+											<div class="col-md-12">
+												<div class="bg-light p-1 mb-2">
+													<h5 class="m-0 font-weight-bold">Medicaid Information:</h5>
+												</div>
+											</div>
+											<div class="col-12">
+												<div class="px-2">
+													<div class="form-group col-md-6">
+														<label for="" class="control-label">Medicaid State</label>
+														<input class="form-control input-sm" list="mcdPayer" name="mcdPayerName" id="mcdPayerName">
+														<datalist id="mcdPayer">
+															<option value="">--</option>
+															@foreach($medicaidStates as $state)
+															<option>{{ $state }}</option>
+															@endforeach
+														</datalist>
+													</div>
 
-										<div class="form-group col-md-6">
-											<label class="control-label">Medicaid Number</label>
-											<input type="text" name="mcdNumber" class="form-control input-sm">
+													<div class="form-group col-md-6">
+														<label class="control-label">Medicaid Number</label>
+														<input type="text" name="mcdNumber" class="form-control input-sm">
+													</div>
+												</div>
+											</div>
 										</div>
-									</div>
 
-									<div class="row" v-if="planType == 'MEDICARE' || planType == 'COMMERCIAL'" :class="planType == 'COMMERCIAL' ? 'mx-0' : ''">
-										<div class="col-md-12">
-											<div class="bg-light p-3 mb-2">
-											<h5 class="m-0 font-weight-bold">Medicare Information:</h5>
+										<div class="row" v-if="planType == 'MEDICARE' || planType == 'COMMERCIAL'" :class="planType == 'COMMERCIAL' ? 'mx-0' : ''">
+											<div class="col-md-12">
+												<div class="bg-light p-1 mb-2">
+													<h5 class="m-0 font-weight-bold">Medicare Information:</h5>
+												</div>
+											</div>
+											<div class="col-12">
+												<div class="px-2">
+													<div class="form-group col-md-6">
+														<label class="control-label">Medicare Number</label>
+														<input type="text" name="mcrNumber" class="form-control input-sm">
+													</div>
+												</div>
 											</div>
-										</div>
-										<div class="form-group col-md-6">
-											<label class="control-label">Medicare Number</label>
-											<input type="text" name="mcrNumber" class="form-control input-sm">
-										</div>
 
+										</div>
 									</div>
 								</div>
 							</div>