<?php
$medicaidStates = Config::get('constants.medicaid_states');
$cpc = $patient->getPrimaryCoverage();
?>
<div id="new-coverage-form-{{ $patient->uid }}">
	<div class="p-3">
		<form :url="url" class="mcp-theme-1" @submit.prevent="submitForm" autocomplete="off">
			<input type="hidden" name="clientUid" value="{{ $patient->uid }}" class="form-control input-sm" />
			<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="insuranceCardType" @change="updateUrl" name="insuranceCardType" 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="insuranceCardType" @change="updateUrl" name="insuranceCardType" 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="insuranceCardType" @change="updateUrl" name="insuranceCardType" value="commercial">Commercial / Third Party (Primary)</label>
					</div>
					{{-- <div class="form-check form-check-inline">
						<label class="form-check-label"><input class="form-check-input" type="radio" v-model="insuranceCardType" @change="updateUrl" name="insuranceCardType" value="selfPay">Self Pay</label>
					</div> --}}
				</div>
			</div>

			<div v-if="insuranceCardType === 'selfPay'">
				<div class="alert alert-warning p-1 rounded-0">
					Please create patient payment profile by clicking here: 
					<a href="{{ route('patients.view.customers', ['patient' => $patient, 'popupmode' => 1]) }}">Create/Manage customer payment methods</a>
				</div>
			</div>

			<div v-if="insuranceCardType !== 'selfPay'">
				<div class="row" v-show="insuranceCardType == '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="col-md-12">
						<p class="mb-2 font-weight-bold">If payer not found above, please key in carrier name (and memo
							if any):</p>
					</div>
					<div class="form-group col-md-6">
						<label class="control-label">Carrier Name</label>
						<input type="text" name="carrierFreeText" class="form-control input-sm">
					</div>
					<div class="form-group col-md-6">
						<label class="control-label">Carrier Memo</label>
						<input type="text" name="carrierFreeTextMemo" class="form-control input-sm">
					</div>
					<div class="col-12">
						<hr class="mt-0 mb-2">
					</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 class="form-group col-md-6">
						<label class="control-label">Phone Number For Hcps</label>
						<input type="text" name="primaryInsurancePhoneNumberForHcps" class="form-control input-sm">
					</div>
				</div>

				<div class="row" v-if="insuranceCardType">
					<div class="col-12">
						<hr class="mt-0 mb-2">
					</div>
					<div class="form-group col-md-6">
						<p class="mb-1 font-weight-bold">RPM covered (if medically needed)?</p>
						<div class="form-check form-check-inline">
							<label class="form-check-label"><input class="form-check-input" type="radio" name="isRpmCoveredIfMedicallyNeeded" value="YES">Yes</label>
						</div>
						<div class="form-check form-check-inline">
							<label class="form-check-label"><input class="form-check-input" type="radio" name="isRpmCoveredIfMedicallyNeeded" value="NO">No</label>
						</div>
						<div class="form-check form-check-inline">
							<label class="form-check-label"><input class="form-check-input" type="radio" name="isRpmCoveredIfMedicallyNeeded" value="UNKNOWN">Unknown</label>
						</div>
					</div>
					<div class="form-group col-md-6">
						<p class="mb-1 font-weight-bold">Televisits covered (if medically needed)?</p>
						<div class="form-check form-check-inline">
							<label class="form-check-label"><input class="form-check-input" type="radio" name="isTelevisitCoveredIfMedicallyNeeded" value="YES">Yes</label>
						</div>
						<div class="form-check form-check-inline">
							<label class="form-check-label"><input class="form-check-input" type="radio" name="isTelevisitCoveredIfMedicallyNeeded" value="NO">No</label>
						</div>
						<div class="form-check form-check-inline">
							<label class="form-check-label"><input class="form-check-input" type="radio" name="isTelevisitCoveredIfMedicallyNeeded" value="UNKNOWN">Unknown</label>
						</div>
					</div>
				</div>


				<div class="row" v-if="insuranceCardType">
					<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="form-group col-md-4">
						<label class="control-label">Patient First Name</label>
						<input type="text" name="patientNameFirst" value="{{ $patient->name_first }}" class="form-control input-sm">
					</div>
					<div class="form-group col-md-4">
						<label class="control-label">Patient Middle Name / MI</label>
						<input type="text" name="patientNameMiddle" value="{{ $patient->name_middle }}" class="form-control input-sm">
					</div>
					<div class="form-group col-md-4">
						<label class="control-label">Patient Last Name</label>
						<input type="text" name="patientNameLast" value="{{ $patient->name_last }}" class="form-control input-sm">
					</div>
					<div class="form-group col-md-4">
						<label class="control-label">Patient Suffix</label>
						<input type="text" name="patientNameSuffix" value="{{ $patient->name_suffix }}" class="form-control input-sm">
					</div>
					<div class="form-group col-md-4">
						<label class="control-label">Patient Sex</label>
						<select class="form-control input-sm" name="sex" select2>
							<option value="">--</option>
							<option value="M" @if ($patient->sex === 'M') selected @endif>Male</option>
							<option value="F" @if ($patient->sex === 'F') selected @endif>Female</option>
							<option value="UNKNOWN" @if ($patient->sex === 'UNKNOWN') selected @endif>Unknown</option>
						</select>
					</div>
					<div class="form-group col-md-4">
						<label class="control-label">Patient Dob</label>
						<input type="date" name="patientDob" value="{{ $patient->dob }}" class="form-control input-sm">
					</div>
					<div class="form-group col-md-6">
						<label class="control-label">Date Of Service</label>
						<input type="date" name="dateOfService" value="{{ date('Y-m-d') }}" class="form-control input-sm">
					</div>
				</div>
				<div class="row">
					<div class="form-group col-md-12" v-if="insuranceCardType == 'medicaid' || insuranceCardType == 'commercial'">
						<p class="mb-1 font-weight-bold">Is Patient The Subscriber?</p>
						<div class="form-check form-check-inline">
							<label class="form-check-label"><input class="form-check-input" type="radio" name="isPatientSubscriber" v-model="isPatientSubscriber" value="1">Yes</label>
						</div>
						<div class="form-check form-check-inline">
							<label class="form-check-label"><input class="form-check-input" type="radio" name="isPatientSubscriber" v-model="isPatientSubscriber" value="0">No</label>
						</div>
					</div>
				</div>

				<div v-if="isPatientSubscriber == 0 && (insuranceCardType == 'medicaid' || insuranceCardType == '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="{{ $patient->name_first }}" 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="{{ $patient->name_middle }}" 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="{{ $patient->name_last }}" 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="{{ $patient->name_suffix }}" 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="{{ $patient->dob }}" class="form-control input-sm">
					</div>
					<div class="form-group col-md-6">
						<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="insuranceCardType == 'commercial'">
					<p>Does the patient also have either a Medicare or Medicaid #? (optional)</p>
				</div>
				<div class="row" v-if="insuranceCardType == 'medicaid' || insuranceCardType == 'commercial'">
					<div class="col-md-12 bg-light p-3 mb-2">
						<h5 class="m-0 font-weight-bold">Medicaid Information:</h5>
					</div>
					<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" value="{{ $cpc->mcd_number ?? '' }}" oninput="this.value = this.value.toUpperCase()">
					</div>
				</div>

				<div class="row" v-if="insuranceCardType == 'medicare' || insuranceCardType == 'commercial'">
					<div class="col-md-12 bg-light p-3 mb-2">
						<h5 class="m-0 font-weight-bold">Medicare Information:</h5>
					</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" value="{{ $cpc->mcr_number ?? '' }}" oninput="this.value = this.value.toUpperCase()">
					</div>

				</div>

				<div v-if="insuranceCardType" class="row">
					<div class="col-md-12">
						<div class="bg-light p-2 mb-2">
							<h5 class="m-0 font-weight-bold">Other Details:</h5>
						</div>
					</div>
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label>Plan Effective Date</label>
									<input type="date" name="planEffectiveDate" class="form-control" value="{{ $cpc->plan_effective_date ?? '' }}" />
								</div>
							</div>
							<div class="col-md-12">
								<div class="form-group">
									<label>Plan Description</label>
									<textarea name="planDescription" class="form-control" value="{{ $cpc->plan_description ?? '' }}"></textarea>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>Provider Status</label>
									<select name="providerStatus" class="form-control" value="{{ $cpc->provider_status ?? '' }}">
										<option value=""></option>
										<option value="IN_NETWORK" @if ($cpc && $cpc->provider_status && $cpc->provider_status === 'IN_NETWORK') selected @endif>IN
											NETWORK</option>
										<option value="OUT_OF_NETWORK" @if ($cpc && $cpc->provider_status && $cpc->provider_status === 'OUT_OF_NETWORK') selected @endif>OUT_OF_NETWORK</option>
									</select>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>Mental Health Coverage</label>
									<select name="mentalHealthCoverage" class="form-control" value="{{ $cpc->mental_health_coverage ?? '' }}">
										<option value=""></option>
										<option value="YES" @if ($cpc && $cpc->mental_health_coverage && $cpc->mental_health_coverage === 'YES') selected @endif>YES
										</option>
										<option value="NO" @if ($cpc && $cpc->mental_health_coverage && $cpc->mental_health_coverage === 'YES') selected @endif>NO
										</option>
										<option value="UNKNOWN" @if ($cpc && $cpc->mental_health_coverage && $cpc->mental_health_coverage === 'YES') selected @endif>
											UNKNOWN</option>
									</select>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>Telehealth Coverage</label>
									<select name="telehealthCoverage" class="form-control">
										<option value=""></option>
										<option value="YES" @if ($cpc && $cpc->telehealth_coverage && $cpc->telehealth_coverage === 'YES') selected @endif>YES
										</option>
										<option value="NO" @if ($cpc && $cpc->telehealth_coverage && $cpc->telehealth_coverage === 'NO') selected @endif>NO
										</option>
										<option value="UNKNOWN" @if ($cpc && $cpc->telehealth_coverage && $cpc->telehealth_coverage === 'UNKNOWN') selected @endif>
											UNKNOWN</option>
									</select>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>Deductible Amount</label>
									<input type="number" name="deductibleAmount" class="form-control" value="{{ $cpc->deductible_amount ?? '' }}" />
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>Family Deductible</label>
									<input type="number" name="familyDeductible" class="form-control" value="{{ $cpc->family_deductible ?? '' }}" />
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>Member Accumulated Total</label>
									<input type="number" name="memberAccumulatedTotal" class="form-control" value="{{ $cpc->member_accumulated_total ?? '' }}" />
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>Total Individual Balance</label>
									<input type="number" name="totalIndividualBalance" class="form-control" value="{{ $cpc->total_individual_balance ?? '' }}" />
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>Total Family Balance</label>
									<input type="number" name="totalFamilyBalance" class="form-control" value="{{ $cpc->total_family_balance ?? '' }}" />
								</div>
							</div>

						</div>
					</div>
				</div>

				<div v-if="response" :class="response.success ? 'alert success' : 'alert alert-danger'">
					@{{ response.message }}
				</div>
				<div class="form-group text-nowrap mb-0">
					<button v-if="!processing" class="btn btn-sm btn-primary" type="submit" :disabled="url == ''">Submt</button>
					<button v-else class="btn btn-sm btn-primary" type="button"><i class="fas fa-circle-notch fa-spin"></i> Processing...</button>
				</div>
			</div>
			
		</form>
	</div>
