<link href="/select2/select2.min.css" rel="stylesheet" />
<script src="/select2/select2.min.js"></script>

<style>
    #changeNoteVisitTemplateSegmentTemplate .select2-container {
        width: 100% !important;
    }
</style>

<div id="changeNoteVisitTemplateSegmentTemplate" class="d-inline">
	<div moe>
		<a class="" href="" show start>Change Template</a>
		<form url="/api/visit/swapTemplate">
			<input type="hidden" name="noteUid" value="{{ $note->uid }}">
			<div id="changeNoteVisitTemplateSegmentTemplateComponent" v-cloak>
				<div class="mb-2">
					<label>Visit Template<sup class="text-danger">*</sup></label>
					<select name="visitTemplateUid" class="form-control" select-2 required>
						<option value=""></option>
						<option v-for="t in visitTemplates" v-bind:value="t.uid" v-bind:selected="t.id == {{ $note->visit_template_id }}">@{{ t.title }}</option>
					</select>
				</div>
			</div>
			<div class="mb-0">
				<button class="btn btn-success btn-sm" submit>Change Template</button>
				<button class="btn btn-default border btn-sm" cancel>Cancel</button>
			</div>
		</form>
	</div>
</div>

<script>
	var visitTemplateComponent = null;
	(function() {
		function init() {
			visitTemplateComponent = new Vue({
				el: '#changeNoteVisitTemplateSegmentTemplateComponent',
				data: {
					visitTemplates:[]
				},
				methods: {
					initSelect2: function(){
						var self = this;
						$('[select-2]').select2();
					},
					loadVisitTemplates: function() {
						var self = this;
						$.get("{{ route('practice-management.visitTemplates') }}", {response_type:'json'}, function(response) {
							self.visitTemplates = response.data;
						}, 'json');
					},
					init: function() {
						this.loadVisitTemplates();
					}
				},
				mounted: function() {
					this.init();
				},
				updated: function(){
					var self = this;
					self.$nextTick(function(){
						self.initSelect2();
					});
				}
			});
		}
		addMCInitializer('changeNoteVisitTemplateSegmentTemplate', init);
	})();
</script>