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

@extends ('layouts.template')

@section('content')

<?php
$patients = [1, 2, 3, 4];
$medicaidStates = Config::get('constants.medicaid_states');
?>
<style media="screen">
	.form-control {
		border-radius: 0;
	}
</style>

<div class="p-3 mcp-theme-1" id="newPatientContainer" v-cloak>
	<div class="col-12">
		<div class="card d-block mb-3" moe="">

			<div class="card-header">
				<strong>
					<i class="fas fa-user-plus"></i>
					New Patient
				</strong>
			</div>
			<div class="card-body">
				<form id="createNewPatientForm" show url="/api/client/create" class="px-2 pb-1 primary-form" redir="patients/view/[data]">
					@if (session('message'))
					<div class="alert alert-danger">{{ session('message') }}</div>
					@endif
					<div class="row">
						<div class="border-lighter col-md-6">
							<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>
								</div>
								<div class="col-md-12 form-group mt-2">
									<div class="d-flex align-items-center">
										<label class="m-0 w-25">Name:</label>
										<input autocomplete="_blank" type="text" name="patientNamePrefix" placeholder="Prefix" class="ml-2 form-control input-sm w-50">
										<input autocomplete="_blank" type="text" required name="patientNameFirst" placeholder="First" class="ml-2 form-control input-sm">
										<input autocomplete="_blank" type="text" name="patientNameMiddle" placeholder="Middle" class="ml-2 form-control input-sm">
										<input autocomplete="_blank" type="text" name="patientNameLast" placeholder="Last" class="ml-2 form-control input-sm">
										<input autocomplete="_blank" type="text" name="patientNameSuffix" placeholder="Suffix" class="ml-2 form-control input-sm w-50">
									</div>
								</div>
								<div class="col-md-12 p-0">
									<div class="col-md-6 form-group">
										<div class="d-flex align-items-center">
											<label class="m-0">Email:</label>
											<input class='form-control ml-2' type='email' placeholder="Email Address" name='emailAddress'>
										</div>
									</div>
								</div>
								<div class="col-md-12 p-0">
									<div class="col-md-4 form-group">
										<div class="d-flex align-items-center">
											<label class="m-0 w-25">Gender:</label>
											<select class="form-control input-sm ml-2" name="patientSex" select2>
												<option value="">--</option>
												<option value="M">Male</option>
												<option value="F">Female</option>
												<option value="UNKNOWN">Unknown</option>
											</select>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-5 form-group">
									<div class="d-flex align-items-center">
										<label class="m-0 w-25">DOB: <span class="text-danger">*</span></label>
										<input type="date" required name="patientDob" value="" class="form-control input-sm">
									</div>
								</div>
								<div class="col-md-5 form-group">
									<div class="d-flex align-items-center">
										<label class="m-0 w-25">Service:</label>
										<input type="date" name="dateOfService" value="{{date('Y-m-d')}}" class="form-control input-sm">
									</div>
								</div>
							</div>
							@if($pro->pro_type === 'ADMIN')
							<div class="row">
								<div class="col-md-5 form-group">
									<div class="d-flex align-items-center">
										<label class="m-0 w-25">HCP Pro:</label>
										<select name="hcpProUid" class="form-control input-sm" provider-search provider-type="hcp">
											<option value="">--select--</option>
										</select>
									</div>
								</div>
								<div class="col-md-7 form-group">
									<div class="d-flex align-items-center">
										<label class='m-0 w-25'>Coordinator:</label>
										<select name="assistantProUid" class="form-control input-sm ml-2" provider-search provider-type="default-na">
											<option value="">--select--</option>
										</select>
									</div>
								</div>
							</div>
							@elseif($pro->is_hcp === true)
							<div class="row">
								<div class="col-md-12">
									<div class='form-group'>
										<div class="d-flex align-items-center">
											<label class="m-0 w-25">HCP Pro:</label>
											<input type="text" class="form-control" readonly value="{{$pro->displayName()}}">
											<input type="hidden" name="hcpProUid" value="{{$pro->uid}}">
										</div>
									</div>
								</div>
							</div>
							@elseif($pro->isDefaultNA())
							<div class="row">
								<div class="col-md-5 form-group">
									<div class="d-flex align-items-center">
										<label class="m-0 w-25">HCP Pro:</label>
										<?php $teams = $pro->teamsWhereAssistant; ?>
										<select name="hcpProUid" class="form-control">
											@if(count($teams) > 1)
											<option value="">--select--</option>
											@endif
											@foreach($teams as $team)
											<option value="{{$team->mcp->uid}}">{{$team->mcp->displayName()}}</option>
											@endforeach
										</select>
									</div>
								</div>
								<div class="col-md-7 form-group">
									<div class="d-flex align-items-center">
										<label class='m-0 w-25'>Coordinator:</label>
										<input type="text" class="form-control" readonly value="{{$pro->displayName()}}">
										<input type="hidden" name="assistantProUid" value="{{$pro->uid}}">
									</div>
								</div>
							</div>
							@endif
							<div class="row">
								<div class="col-md-6 form-group">
									<div class="d-flex align-items-center">
										<label class='control-label m-0 d-flex align-items-center'>
											<span>Phone:</span>
											<a v-if="form.homeNumber" @click="hpnToCpn" class="ml-1 px-1 on-hover-opaque hpn-to-cpn c-pointer">
												<i class="fa fa-arrow-right"></i>
											</a>
											<a v-if="form.cellNumber && form.homeNumber" @click="swapHpnCpn" class="ml-1 px-1 on-hover-opaque swap-pns c-pointer">
												<i class="fa fa-retweet"></i>
											</a>
										</label>
										<input class='form-control ml-2' placeholder="Home Phone" autocomplete="_blank" stag-input-phone type='tel' name='homeNumber' v-model="form.homeNumber">
										</select>
									</div>
								</div>
								<div class="col-md-6 form-group">
									<div class="d-flex align-items-center">
										<label class='control-label m-0 d-flex align-items-center'>
											<span>Phone:</span>
											<a v-if="form.cellNumber" @click="cpnToHpn" class="ml-1 px-1 on-hover-opaque cpn-to-hpn c-pointer">
												<i class="fa fa-arrow-left"></i>
											</a>
										</label>
										<input class='form-control ml-2' placeholder="Cell Phone" autocomplete="_blank" stag-input-phone type='tel' name='cellNumber' v-model="form.cellNumber">
										</select>
									</div>
								</div>
							</div>


							<div class='form-group mb-3'>
								<label class='control-label'>How did you hear about us?</label>
								<input class='form-control' type='text' name='initiative' />
							</div>

							<div class='form-group mb-3 checkbox'>
								<label>
									<input type='checkbox' name='isTestRecord' />
									This is a test record
								</label>
							</div>

						</div>
						<div class="col-md-6">
							<div class="border-lighter">
								<div class="col-md-12 bg-light py-3 px-3 mb-2 ">
									<h5 class="m-0 font-weight-bold">Insurance Coverage:</h5>
								</div>
								<div class="px-3">
									<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>
									<div class="px-2">
										<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="" autocomplete="off" 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="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 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="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-2 mb-2">
													<h5 class="m-0 font-weight-bold">Medicaid Information:</h5>
												</div>
											</div>
											<div class="col-12">
												<div class="row">

												
												<div class="form-group col-md-6">
													<label for="" class="control-label">Medicaid State</label>
													<input class="form-control input-sm" list="mcdPayerOptions" name="mcdPayerName" id="mcdPayerName">
													<datalist id="mcdPayerOptions">
														<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" oninput="this.value = this.value.toUpperCase()">
												</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-2 mb-2">
													<h5 class="m-0 font-weight-bold">Medicare Information:</h5>
												</div>
											</div>
											<div class="col-12">
												<div class="form-group col-md-6">
													<label class="control-label">Medicare Number</label>
													<input type="text" name="mcrNumber" class="form-control input-sm" oninput="this.value = this.value.toUpperCase()">
												</div>
											</div>

										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="card-footer text-center">
				<button class="btn btn-primary" submit>Create New Patient</button>
			</div>
		</div>
	</div>
