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


{% block layout_script %}
<script>
document.addEventListener("change", function (e) {
  const input = e.target;

  // Deteksi hanya <input type="file" name="attachments">
  if (input.tagName === "INPUT" && input.type === "file" && input.name === "attachments") {
    const file = input.files[0];
    if (!file) return;

    // Update label file jika ada label bootstrap
    const label = input.closest(".custom-file")?.querySelector(".custom-file-label");
    if (label) label.textContent = file.name;

    // Siapkan FormData untuk dikirim ke backend
    const formData = new FormData();
    formData.append("file", file);

    // Kirim ke endpoint Django
    fetch("/berkas/predict-category-tags/", {
      method: "POST",
      body: formData,
    })
      .then((res) => res.json())
      .then((data) => {
        console.log("Hasil prediksi:", data);

        // Isi kategori jika berhasil
        if (data.pred_category) {
          const selectKategori = document.querySelector('[name="pk_categories"]');
          if (selectKategori) selectKategori.value = data.pred_category;
        }

        // Isi tag otomatis (masih bisa diedit user)
        if (data.suggested_tags) {
          const tagInput = document.querySelector('[name="tags"]');
          if (tagInput) tagInput.value = data.suggested_tags.join(", ");
        }
      })
      .catch((err) => console.error("Gagal memprediksi:", err));
  }
});
</script>


<script>
function hapusLampiran(id) {
	const input = document.getElementById('pending_delete_ids');
	let current = input.value ? input.value.split(',') : [];
	if (!current.includes(id.toString())) {
		current.push(id);
	}
	input.value = current.join(',');
	const row = document.getElementById('att-row-' + id);
	if (row) {
		row.style.display = 'none';
	}
}
</script>
{% include 'extra/preview.html' %}

<div id="upload_toast" class="toast" role="alert" style="position: fixed; bottom: 4vh; right: 2.50vw;">
	<div class="toast-body">
		<button type="button" class="close" data-dismiss="toast">&times;</button>
		<span data-message class="pr-2"></span>
	</div>
</div>

<script src="{% static 'loader_v1.js' %}?_={{ date_unique_current }}"></script>
{{ categories_flat|json_script:"attributes_meta" }}
{{ form.attributes.data|default:form.attributes.initial|json_script:"attributes_data" }}
<script src="{% static 'page_fileman_form.js' %}?_={{ date_unique_current }}"></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" enctype="multipart/form-data" autocomplete="off" id="upload" class="card-body">
		<h5 class="card-title mt-0 clearfix">
			<span>Form Unggah Berkas</span>

		</h5>

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

		{% csrf_token %}
		<textarea name="attributes" hidden></textarea>

		<div class="form-row mb-2">
			<div class="col col-md-7">
				<select name="pk_skpd_dg" class="form-control">
					<option value="">{{ form.pk_skpd_dg.label }}</option>
					{% for i in skpd_list %}
						{% with current=form.fields.pk_skpd_dg.data|default:form.fields.pk_skpd_dg.initial %}
							<option value="{{ i.pk }}" {% if form.pk_skpd_dg.initial == i.pk %}selected{% endif %}>{{ i.urai }}</option>
						{% endwith %}
					{% endfor %}
				</select>
			</div>
			<div class="col">
				<input name="judul" value="{{ form.judul.data|default:form.judul.initial|default:'' }}" required placeholder="{{ form.judul.label }} ..." title="{{ form.judul.label }} ..." class="form-control">
			</div>
		</div>
		
		{% include 'fileman/form_attachments.html' %}
		
		<div class="form-row mb-3 mt-1">
			<div class="col col-md-4">
				<select name="pk_categories" required class="form-control">
					<option value="">{{ form.pk_categories.label }} ...</option>
					{% for i in categories_tree %}
						{% include "catetree/form_parents_option.html" with sups=i current=form.fields.pk_categories.data|default:form.fields.pk_categories.initial|add:0 %}
					{% endfor %}
				</select>
			</div>
			<div class="col-md-1">
				<select name="tahun" required class="form-control">
					<option value="">{{ form.fields.tahun.label }} ...</option>
					{% for t in form.fields.tahun.queryset %}
						{% with current=form.fields.tahun.data|default:form.fields.tahun.initial %}
							<option {% if current|add:0 == t.tahun %}selected{% endif %}>{{ t.tahun }}</option>
						{% endwith %}
					{% endfor %}
				</select>
			</div>
			<!-- #start agus 28/04/25 Menambahkan dropdown untuk memilih status -->
			<div class="col col-md-2">
				<select name="status_konten" required class="form-control">
				<option value="">{{ form.status_konten.label }} ...</option> 
				<option value="public" {% if form.status_konten.value == 'public' %}selected{% endif %}>Public</option>
				<option value="private" {% if form.status_konten.value == 'private' %}selected{% endif %}>Private</option>
				</select>
			</div>
			<!-- #end -->
		</div>

		<div class="form-group">
			<textarea name="deskripsi" required placeholder="{{ form.deskripsi.label }} ..." title="{{ form.deskripsi.label }} ..." rows="3" class="form-control" style="resize: none;">{{ form.deskripsi.data|default:form.deskripsi.initial|default:'' }}</textarea>
		</div>

		<div class="form-group">
			<input type="text" name="tags" placeholder="Masukkan tags dokumen..." class="form-control" value="{{ tags_initial|default:'' }}" />
			<small class="form-text text-muted"><b>Tags dipisahkan dengan koma. Contoh: </b>Pembangunan, Provinsi, Papua Tengah, Kontrak, dll.</small>
		</div>

		{% include 'fileman/form_attributes.html' %}

		<a href="{% url 'content_list' %}" class="btn btn-sm btn-secondary shadow text-uppercase mt-4">
			<i class="fas fa-list"></i> list berkas
		</a>
		<input type="hidden" name="pending_delete_ids" id="pending_delete_ids" value="">
		<button type="submit" data-save class="btn btn-sm btn-success shadow text-uppercase ml-1 mt-4"><i class="fas fa-save"></i> simpan</button>
		<div id="upload_exec" class="float-right">
		{% if pk %}
			<!-- <a data-delete="{% url 'content_delete' pk=pk %}" class="btn btn-danger shadow px-lg-4 py-2 text-uppercase ml-1 mt-4">hapus</a> -->
		{% endif %}
		</div>
	</form>
</div>


{% endblock %}