</div>
<script>
	(function() {
		function init() {
			new Vue({
				el: '#new-coverage-form-{{ $patient->uid }}',
				delimiters: ['@{{ ', ' }}'],
				data: {
					url: '',
					insuranceCardType: '',
					isPatientSubscriber: 1,
					processing: false,
					response: null
				},
				methods: {
					updateUrl: function() {
						if (this.insuranceCardType == 'medicare') {
							this.url = '/api/clientPrimaryCoverage/createNewCoverageForMedicare';
						}
						if (this.insuranceCardType == 'medicaid') {
							this.url = '/api/clientPrimaryCoverage/createNewCoverageForMedicaid';
						}
						if (this.insuranceCardType == 'commercial') {
							this.url = '/api/clientPrimaryCoverage/createNewCoverageForCommercial';
						}
					},
					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);
							});

					},
					submitForm: function(evt) {
						var self = this;
						if (self.processing) return;
						var form = evt.target;
						var data = $(form).serializeArray();
						var url = $(form).attr('url');
						if (!url) {
							self.response = {
								success: false,
								message: 'Invalid url'
							};
							return;
						}

						self.processing = true;
						$.post(url, data, function(response) {
							self.processing = false;
							if (response.success) {
								closeStagPopup();
								fastReload();
							} else {
								self.response = response;
							}
						}, 'json');
					},
					init: function() {
						initStagSuggest();
						this.onCommercialPayerChange();
					}
				},
				mounted: function() {
					this.init();
				}
			});
		}
		addMCInitializer('new-coverage-form-{{ $patient->uid }}', init, '#new-coverage-form-{{ $patient->uid }}')
	}).call(window);
</script>