<div id="manual-determination-form-{{$patient->uid}}">
	@php
	$cpc = $coverage;
	@endphp
	<div class="p-3">
		<div class="d-flex flex-wrap">
			@if($cpc->mcd_number)
			<div class="mb-2 mr-2">
				<span><b>Medicaid Number:</b> {{$cpc->mcd_number}}</span>
				<span class="ml-3"><b>Medicaid State:</b> {{$cpc->mcd_payer_id ? $cpc->mcdPayer->name : '-'}}</span>
			</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_medicaid_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="manualMedicaidIsMatched" value="YES" :checked="uiState.manualMedicaidIsMatched === 'YES'" @change="inputChange">Yes</label>
									</div>
									<div class="form-check form-check-inline">
										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicaidIsMatched" value="NO" :checked="uiState.manualMedicaidIsMatched === 'NO'" @change="inputChange">No</label>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>Coverage Status?</td>
							<td>UNKNOWN</td>
							<td>
								<select name="manualDeterminationCategory" class="form-control input-sm" required @change="inputChange">
									<option value="" :selected="uiState.manualMedicaidIsMatched == 'YES'">--select--</option>
									<option value="COVERED">Covered</option>
									<option value="NOT_COVERED">Not Covered</option>
									<option value="INVALID" :selected="uiState.manualMedicaidIsMatched == 'NO'">Invalid</option>
									<option value="UNKNOWN">Unknown</option>
								</select>
							</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 == ''">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/manualDeterminationForMedicaid',
					uiState: {},
					cpc: <?= json_encode($cpc); ?>,
					processing: false,
					response: null
				},
				methods: {
					inputChange: function(evt){
						var self = this;
						var input = evt.target;
						var name = input.name;
						var value = input.value;
						self.uiState[name] = value;
						if(name == 'manualDeterminationCategory') {
							if(self.uiState.manualDeterminationCategory === 'COVERED'){
								self.uiState.manualMedicaidIsMatched = "YES";
							}
							if(self.uiState.manualDeterminationCategory === 'INVALID'){
								self.uiState.manualMedicaidIsMatched = "NO";
							}
						}

						if(name === 'manualMedicaidIsMatched'){
							if(value === 'YES') self.uiState.manualDeterminationCategory = 'COVERED';
							if(value === 'NO') self.uiState.manualDeterminationCategory = 'INVALID';
						}
						self.$forceUpdate();

					},
					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(){
						var self = this;
						self.uiState.manualMedicaidIsMatched = this.cpc.auto_medicaid_is_match_found ? 'YES' : 'NO';
						self.$forceUpdate();
						console.log({uiState: self.uiState});

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