<span moe class="hide-inside-popup">
	<a start show><i class="fa fa-edit on-hover-opaque"></i></a>
	<form url="/api/client/updateMcpOnboardingVisitInfo" class="mcp-theme-1">
		<input type="hidden" name="uid" value="{{$patient->uid}}">
		<div id="updateMcpOnboardingVisit" v-cloak>
			<div class="mb-2">
				<select name="hasMcpDoneOnboardingVisit" class="form-control form-control-sm" onchange="toggleDisabledAsNeeded(this, 'YES', 'if-visit-done')" v-model="form.hasMcpDoneOnboardingVisit">
					<option value="">-- Select Status --</option>
					<option value="YES" {{ $patient->has_mcp_done_onboarding_visit === 'YES' ? 'selected' : '' }}>YES</option>
					<option value="NO" {{ $patient->has_mcp_done_onboarding_visit === 'NO' ? 'selected' : '' }}>NO</option>
					<option value="UNKNOWN" {{ $patient->has_mcp_done_onboarding_visit === 'UNKNOWN' ? 'selected' : '' }}>UNKNOWN</option>
				</select>
			</div>
			<div class="mb-2">
				<input type="date" class="if-visit-done form-control form-control-sm" disabled name="mcpOnboardingVisitDate" value="{{ date('Y-m-d') }}" max="{{ date('Y-m-d') }}">
			</div>
			<div class="mb-2">
				<select name="mcpOnboardingVisitNoteUid" disabled class="form-control form-control-sm if-visit-done" onchange="if(this.value === '-- create --') createNewNote('{{$patient->uid}}', '{{$pro->uid}}', '{{date('Y-m-d')}}');">
					<option value="">-- Visit Note --</option>
					<?php $notes = \App\Models\Note::where('client_id', $patient->id)->get() ?>
					@foreach ($notes as $note)
					@if(!empty($note->title) && $note->client_id === $patient->id && !$note->is_cancelled)
					<option {{ $patient->mcp_onboarding_visit_note_id === $note->id ? 'selected' : '' }} value="{{$note->uid}}">{{$note->hcpPro->displayName()}} ({{friendly_date_time($note->effective_dateest, false)}})</option>
					@endif
					@endforeach
					{{--<option value="-- create --">-- Create Note --</option>--}}
				</select>
			</div>
			<div class="mb-2 if-note-outside-system">
				<textarea class="form-control form-control-sm" name="reasonOnboardingVisitNoteOutsideSystem" placeholder="Visit note outside the system reason" spellcheck="false" data-gramm="false"></textarea>
			</div>
			<div>
			<small v-if="showEnterInfoAlert" class="d-block text-info text-sm mb-2">*Ensure you select Visit Note or type Reason before submitting.</small>
			</div>
		</div>
		<div>
			<button submit class="btn btn-sm btn-primary mr-1">Submit</button>
			<button cancel class="btn btn-sm btn-default border">Cancel</button>
		</div>
	</form>
</span>

<script>
	var updateMcpOnboardingVisit = new Vue({
		el:'#updateMcpOnboardingVisit',
		data:{
			form:{
				hasMcpDoneOnboardingVisit: '{{ $patient->has_mcp_done_onboarding_visit }}'
			},
			showEnterInfoAlert: false
		},
		methods:{
			initValidation: function(){
				var self= this;
				var fields = $('[name=mcpOnboardingVisitNoteUid], [name=reasonOnboardingVisitNoteOutsideSystem]');
				if(self.form.hasMcpDoneOnboardingVisit == 'YES'){					
					fields.prop('required', true);
					fields.on('change keyup', function(){
						fields.prop('required', false);
						$(this).prop('required', true);
					});
					self.showEnterInfoAlert = true;
				}else{
					fields.prop('required', false);
					self.showEnterInfoAlert = false;
				}
			},
			init: function(){
				this.initValidation();
			}
		},
		mounted: function(){
			this.init();
		},
		updated: function(){
			var self = this;

			self.$nextTick(function(){
				self.initValidation();
			});
		}
	});
</script>