<div id="createPatientTemplateScript">
	<div class="col-md-12 bg-light py-3 px-3 mb-2">
		<h5 class="m-0 font-weight-bold">New Patient Script:</h5>
	</div>
	<div class="px-3">
		<div class="row">
			<div class="col-md-12">
				<div class="form-group">
					<select class="form-control" name="script_type">
						<option value="">-- Select Script --</option>
						<option selected value="dialmd-covid-kit">DialMD COVID Kit</option>
					</select>
				</div>
			</div>
			<div class="col-md-12">
				<div id="scriptTemplateContent" class="pb-3"></div>
			</div>
		</div>
	</div>
</div>

<script>
	(function() {
		function init() {
			(function($) {
				var createPatientTemplateScript = {
					defaultTemplate: "dialmd-covid-kit",
					initScriptTemplateChange: function(){
						var self = this;
						$('select[name=script_type]').change(function(evt){
							var input = evt.target;
							var value = input.value;
							self.onTemplateChange(value);
						});
					},
					onTemplateChange: function(value) {
						var templateContainer = $('#scriptTemplateContent');
						templateContainer.html('<i class="fas fa-circle-notch fa-spin text-primary"></i> Loading template...');
						$.get('{{ route("admin.getCreateNewPatientScriptTemplate") }}', {template:value}, function(response){
							if(response.success){
								var templateHtml = response.data;
								templateContainer.html(templateHtml);
							}else{
								toastr.error(response.message);
								templateContainer.html('');
							}
						}, 'json');
					},
					init: function() {
						this.initScriptTemplateChange();
						this.onTemplateChange(this.defaultTemplate);
					}
				};
				createPatientTemplateScript.init();
			})(jQuery);


		}
		addMCInitializer('createPatientTemplateScript', init, '#createPatientTemplateScript');
	})();
</script>
