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

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

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

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

    // Disable sementara dropdown kategori
    const selectKategori = document.querySelector('[name="pk_categories"]');
    if (selectKategori) {
      selectKategori.disabled = true;
      selectKategori.title = "Menunggu hasil prediksi kategori...";
    }

    const formData = new FormData();
    formData.append("file", file);

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

        // Update kategori otomatis
        if (data.pred_category && selectKategori) {
          selectKategori.value = data.pred_category;
        }

        // Update tags otomatis
        const tagInput = document.querySelector('[name="tags"]');
        if (data.suggested_tags && tagInput) {
          tagInput.value = data.suggested_tags.join(", ");
        }
      })
      .catch(err => console.error("Gagal memprediksi:", err))
      .finally(() => {
        // Enable kembali kategori
        if (selectKategori) {
          selectKategori.disabled = false;
          selectKategori.title = "";
        }
      });
  }
});

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>

<!-- Modal Loading -->
<div id="attachments_wait" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-body text-center p-4">
        <div class="mb-3">
          <div class="spinner-border text-webapp" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
        <p class="mb-2 text-muted">Sistem sedang memproses dokumen...</p>
        <div class="progress" style="height: 10px;">
          <div data-wait class="progress-bar progress-bar-striped progress-bar-animated bg-webapp" style="width: 0%"></div>
        </div>
      </div>
    </div>
  </div>
</div>

{% 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_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" disabled title="Menunggu hasil prediksi kategori...">
          <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>
        <br>
        <span style="font-size: 10px; color: #000000ab; background-color: rgb(231, 201, 29);
          padding: 5px; border-radius: 7px; width: 120px;">
          <b>Jika rekomendasi kategori dan tag kurang sesuai, silahkan diganti </b>
        </span>
      </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>

      <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>
    </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 %}