{% extends "layout.html" %}

{% block layout_script %}
<script>
(unknown => {
	var form = document.getElementById('disp-form');
	$(form.elements).each(function() {
		if (this.tagName === 'INPUT') {
			$(this).addClass('form-control form-control-sm');
			if (this.name === 'tanggal') $(this).attr('type','date');
		}
		if (this.tagName === 'SELECT') {
			$(this).addClass('form-control form-control-sm');
		}
		if (this.tagName === 'TEXTAREA') {
			$(this).addClass('form-control form-control-sm').removeAttr('cols').removeAttr('rows');
			$(this).attr('rows',5);
		}
	});

	var iframe = document.getElementById('disp_htmlreport');
	$(iframe).on('load',event => iframe.contentWindow.print());
	window.page_disp_htmlreport = (event,target) => {
		event.preventDefault();
		$(iframe).prop('src',target.href);
	};

	window.page_disp_delete = (event,target) => {
		let message = 'Yakin Hapus Disposisi Ini?';
		if (!window.confirm(message)) {
			event.preventDefault();
		}
	};
})();
</script>
{% endblock %}


{% block layout_content %}
<div class="card mt-3" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
	<div class="card-body">
	<form method="post" id="disp-form" class="mt-3">
		{% csrf_token %}

		{% include 'extra/base_messages.html' %}
		{% include 'extra/base_form_errors.html' %}

		<div class="row">
			<div class="col-md-12">
				<table class="table table-sm table-borderless border-0">{{ form.as_table }}</table>
			</div>
			<div class="col-md-12 text-left">
				<a href="{% url 'disp_list' %}" class="btn btn-secondary shadow px-lg-4 py-2 text-uppercase ml-1 mt-4"><i class="fas fa-undo"></i> kembali</a>
				{% if disp_pk %}
					<a href="{% url 'disp_delete' disp_pk=disp_pk %}" onclick="page_disp_delete(event,this)" class="btn btn-danger shadow px-lg-4 py-2 text-uppercase ml-1 mt-4"><i class="fas fa-trash"></i> hapus</a>
					<a href="{% url 'disp_htmlreport' page='v1' pk=disp_pk %}" onclick="page_disp_htmlreport(event,this)" class="btn btn-webapp shadow px-lg-4 py-2 text-uppercase ml-1 mt-4"><i class="fas fa-print"></i> cetak</a>
				{% endif %}
				<button class="btn btn-info shadow px-lg-4 py-2 text-uppercase ml-1 mt-4"><i class="fas fa-save"></i> simpan</button>
			</div>
		</div>
	</form>
	</div>
</div>
	<iframe id="disp_htmlreport" style="width:0;height:0;border:0;border:none;visibility:hidden;"></iframe>
{% endblock %}

{% block layout_style %}
<style>
	#disp-form textarea { resize: none; }
	.table-sm th:first-child {
		width: 20% !important;
	}
	.table-sm th { text-align: left; }
</style>
{% endblock %}