<div id="manual-determination-form-{{$patient->uid}}">
	@php
	$cpc = $coverage;
	@endphp
	<div class="p-3">
		<div class="d-flex flex-wrap">
			@if($cpc->mcr_number)
			<div class="mb-2 mr-2">
				<b>Medicare Number:</b> {{$cpc->mcr_number}}
			</div>
			@endif
			<div class="mb-2 mr-2">
				<span><b>Is Covered:</b> {{$cpc->is_covered}}</span>
			</div>
		</div>
		<form @submit.prevent="submitForm" method="post" class="mcp-theme-1">
			<input type="hidden" name="clientPrimaryCoverageUid" value="{{$cpc->uid}}" class="form-control input-sm" />
			<div class="row">
				<div class="form-group col-md-12">
					<p class="mb-1">How did you manually check coverage?</p>
					<div class="form-check form-check-inline">
						<label class="form-check-label"><input class="form-check-input" type="radio" v-model="uiState.manualDeterminationStrategy" name="manualDeterminationStrategy" value="REVIEWED_ELECTRONIC" required>Reviewed Electronically</label>
					</div>
					<div class="form-check form-check-inline">
						<label class="form-check-label"><input class="form-check-input" type="radio" v-model="uiState.manualDeterminationStrategy" name="manualDeterminationStrategy" value="CALLED_PAYER" required>Called Payer</label>
					</div>
				</div>
			</div>
			<div class="table-responsive">
				<table class="table table-sm table-bordered table-striped">
					<thead>
						<tr>
							<th class="border-bottom-0"></th>
							<th class="border-bottom-0">Automatic</th>
							<th class="border-bottom-0">Override</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Record Found?</td>
							<td>{{$cpc->auto_medicare_is_match_found ? 'YES' : 'NO'}}</td>
							<td>
								<div class="form-group mb-0">
									<div class="form-check form-check-inline">
										<label class="form-check-label"><input class="form-check-input" type="radio"  name="manualMedicareIsMatched" value="YES" @click="onInputChange">Yes</label>
									</div>
									<div class="form-check form-check-inline">
										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsMatched" value="NO" @click="onInputChange">No</label>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>Part B Active?</td>
							<td>{{$cpc->auto_medicare_is_partbactive}}</td>
							<td>
								<div class="form-group mb-0">
									<div class="form-check form-check-inline">
										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartBActive" @click="onInputChange" 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="manualMedicareIsPartBActive" @click="onInputChange" 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="manualMedicareIsPartBActive" @click="onInputChange" value="UNKNOWN">Unknown</label>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>Is Part B Primary?</td>
							<td>{{$cpc->auto_medicare_is_partbprimary}}</td>
							<td>
							<input type="hidden" name="manualDeterminationCategory" />

								<div class="form-group mb-0">
									<div class="form-check form-check-inline">
										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartBPrimary" @click="onInputChange" 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="manualMedicareIsPartBPrimary" @click="onInputChange" 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="manualMedicareIsPartBPrimary" @click="onInputChange" value="UNKNOWN">Unknown</label>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>Is Part C Active?</td>
							<td>{{$cpc->auto_medicare_is_partcactive}}</td>
							<td style="max-width:200px;">
								<div class="alert alert-danger p-1 mb-1" v-if="(cpc.auto_medicare_is_partcactive == 'YES' && cpc.auto_medicare_is_partbprimary == 'YES') || (uiState.manualMedicareIsPartBPrimary == 'YES' && uiState.manualMedicareIsPartCActive == 'YES')">
									Oops! Patient Medicare Part B Primary is set to <b>Yes</b>.
								</div>
								<div class="form-group mb-0">
									<div class="form-check form-check-inline">
										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartCActive" @click="onInputChange" 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="manualMedicareIsPartCActive" @click="onInputChange" 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="manualMedicareIsPartCActive" @click="onInputChange" value="UNKNOWN">Unknown</label>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>Inpatient?</td>
							<td>{{$cpc->auto_medicare_is_inpatient}}</td>
							<td>
								<div class="form-group mb-0">
									<div class="form-check form-check-inline">
										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsInpatient" @click="onInputChange" 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="manualMedicareIsInpatient" @click="onInputChange" 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="manualMedicareIsInpatient" @click="onInputChange" value="UNKNOWN">Unknown</label>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>Hospice?</td>
							<td>UNKNOWN</td>
							<td>
								<div class="form-group mb-0">
									<div class="form-check form-check-inline">
										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHospice" @click="onInputChange" 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="manualMedicareIsHospice" @click="onInputChange" 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="manualMedicareIsHospice" @click="onInputChange" value="UNKNOWN">Unknown</label>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>Home Health?</td>
							<td>UNKNOWN</td>
							<td>
								<div class="form-group mb-0">
									<div class="form-check form-check-inline">
										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHomeHealth" @click="onInputChange" 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="manualMedicareIsHomeHealth" @click="onInputChange" 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="manualMedicareIsHomeHealth" @click="onInputChange" value="UNKNOWN">Unknown</label>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>MSP?</td>
							<td>{{$cpc->auto_medicare_is_msp}}</td>
							<td>
								<div class="form-group mb-0">
									<div class="form-check form-check-inline">
										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsMsp" @click="onInputChange" 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="manualMedicareIsMsp" @click="onInputChange" 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="manualMedicareIsMsp" @click="onInputChange" value="UNKNOWN">Unknown</label>
									</div>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="row">
				<div class="form-group col-md-12">
					<label for="" class="control-label">Memo</label>
					<textarea name="manualDeterminationCategoryMemo" class="form-control"></textarea>
				</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 == '' || disabled === true">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>
		</form>
	</div>