</div>

<link href="/select2/select2.min.css" rel="stylesheet" />
<script src="/select2/select2.min.js"></script>
<script src="/inputmask-5.x/dist/inputmask.js"></script>
<script>
	(function() {
		function init() {
			let im = new Inputmask("(999) 999-9999").mask('[stag-input-phone]');
			$(document)
				.off('change.insurance', '.insurance')
				.on('change.insurance', '.insurance', function() {
					$('[data-insurance]').addClass('d-none');
					$('[data-insurance="' + $(this).val() + '"]').removeClass('d-none');
					$(this).closest('form').attr('url', '/api/client/' + ($(this).val() === 'medicare' ? 'create' : 'createNonMcn'))
					$(this).closest('[moe]').removeAttr('initialized');
					initMoes();
					return false;
				});
			$('.select2').select2({
				width: '100%'
			});
		}
		addMCInitializer('new-patient', init, '#newPatientContainer');
	}).call(window);

	var newPatientContainer = new Vue({
		el: '#newPatientContainer',
		data: {
			form: {},
			planType: 'MEDICARE',
			isPatientSubscriber: true
		},
		methods: {
			hpnToCpn: function() {
				this.form.cellNumber = this.form.homeNumber;
				this.form.homeNumber = null;
			},
			cpnToHpn: function() {
				this.form.homeNumber = this.form.cellNumber;
				this.form.cellNumber = null;
			},
			swapHpnCpn: function() {
				var data = $.extend({}, this.form);
				this.form.homeNumber = data.cellNumber;
				this.form.cellNumber = data.homeNumber;
			},
			onCommercialPayerChange: function() {
				var input = $('input[name=commercialPayerUidSuggest]');
				var hiddenInput = $('input[name=commercialPayerUid]');
				input
					.off('stag-suggest-selected')
					.on('stag-suggest-selected', (e, input, _data) => {
						hiddenInput.val(_data.uid);
					});
			},
			initOnInputChange: function() {
				var form = $('#createNewPatientForm');
				form.find('input[type=text],textarea').change(function() {
					var value = this.value.replace(/\s\s+/g, ' ');
					value = value.trim();
					$(this).val(value);
				});
			},
			init: function() {
				this.initOnInputChange();
				this.onCommercialPayerChange();
			}
		},
		mounted: function() {
			this.init();
		}
	});
</script>

@endsection