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


{% block layout_script %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- PDF.js (untuk thumbnail PDF) -->
<script src="{% static 'libs/pdfjs/pdf.min.js' %}"></script>
<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = "{% static 'libs/pdfjs/pdf.worker.min.js' %}";
</script>

<script>
(() => {
    const $form = $('#list_form_find');

    // Set initial values
    $form.find('[data-skpd]').val('{{ search_skpd_dg }}');
    // Mengatur nilai awal (initial value)
    $form.find('[data-category]').val('{{ search_kategori|default:'' }}'); // 🔥 PERBAIKAN DI SINI
    $form.find('[data-tahun]').val('{{ search_tahun }}');
    $form.find('[data-term]').val('{{ term_current }}');
    $('#item_list').val('{{ show }}');
    $('#sorting').val('{{ sorting }}');

    // Display mode buttons
    if ("{{ display }}" === 'list') {
      $('#btn_list').addClass('btn-active');
      $('#btn_col').removeClass('btn-active');
    } else {
      $('#btn_list').removeClass('btn-active');
      $('#btn_col').addClass('btn-active');
    }

    // ==============================
    // 🔍 SEARCH BUTTON
    // ==============================
    $('#searchButton').on('click', function () {
        const searchTerm = $('#searchTerm').val().trim();

        if (searchTerm) {
            $('#searchMode').val('semantic'); // gunakan semantic search
        } else {
            $('#searchMode').val('meta'); // gunakan filter meta biasa
        }

        return true;
    });
})();
</script>

<!-- ====================== -->
<!-- PDF Thumbnail Renderer -->
<!-- ====================== -->
<script>
document.addEventListener("DOMContentLoaded", async () => {
    const pdfThumbs = document.querySelectorAll("img[id^='pdf-thumb-']");

    for (const img of pdfThumbs) {
      const url = img.dataset.pdfUrl;

      try {
        const loadingTask = pdfjsLib.getDocument(url);
        const pdf = await loadingTask.promise;
        const page = await pdf.getPage(1);

        const viewport = page.getViewport({ scale: 1.0 });
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        await page.render({
          canvasContext: context,
          viewport: viewport
        }).promise;

        img.src = canvas.toDataURL("image/jpeg", 0.8);
      } catch (err) {
        console.error("Gagal render thumbnail PDF:", url, err);
        img.outerHTML = `<div class="text-danger p-2">Tidak bisa tampilkan PDF</div>`;
      }
    }
});
</script>
<script>


  function redir_disp(a) {
    window.location.href =
      "{{ search_kategori }}?term={{ term_current }}&pk_skpd_dg={{ search_skpd_dg }}&tahun={{ search_tahun }}&disp=" + a + "&item_jml={{ show }}&sorting={{ sorting }}";
  }
  
  function redir_sorting(a) {
    window.location.href =
      "{{ search_kategori }}?term={{ term_current }}&pk_skpd_dg={{ search_skpd_dg }}&tahun={{ search_tahun }}&disp={{ display }}&item_jml={{ show }}&sorting=" + a.value;
  }

    function redir_list(a) {
    const category = '{{ search_kategori|default:"" }}';
    const basePath = category ? `/berkas/list/${category}` : '/berkas/list';
    const params = new URLSearchParams({
      term: '{{ term_current|default:"" }}',
      pk_skpd_dg: '{{ search_skpd_dg|default:"" }}',
      tahun: '{{ search_tahun|default:"" }}',
      disp: '{{ display|default:"list" }}',
      item_jml: a.value
    });
    window.location.href = `${basePath}?${params.toString()}`;
  }

function reset_page() {
    // Kosongkan semua filter
    $('#list_form_find').find('input[type="text"]').val('');
    $('#list_form_find').find('input[type="number"]').val('');
    $('#list_form_find').find('select').prop('selectedIndex', 0);
    $('#list_form_find').find('input[type="radio"]').prop('checked', false);

    // Default type = all
    $('input[name="type"][value="all"]').prop('checked', true);

    // Clear semantic search
    $('#searchTerm').val('');
    $('#searchMode').val('');

    // Redirect hard ke halaman awal (tanpa query params)
    window.location.href = "{% url 'content_list' %}";
}
</script>
<script>
function reset_page() {
    // Kosongkan semua filter
    $('#list_form_find').find('input[type="text"]').val('');
    $('#list_form_find').find('input[type="number"]').val('');
    $('#list_form_find').find('select').prop('selectedIndex', 0);
    $('#list_form_find').find('input[type="radio"]').prop('checked', false);

    // Default type = all
    $('input[name="type"][value="all"]').prop('checked', true);

    // Clear semantic search
    $('#searchTerm').val('');
    $('#searchMode').val('');

    // Redirect hard ke halaman awal (tanpa query params)
    window.location.href = "{% url 'content_list' %}";
}
</script>

{% endblock %}



{% block layout_content %}
<div class="card my-3" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
  <div class="card-body">

    <!-- Form pencarian -->
    <form id="list_form_find" method="GET" action="{% url 'content_list' %}" class="mb-3">
      <input type="hidden" name="searchMode" id="searchMode" value="">

      <div class="form-row align-items-start">
        <!-- Form kiri -->
        <div class="col">
          <!-- Baris 1 -->
          <div class="form-row mb-2">
            <div class="col-md-3">
              <select class="form-control" data-skpd name="pk_skpd_dg">
                <option value="">Pilih Semua SKPD</option>
                {% for i in skpd_list %}
                  <option value="{{ i.pk }}">{{ i.urai }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3">
          <select data-category class="form-control" name="pk_categories" id="select_kategori">
            <option value="">Semua Kategori</option>
            {% for i in categories_list %}
              {% include "catetree/form_parents_option.html" with sups=i current=search_kategori|default:0|add:0 %}
            {% endfor %}
          </select>
            </div>
            <div class="col-md-2">
              <input data-tahun name="tahun" placeholder="Tahun" class="form-control">
            </div>
            <div class="col-md-2">
              <input data-term name="term" value="{{ term_current }}" placeholder="Cari Judul Berkas ..." class="form-control">
            </div>
            <div class="col-md-2">
              <input data-tag name="tag" value="{{ search_tag }}" placeholder="Cari Tag" class="form-control">
            </div>
          </div>

          <!-- Baris 2 -->
          <div class="form-row mb-2">
            <div class="col-md-4 d-flex">
              <input id="searchTerm" name="searchTerm" class="form-control mr-2" placeholder="Cari Teks di PDF / JPG...">
              <div class="d-flex align-items-center">
                <label class="mr-2 mb-0 text-center">
                  <input type="radio" name="type" value="pdf">
                  <i class="fas fa-file-pdf"></i>
                </label>
                <label class="mr-2 mb-0 text-center">
                  <input type="radio" name="type" value="image">
                  <i class="fas fa-image"></i>
                </label>
                <label class="mb-0 text-center">
                  <input type="radio" name="type" value="all" checked> all
                </label>
              </div>
            </div>

            <div class="col-md-2 d-flex align-items-center justify-content-center">
              <label class="mr-2 mb-0">Mode</label>
              <button id="btn_list" type="button" class="btn btn-sm btn-light mr-1" onclick="redir_disp('list')">
                <i class="fas fa-bars"></i>
              </button>
              <button id="btn_col" type="button" class="btn btn-sm btn-light" onclick="redir_disp('col')">
                <i class="fas fa-grip-horizontal"></i>
              </button>
            </div>

            <div class="col-md-2 d-flex">
              <label class="mr-2 mb-0 align-self-center">Jumlah</label>
              <select id="item_list" class="form-control" onchange="redir_list(this)">
                <option value="4"  {% if show == 4 %}selected{% endif %}>4</option>
                <option value="8"  {% if show == 8 %}selected{% endif %}>8</option>
                <option value="12" {% if show == 12 %}selected{% endif %}>12</option>
                <option value="16" {% if show == 16 %}selected{% endif %}>16</option>
                <option value="20" {% if show == 20 %}selected{% endif %}>20</option>
              </select>
            </div>

            <div class="col-md-4 d-flex">
              <label class="mr-2 mb-0 align-self-center">Sortir</label>
              <select id="sorting" class="form-control" onchange="redir_sorting(this)">
                <option value="desc">Berkas Terbaru</option>
                <option value="asc">Berkas Terlama</option>
              </select>
            </div>
          </div>
        </div>

        <!-- Tombol kanan -->
        <div class="col-auto d-flex flex-column pl-0">
          <button type="submit" class="btn btn-primary mb-2" id="searchButton">
            <i class="fa fa-search"></i> Cari
          </button>
          <button type="button" onclick="reset_page()" class="btn btn-warning">
            <i class="fa fa-undo"></i> Reset
          </button>
        </div>
      </div>
    </form>

    {% include 'extra/base_messages.html' %}

    {% if list|length %}
      {% if display == 'list' %}
        <!-- LIST VIEW -->
        <ul class="list-unstyled">
          {% for i in list %}
            {% if i.attachments_list %}
              {% with i.attachments_list|last as latest_attachment %}
                <li class="media border-bottom mb-1 pb-1" data-url="{% static latest_attachment.path %}">
                  <div class="media-body clearfix py-2">
                    <h5 class="mt-0 mb-1 font-weight-bold">
                      {% if i.deskripsi == 'MASUK' or i.deskripsi == 'KELUAR' %}
                        <a href="{% url 'surat_list' surat_type=i.deskripsi %}?term={{ i.judul }}">{{ i.judul }}</a>
                      {% else %}
                        <a href="{% url 'content_item' pk=i.pk %}">{{ i.judul }}</a>
                      {% endif %}
                    </h5>
                    <p class="m-0">{{ i.deskripsi|truncatewords:32 }}</p>

                    {% if i.attachments_list %}
                      <!-- {% for attachment in i.attachments_list %}
                        {% if attachment.path|lower|slice:"-4:" == ".pdf" %}
                          <a href="#"
                            class="text-dark pdf-link"
                            data-toggle="modal"
                            data-target="#pdfPreviewModal"
                            data-pdfurl="{% static attachment.path %}">
                            {{ attachment.name }}
                          </a>
                        {% else %}
                          <a href="#"
                            class="text-dark img-link"
                            data-toggle="modal"
                            data-target="#imgPreviewModal"
                            data-imgurl="{% static attachment.path %}">
                            {{ attachment.name }}
                          </a>
                        {% endif %}
                        <br>
                      {% endfor %} -->

                      <span class="float-right font-italic text-muted">
                        Ada {{ i.attachments_list|length }} Lampiran
                      </span>
                    {% else %}
                      <span class="float-right font-italic text-muted">
                        Tidak Ada Lampiran
                      </span>
                    {% endif %}
                  </div>
                </li>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </ul>

      {% elif display == 'col' %}
        <!-- GRID VIEW -->
        <div class="row">
          {% for i in list %}
            <div class="col-md-3 mb-4">
              <div class="card h-100">

                {% if i.attachments_list %}
                  {% if i.attachments_list|length > 1 %}
                    <!-- Carousel -->
                    <div id="carousel-{{ i.pk }}" class="carousel slide" data-ride="carousel" data-interval="2000">
                      <div class="carousel-inner">
                        {% for attachment in i.attachments_list %}
                          <div class="carousel-item {% if forloop.first %}active{% endif %}">
                            <img src="{% static 'resources/' %}{{ attachment.path|thumbnail_path }}"
                                class="d-block w-100 p-1"
                                alt="Thumbnail"
                                onerror="this.onerror=null;this.src='{% static 'upload/logo.png' %}'">
                          </div>
                        {% endfor %}
                      </div>
                      <a class="left carousel-control" href="#carousel-{{ i.pk }}" data-slide="prev">
                        <span><i class="fa fa-arrow-left"></i></span>
                      </a>
                      <a class="right carousel-control" href="#carousel-{{ i.pk }}" data-slide="next">
                        <span><i class="fa fa-arrow-right"></i></span>
                      </a>
                    </div>
                  {% else %}
                    <img src="{% static 'resources/' %}{{ i.attachments_list.0.path|thumbnail_path }}"
                        class="d-block w-100 p-1"
                        alt="Thumbnail"
                        onerror="this.onerror=null;this.src='{% static 'upload/logo.png' %}'">
                  {% endif %}

                {% else %}
                  <img src="{% static 'upload/logo.png' %}" class="d-block w-100 p-1" alt="No Thumbnail">
                {% endif %}

                <div class="card-body">
                  <h5 class="card-title font-weight-bold">
                    {% if i.deskripsi == 'MASUK' or i.deskripsi == 'KELUAR' %}
                      <a href="{% url 'surat_list' surat_type=i.deskripsi %}?term={{ i.judul }}">{{ i.judul }}</a>
                    {% else %}
                      <a href="{% url 'content_item' pk=i.pk %}">{{ i.judul }}</a>
                    {% endif %}
                  </h5>
                  <p class="card-text">{{ i.deskripsi|truncatewords:20 }}</p>
                </div>

                <div class="card-footer">
                  <span class="float-right font-italic text-muted">
                    {% if i.attachments_list %}
                      Ada {{ i.attachments_list|length }} Lampiran
                    {% else %}
                      Tidak Ada Lampiran
                    {% endif %}
                  </span>
                </div>

              </div>
            </div>
          {% endfor %}
        </div>
      {% endif %}
    {% else %}
      <div class="alert alert-dark text-center">(kosong)</div>
    {% endif %}

    <!-- PAGINASI -->
      <ul class="pagination justify-content-center mb-3">

      {# PREVIOUS #}
      {% if paging.has_previous %}
        <li class="page-item">
          <a class="page-link"
            href="?{% query_transform request page=paging.previous_page_number %}">
            <i class="fa fa-chevron-circle-left"></i>
          </a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a class="page-link">
            <i class="fa fa-chevron-circle-left"></i>
          </a>
        </li>
      {% endif %}

      {# NUMBERING #}
      {% for num in paging.paginator.page_range %}
        {% if paging.number == num %}
          <li class="page-item active">
            <a class="page-link" href="#">{{ num }}</a>
          </li>
        {% elif num >= paging.number|add:"-2" and num <= paging.number|add:"2" %}
          <li class="page-item">
            <a class="page-link"
              href="?{% query_transform request page=num %}">
              {{ num }}
            </a>
          </li>
        {% endif %}
      {% endfor %}

      {# NEXT #}
      {% if paging.has_next %}
        <li class="page-item">
          <a class="page-link"
            href="?{% query_transform request page=paging.next_page_number %}">
            <i class="fa fa-chevron-circle-right"></i>
          </a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a class="page-link">
            <i class="fa fa-chevron-circle-right"></i>
          </a>
        </li>
      {% endif %}

    </ul>
  </div>
</div>


<!-- Modal Preview PDF -->
<div class="modal fade" id="pdfPreviewModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Preview PDF</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <iframe id="pdfPreviewFrame" src="" frameborder="0" style="width: 100%; height: 80vh;"></iframe>
      </div>
    </div>
  </div>
</div>

<!-- Modal Preview Gambar -->
<div class="modal fade" id="imgPreviewModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Preview Gambar</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body text-center">
        <img id="imgPreviewFrame" src="" alt="Preview Gambar" style="max-width: 100%; max-height: 80vh;">
      </div>
    </div>
  </div>
</div>

{% endblock %}