</div>
<script>
	(function() {
		function init() {
			new Vue({
				el: '#manual-determination-form-{{$patient->uid}}',
				delimiters: ['@{{', '}}'],
				data: {
					url: '/api/clientPrimaryCoverage/manualDeterminationForMedicare',
					uiState: {
						manualMedicareIsMatched: null,
						manualMedicareIsPartBActive: null,
						manualMedicareIsPartBPrimary: null,
						manualMedicareIsPartCActive: null,
						manualMedicareIsInpatient: null,
						manualMedicareIsHospice: null,
						manualMedicareIsHomeHealth: null,
						manualMedicareIsMsp: null,

					},
					cpc: <?= json_encode($cpc); ?>,
					processing: false,
					response: null,
					disabled: false
				},
				methods: {
					onInputChange: function(evt){
						var input = evt.target;
						var name = input.name;
						var value = input.value;
						this.uiState[name] = value;
						if(value === 'YES') this.uiState.manualMedicareIsMatched = 'YES';

						if(name === 'manualMedicareIsMatched'){
							if(value === 'NO') this.setUiStateDefaultValue(value);
						}

						if(name === 'manualMedicareIsPartBActive'){
							if(value === 'YES') {
								this.uiState.manualMedicareIsMatched = 'YES';
							}
							if(value === 'NO') this.uiState.manualMedicareIsPartBPrimary = 'NO';
							if(value === 'UNKNOWN') this.uiState.manualMedicareIsPartBPrimary = 'UNKNOWN';
						}
						if(name === 'manualMedicareIsPartBPrimary'){
							if(value === 'YES') {
								this.uiState.manualMedicareIsMatched = 'YES';
								this.uiState.manualMedicareIsPartBActive = 'YES';
							}
						}


						if(name === 'manualMedicareIsPartCActive'){
							if(value === 'YES') this.uiState.manualMedicareIsPartBActive = 'NO';
						}

						if(this.uiState.manualMedicareIsMatched === 'NO') {
							this.setUiStateDefaultValue('NO');
							return;
						}

						this.refreshUi();
					},
					setUiStateDefaultValue: function(value){
						var self = this;
						for(var fieldName in self.uiState){
							self.uiState[fieldName] = value;
						}
						self.refreshUi();
					},
					submitForm: function(evt) {
						var self = this;
						if (self.processing) return;
						var form = evt.target;
						var data = $(form).serializeArray();
						var url = self.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');
					},
					setDefaultData: function(){
						this.uiState.manualMedicareIsMatched = this.cpc.auto_medicare_is_match_found ? 'YES':'NO';
						this.uiState.manualMedicareIsPartBActive = this.cpc.auto_medicare_is_partbprimary;
						this.refreshUi();
					},
					refreshUi: function(){
						var self = this;
						$("input[type=radio]").prop('checked', false);
						for(var fieldName in self.uiState){
							var value = self.uiState[fieldName];
							if(value){
								$("input[name="+ fieldName +"][type=radio][value=" + value + "]").prop('checked', true);
							}
						}

						self.disabled = (self.cpc.auto_medicare_is_partcactive == 'YES' && self.cpc.auto_medicare_is_partbprimary == 'YES') || (self.uiState.manualMedicareIsPartBPrimary == 'YES' && self.uiState.manualMedicareIsPartCActive == 'YES');
						self.setDefaultValueForManualDeterminationCategory();

					},
					setDefaultValueForManualDeterminationCategory: function(){
						var self = this;
						var input = $('input[name=manualDeterminationCategory]');
						if(self.uiState.manualMedicareIsMatched === 'NO'){
							input.val('INVALID');
							return;
						}
						if(self.uiState.manualMedicareIsPartBPrimary === 'YES'){
							input.val('COVERED');
							return;
						}
						if(self.uiState.manualMedicareIsPartBPrimary === 'NO'){
							input.val('NOT_COVERED');
							return;
						}
						input.val('UNKNOWN');
					},
				},
				mounted: function() {
					this.setDefaultData();
					this.uiState.manualMedicareIsPartBPrimary = this.cpc.auto_medicare_is_partbprimary;
					if (this.cpc.auto_medicare_is_partbprimary == 'YES') {
						this.uiState.manualMedicareIsPartCActive = 'NO';
					};
					this.refreshUi();

				}
			});
		}
		addMCInitializer('manual-determination-form-{{$patient->uid}}', init, '#manual-determination-form-{{$patient->uid}}')
	}).call(window);
</script>
