@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>

<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>
								@include('app.patient.create-patient.insurance-coverage-form')
							</div>
							@endif

						</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: {},
			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 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);
				});
			},
			init: function() {
				this.initOnInputChange();
				this.onCommercialPayerChange();
			}
		},
		mounted: function() {
			this.init();
		}
	});
</script>

@endsection