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

{% block layout_script %}
{% include 'extra/preview.html' %}
{% include 'extra/toast_simple.html' %}

<script>
(unknown => {
	var form = document.getElementById('surat_masuk_form');

	var suratfv = new window.Vue({
		el: document.getElementById('suratfv'),
		data: {
			list_old: {{ berkas|json }},
			list_new: [],
		},
		mounted: function() {
			this.init();
			if (this.$data.list_old.length === 0) this.new_create();
		},
		updated: function() {
			this.init();
			bsCustomFileInput.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);
			},
			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 ingin hapus lampiran "${target.fields.name}"?`;
				if (window.confirm(message)) {
					let input = document.getElementById('pending_delete_ids');
					let current = input.value ? input.value.split(',') : [];
					current.push(target.pk);
					input.value = current.join(',');

					this.$data.list_old.splice(index, 1);

					window.Toaster_Simple.theme('info').html(`Berhasil tandai hapus <b>${target.fields.name}</b>`).show();
					if (this.$data.list_old.length === 0) this.new_create();
				}
			},
		},
	});

	$(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 %}
		<input type="hidden" name="pending_delete_ids" id="pending_delete_ids" value="">

		<h5 class="card-title mt-0 clearfix">
			Form Surat {{ surat_type|lower }}
		</h5>

		{% 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">
					<button type="button" @click="new_create" class="btn px-lg-4 btn-accent text-uppercase" data-push>
						<i class="fas fa-plus-square"></i> Berkas Surat / Lampiran
					</button>
				</div>

				<div class="bg-warning border rounded p-2 mt-2 mb-2 text-muted small" style="width: max-content; color: rgb(255, 255, 255);">
					<i class="fas fa-info-circle"></i>
					<b>Untuk mengganti lampiran, hapus lampiran lama terlebih dahulu.</b>
				</div>

				<div ref="suratf_old">
					<div v-for="(i,index) in list_old" class="input-group 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">
						<div class="input-group-append">
							<button @click="new_delete(index)" type="button" class="btn btn-danger text-uppercase shadow-none" title="Hapus">
								<i class="fas fa-fw fa-trash"></i>
							</button>
						</div>
						<div class="custom-file">
							<input type="file" name="suratf" required class="form-control shadow-none">
							<label class="custom-file-label" onclick="$(this).prev().click()">Choose file</label>
						</div>
					</div>
				</div>
			</fieldset>
		</div>

		<a href="{% url 'surat_list' surat_type=surat_type|lower %}" class="btn px-lg-4 btn-secondary text-uppercase ml-1">
			<i class="fas fa-fw fa-undo"></i> Kembali
		</a>

		<button type="submit" class="btn px-lg-4 btn-info text-uppercase ml-1">
			<i class="fas fa-fw fa-save"></i> simpan
		</button>
	</form>
</div>
{% endblock %}