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;
		color: rgb(0, 54, 175);
	}
	.form-control:focus {
		color: rgb(0, 54, 175);
	}
	#newPatientContainer label {
		font-size: 11px;
	}
</style>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<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 px-0">
							<div class="px-3">
								@include('app.patient.create-patient.demographics-form')
							</div>
							{{--@if($pro->pro_type === 'ADMIN')
							<div class="border-bottom">
								@include('app.patient.create-patient.insurance-coverage-form')
							</div>
							@endif--}}
							<div class="px-3 pt-3">
								<div class="row m-0">
									<div class='form-group mb-3 checkbox'>
										<label class="d-flex align-items-center">
											<input type='checkbox' name='forceNewChartCreation' class="mr-2" />
											Force New Chart Creation
										</label>
									</div>

									<div class='form-group mb-3 ml-3 checkbox'>
										<label class="d-flex align-items-center">
											<input type='checkbox' name='isTestRecord' class="mr-2" />
											Test Record
										</label>
									</div>
								</div>
							</div>


						</div>
						<div class="col-md-6">
							<div class="border-lighter">
							{{--@if($pro->pro_type === 'ADMIN')
								@include('app.patient.create-patient.create-patient-script-templates')
							@else--}}
								@include('app.patient.create-patient.insurance-coverage-form')
							{{--@endif--}}
							</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: {},
			skip: false,
			isSelfPay: false,
			carrierCategory: '',
			carrierCategoryInternal: '',
			isPatientSubscriber: true
		},
		methods: {
			setSkipInsurance: function(_event) {
				if(!$(_event.target).prop('checked')) return;
				this.skip = true;
				this.isSelfPay = false;
				this.carrierCategory = '';
				Vue.nextTick(() => {
					console.log($('#createNewPatientForm').serialize());
				});
			},
			setSelfPay: function(_event) {
				if(!$(_event.target).prop('checked')) return;
				this.isSelfPay = true;
				this.skip = false;
				this.carrierCategory = '';
				Vue.nextTick(() => {
					console.log($('#createNewPatientForm').serialize());
				});
			},
			setCarrierCategory: function(_event, _carrierCategory) {
				if(!$(_event.target).prop('checked')) return;
				this.isSelfPay = false;
				this.skip = false;
				this.carrierCategory = _carrierCategory;
				Vue.nextTick(() => {
					console.log($('#createNewPatientForm').serialize());
				});
			},
			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 self = this;
				var form = $('#createNewPatientForm');
				form.find('input,textarea').on('paste change', function() {
					var value = this.value.replace(/\s\s+/g, ' ');
					value = value.trim();
					self.form[this.name] = value;
					$(this).val(value);
				});
			},
			initAutocomplete: function(){
				$( "input[name=carrierFreeText]" ).autocomplete({
				source: <?= json_encode(config('constants.insurance_payers')) ?>
				});
			},
			init: function() {
				this.initOnInputChange();
				this.onCommercialPayerChange();
				this.initAutocomplete();
			}
		},
		mounted: function() {
			this.init();
		},
		updated: function(){
			var self = this;
			self.$nextTick(function(){
				self.initAutocomplete();
			});
		}
	});
</script>

@endsection