{% extends "layout.html" %}
{% load static %}
{% load common %}

{% block layout_script %}
{% include 'extra/preview.html' %}
{% include 'extra/toast_simple.html' %}
<script>
(unknown => {
	var href_deletef = "{% url 'surat_deletef' pk=0 %}";

	var form = document.getElementById('surat_masuk_form');
	var suratf_new = document.getElementById('suratf_new');

	var suratf_old = document.getElementById('suratf_old');
	var suratfv = new window.Vue({
		el: document.getElementById('suratfv'),
		data: {
			list_old: {{ berkas|json }},
			list_new: [],
		},
		mounted: function() {
			this.init();
		},
		updated: function() {
			this.init();
		},
		methods: {
			view: function(index) {
				window.Previewer.show();
				window.Previewer.goto(index);
			},
			init: function() {
				let list = [];
				for (var i = 0; i < this.$data.list_old.length; i++) {
					let item = this.$data.list_old[i].fields;
					item.pk = this.$data.list_old[i].pk;
					item.href = `{% static '/upload/surat/' %}${item.path}`;
					list.push(item);
				}
				window.Previewer.init(list);

				if (this.$data.list_new.length === 0 && this.$data.list_old.length === 0) this.new_create();
			},
			new_create: function() {
				this.$data.list_new.push({});
			},
			new_delete: function(index) {
				this.$data.list_new.splice(index,1);
			},
			old_delete: function(index) {
				let target = this.$data.list_old[index];
				let message = `Anda Yakin Hapus Berkas "${target.fields.name}" ?`;

				if (window.confirm(message)) {
					let href = href_deletef.replace(0,target.pk);
					$.get(href,result => {
						this.$data.list_old.splice(index,1);
						window.Toaster_Simple.theme('info').html(`Berhasil Hapus Berkas <b>${target.fields.name}</b>`).show();
					}).fail(function() {
						window.Toaster_Simple.theme('warning').html(`Gagal Hapus Berkas <b>${target.fields.name}</b>`).show();
					});
				}
			},
		},
	});

	$(form).find('input,textarea,select').each(function() {
		$(this).addClass('form-control');

		if (this.name === 'tanggal') this.type = 'date';
		if (this.name === 'perihal') $(this).removeAttr('cols').removeAttr('rows');
	});

	$(form).find('[data-delete]').each(function() {
		this.href = this.dataset.delete;
	}).on('click',function(event) {
		var message = `Anda Yakin Hapus Surat Nomor "${form.elements.nomor.value}" Tanggal "${form.elements.tanggal.value}" ?`;
		if (! window.confirm(message)) event.preventDefault();
	});

})();
</script>
{% endblock %}

{% block layout_content %}
<div class="card mt-3">
	<form method="post" enctype="multipart/form-data" autocomplete="off" id="surat_masuk_form" class="card-body">
		{% csrf_token %}

		<h5 class="card-title mt-0 clearfix">
			Form Surat Keluar
			<a href="{% url 'surat_list' surat_type='keluar' %}" class="btn btn-sm btn-outline-secondary text-uppercase">
				<i class="fas fa-fw fa-table"></i>
				list
			</a>

			<div id="upload_exec" class="float-right">
				{% if pk %}
					<!-- <a data-delete="{% url 'surat_delete' _type='keluar' pk=pk %}" class="btn btn-sm btn-outline-danger text-uppercase">hapus</a> -->
				{% endif %}
				<button type="submit" class="btn btn-sm btn-outline-success text-uppercase ml-1">simpan</button>
			</div>
		</h5>

		<!-- {% include 'extra/base_messages.html' %} -->
		{% include 'extra/base_form_errors.html' %}

		<div class="row">
			<fieldset class="col col-md-6">
				<table class="table table-borderless border-0">{{ form.as_table }}</table>
			</fieldset>

			<fieldset id="suratfv" class="col col-md-6">
				<div class="mb-2">
					<span class="font-weight-bold">Berkas Surat / Lampiran</span>
					<button type="button" @click="new_create" class="btn btn-sm btn-outline-info text-uppercase" data-push>Tambah</button>
				</div>

				<div ref="suratf_old">
					<div v-for="(i,index) in list_old" class="input-group input-group-sm mb-1">
						<input :value="i.fields.name" class="form-control shadow-none" readonly>
						<div class="input-group-append">
							<button @click="view(index)" type="button" class="btn btn-outline-info text-uppercase shadow-none" title="Lihat"><i class="fas fa-fw fa-eye"></i></button>
							<button @click="old_delete(index)" type="button" class="btn btn-outline-danger text-uppercase shadow-none" title="Hapus"><i class="fas fa-fw fa-trash"></i></button>
						</div>
					</div>
				</div>

				<div ref="suratf_new">
					<div v-for="(i,index) in list_new" class="input-group input-group-sm mb-1">
						<input type="file" name="suratf" required class="form-control shadow-none">
						<div class="input-group-append">
						  <button @click="new_delete(index)" type="button" class="btn btn-outline-danger text-uppercase shadow-none" title="Hapus"><i class="fas fa-fw fa-trash"></i></button>
						</div>
					</div>
				</div>
			</fieldset>
		</div>

	</form>
</div>
{% endblock %}