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

{% block layout_script %}
<script src="{% static 'loader_v1.js' %}?_={{ date_unique_current }}"></script>

{{ form.attributes.data|default:form.attributes.initial|json_script:"attributes_data" }}
<script>
(unknown => {
	$form = $('#form');
	$attribute_wrap = $('#attribute_wrap');
	$attribute_list = $('#attribute_list');

	$attribute_list.find('[data-template]').each(function() {
		var template = this.cloneNode(true); template.removeAttribute('hidden'); this.remove();

		$attribute_wrap.find('[data-make]').on('click',(event,data) => {
			$( template.cloneNode(true) ).appendTo( $attribute_list ).each(function() {

				$(this).find('[data-field]').each(function() {
					if (data && this.dataset.field in data) {
						$(this).prop('value', data[this.dataset.field]);
					}

					$(this).on('change',() => attribute_axec());
					if (/^name$/.test(this.dataset.field)) {
						$(this).on('keyup',window.webapp.debounce(() => attribute_axec(),500));
					}
				});

				$(this).find('[data-remove]').on('click',() => {
					$(this).remove();
					attribute_axec();
				});
			});
		});
	});

	var attribute_axec = () => {
		var list = {};
		$attribute_list.find('[data-attribute]').each(function() {
			var v = {};
			$(this).find('[data-field]').each(function() {
				v[this.dataset.field] = this.value;
			});
			list[window.webapp.slug_(v.name)] = v;
		});

		$form.find('[name=attributes]').prop('value',JSON.stringify(list));
	};

	$('#attributes_data').each(function() {
		$make = $attribute_wrap.find('[data-make]');

		data = this.textContent;
		data = JSON.parse(this.textContent);
		if (typeof data === 'string') data = JSON.parse(data);

		if (data) for (var d in data) if ($.isPlainObject(data[d])) $make.trigger('click',data[d]);

		attribute_axec();
	});
})();
</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;">
	<form method="post" autocomplete="off" id="form" class="card-body">
		<h5 class="card-title mt-0 clearfix">
			<span>Form kategori</span>
			<div id="form_exec" class="float-right">
				{% if pk %}
					<!-- <a data-delete="{% url 'catetree_update' pk=pk %}" class="btn btn-sm btn-outline-danger text-uppercase">hapus</a> -->
				{% endif %}
			</div>
		</h5>

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

		{% csrf_token %}

		<fieldset>
			<div class="form-row">
				<div class="col col-md-5">
					<select name="pk_parent" required class="form-control">
						<option value="0">({{ form.pk_parent.label }})</option>
						{% for i in parents %}
							{% include "catetree/form_parents_option.html" with sups=i current=form.fields.pk_parent.data|default:form.fields.pk_parent.initial %}
						{% endfor %}
					</select>
				</div>
				<div class="col col-md-5">
					<input name="text" value="{{ form.text.data|default:form.text.initial|default:'' }}" placeholder="{{ form.text.label }} ..." title="{{ form.text.label }} ..." required class="form-control">
				</div>
				<div class="col col-md-2">
					<input type="number" min="0" name="sort" value="{{ form.sort.data|default:form.sort.initial|default:'' }}" placeholder="{{ form.sort.label }} ..." title="{{ form.sort.label }} ..." required class="form-control">
				</div>
			</div>
		</fieldset>

		<fieldset id="attribute_wrap" class="mt-3">
			<legend>
				<small><button type="button" data-make class="btn btn-sm btn-accent shadow py-2 text-uppercase"><i class="fa fa-plus"></i> Atribut</button></small>
			</legend>

			<textarea name="attributes" hidden></textarea>

			<div id="attribute_list" class="form-row">
				<div class="col col-md-3 mb-2" data-attribute data-template hidden>
					<div class="input-group mb-1">
						<input data-field="name" required placeholder="Nama Atribut ..." class="form-control">
						<div class="input-group-append">
							<button type="button" class="btn btn-sm btn-info" data-remove>&nbsp;&times;&nbsp;</button>
						</div>
					</div>

					<select data-field="type" required class="form-control">
						<option value="">Jenis Atribut ...</option>
						<option value="text_min">Teks Sedikit</option>
						<option value="text_max">Teks banyak</option>
						<option value="date">Tanggal</option>
						<option value="number">Angka</option>
						<option value="money">Nominal Uang</option>
					</select>
				</div>
			</div>
		</fieldset>
		<a href="{% url 'catetree_list' %}" class="btn btn-secondary shadow px-lg-4 py-2 text-uppercase mt-4"><i class="fas fa-undo"></i> kembali</a>
		<button type="submit" data-save class="btn btn-info shadow px-lg-4 py-2 text-uppercase ml-1 mt-4"><i class="fas fa-save"></i> simpan</button>
	</form>
</div>
{% endblock %}