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

{% block layout_script %}
<!-- JQUERY dan BOOTSTRAP -->
<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 membaca konten PDF -->
<script src="{% static 'libs/pdfjs/pdf.min.js' %}"></script>
<script>
  // Setting worker PDF.js agar bisa memproses PDF
  pdfjsLib.GlobalWorkerOptions.workerSrc = "{% static 'libs/pdfjs/pdf.worker.min.js' %}";
  console.log("PDF.js version:", pdfjsLib.version);
</script>

<!-- Tesseract.js untuk OCR gambar/PDF -->
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js"></script>

<!-- SweetAlert2 untuk pop-up notifikasi -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Script Utama -->
<script>
  (() => {
    // Tangkap form pencarian utama
    const $form = $('#list_form_find');

    // Trigger ganti action URL jika filter SKPD diubah
    $form.find('[data-skpd]').on('change', function () {
      let action = $form.data('action');
      $form.prop('action', action);
    }).trigger('change');

    // Set nilai dropdown dan input sesuai variabel dari server
    $form.find('[data-skpd]').val('{{ search_skpd_dg }}');
    $form.find('[data-category]').val('{{ search_kategori }}');
    $form.find('[data-tahun]').val('{{ search_tahun }}');
    $form.find('[data-term]').val('{{ term_current }}');
    $('#item_list').val('{{ show }}');
    $('#sorting').val('{{ sorting }}');

    // Aktifkan tombol display (list/grid)
    if ("{{ display }}" === 'list') {
      $('#btn_list').addClass('btn-active');
      $('#btn_col').removeClass('btn-active');
    } else {
      $('#btn_list').removeClass('btn-active');
      $('#btn_col').addClass('btn-active');
    }

    // Trigger ganti action URL jika filter kategori diubah
    $form.find('[data-category]').on('change', function () {
      let action = $form.data('action');
      if (this.value !== '') {
        action = `${action}/${this.value}`;
      }
      $form.prop('action', action);
    }).trigger('change');

    // Animasi alert pesan flash
    $('.alert').fadeIn(300).delay(1500).fadeOut(400);
  })();

  // Fungsi redirect saat memilih jumlah item
  function redir_list(a) {
    window.location.href = "{{ search_kategori }}?term={{ term_current }}&pk_skpd_dg={{ search_skpd_dg }}&tahun={{ search_tahun }}&disp={{ display }}&item_jml=" + a.value;
  }

  // Fungsi redirect saat memilih 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;
  }

  // Fungsi redirect saat ganti tampilan list/grid
  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 }}";
  }

  // Reset semua filter
  function reset_page() {
    window.location.href = "{% url 'content_list' %}?reset=1";
  }

  // Pencarian di semua file PDF
  async function searchAllPDFs() {
    $('#attachments_wait').fadeIn();
    const searchTerm = document.getElementById('searchTerm').value.toLowerCase();

    // Ambil semua URL file PDF
    const pdfUrls = Array.from(document.querySelectorAll('.file-url[data-type="pdf"]'))
      .map(el => el.dataset.url);

    const matchedUrls = [];

    for (const pdfUrl of pdfUrls) {
      try {
        // Load PDF
        const loadingTask = pdfjsLib.getDocument(pdfUrl);
        const pdf = await loadingTask.promise;

        let found = false;

        // Coba cari teks langsung (text layer PDF)
        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
          const page = await pdf.getPage(pageNum);
          const content = await page.getTextContent();
          const strings = content.items.map(item => item.str).join(' ').toLowerCase();

          if (strings.includes(searchTerm)) {
            found = true;
            break;
          }
        }

        // Jika tidak ditemukan, pakai OCR sebagai fallback
        if (!found) {
          for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
            const page = await pdf.getPage(pageNum);
            const viewport = page.getViewport({ scale: 4.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 }).promise;

            const { data: { text } } = await Tesseract.recognize(canvas, 'eng');
            if (text.toLowerCase().includes(searchTerm)) {
              found = true;
              break;
            }
          }
        }

        if (found) matchedUrls.push(pdfUrl);

      } catch (err) {
        console.error("Error reading PDF:", pdfUrl, err);
      }
    }

    // Sembunyikan item yang tidak cocok
    const items = document.querySelectorAll('li[data-url]');
    items.forEach(li => {
      li.style.display = matchedUrls.includes(li.dataset.url) ? '' : 'none';
    });

    $('#attachments_wait').fadeOut();

    // Tampilkan hasil
    Swal.fire({
      icon: matchedUrls.length > 0 ? 'success' : 'error',
      title: matchedUrls.length > 0 ? 'Ditemukan!' : 'Tidak Ditemukan!',
      text: matchedUrls.length > 0
        ? `Ditemukan di ${matchedUrls.length} PDF.`
        : `Tidak ditemukan di PDF mana pun.`
    });
  }

  // Pencarian di semua file gambar
  async function searchAllImages() {
    $('#attachments_wait').fadeIn();
    const searchTerm = document.getElementById('searchTerm').value.toLowerCase();

    // Ambil semua URL file gambar
    const imgUrls = Array.from(document.querySelectorAll('.file-url[data-type="img"]'))
      .map(el => el.dataset.url);

    const matchedUrls = [];

    for (const imgUrl of imgUrls) {
      const { data: { text } } = await Tesseract.recognize(imgUrl, 'eng');
      if (text.toLowerCase().includes(searchTerm)) {
        matchedUrls.push(imgUrl);
      }
    }

    // Sembunyikan item yang tidak cocok
    const items = document.querySelectorAll('li[data-url]');
    items.forEach(li => {
      li.style.display = matchedUrls.includes(li.dataset.url) ? '' : 'none';
    });

    $('#attachments_wait').fadeOut();

    Swal.fire({
      icon: matchedUrls.length > 0 ? 'success' : 'error',
      title: matchedUrls.length > 0 ? 'Ditemukan!' : 'Tidak Ditemukan!',
      text: matchedUrls.length > 0
        ? `Ditemukan di ${matchedUrls.length} gambar.`
        : `Tidak ditemukan di gambar mana pun.`
    });
  }

  // MODAL Preview PDF
  $('#pdfPreviewModal').on('show.bs.modal', function (event) {
    $(this).find('#pdfPreviewFrame').attr('src', $(event.relatedTarget).data('pdfurl'));
  });
  $('#pdfPreviewModal').on('hidden.bs.modal', function () {
    $(this).find('#pdfPreviewFrame').attr('src', '');
  });

  // MODAL Preview Gambar
  $('#imgPreviewModal').on('show.bs.modal', function (event) {
    $(this).find('#imgPreviewFrame').attr('src', $(event.relatedTarget).data('imgurl'));
  });
  $('#imgPreviewModal').on('hidden.bs.modal', function () {
    $(this).find('#imgPreviewFrame').attr('src', '');
  });
</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 data-action="{% url 'content_list' %}" id="list_form_find" class="mb-3">
      <div class="form-row align-items-center">
        <div class="col col-md-3 mt-2">
          <select data-skpd name="pk_skpd_dg" class="form-control">
            <option value="">Semua SKPD</option>
            {% for i in skpd_list %}
              <option value="{{ i.pk }}">{{ i.urai }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col col-md-3 mt-2">
          <select data-category class="form-control" id="select_kategori">
            <option value="">Semua Kategori</option>
            {% for i in categories_list %}
              {% include "catetree/form_parents_option.html" with sups=i current=pk_categories|default:0|add:0 %}
            {% endfor %}
          </select>
        </div>
        <div class="col-md-1 mt-2">
          <input data-tahun name="tahun" placeholder="Tahun" class="form-control">
        </div>
        <div class="col-md-2 mt-2">
          <input data-term name="term" value="{{ term_current }}" placeholder="Cari Judul Berkas ..." class="form-control">
        </div>
        <div class="col-md-3 mt-2">
          <button type="submit" class="btn shadow btn-webapp text-uppercase px-lg-4">
            <i class="fa fa-search"></i> Cari
          </button>
          <button type="button" onclick="reset_page()" class="btn shadow btn-warning text-uppercase px-lg-4">
            <i class="fa fa-undo"></i> Reset
          </button>
        </div>
      </div>
    </form>

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

    <div class="form-inline d-flex flex-row-reverse mb-4">
      <div class="form-group float-right">
        <label class="mt-2">Sortir</label>
        <div class="col-md-4 mt-2">
          <select sorting name="sorting" id="sorting" onchange="redir_sorting(this)" class="form-control mr-custom">
            <option value="desc">Berkas Terbaru</option>
            <option value="asc">Berkas Terlama</option>
          </select>
        </div>
      </div>
      <div class="form-group border-right mr-3 px-2">
        <label class="mt-2">Item</label>
        <div class="col-md-4 mt-2">
          <select item-list name="item_list" id="item_list" class="form-control" onchange="redir_list(this)">
            <option value="6">6</option>
            <option value="12">12</option>
            <option value="18">18</option>
            <option value="24">24</option>
          </select>
        </div>
      </div>
      <div class="form-group border-right mr-3 px-2">
				<label class="mr-2 mt-2">Tipe</label>
			    <div class="ml-2">
			    	<button class="btn" type="button" id="btn_list" onclick="redir_disp('list')" data-target="#"><i class="fas fa-bars mt-2 "></i></button>
					  <button class="btn" type="button" id="btn_col" onclick="redir_disp('col')" data-target="#"><i class="fas fa-grip-horizontal mt-2 "></i></button>
				</div>
			</div>
      <div class="input-group mb-0 border-right mr-3 px-2">
        <input type="text" id="searchTerm" class="form-control" placeholder="Cari Teks di PDF / Gambar..." aria-label="Search Term">
        <div class="input-group-append">
          <button type="button" onclick="searchAllPDFs()" class="btn shadow btn-danger text-uppercase px-lg-4">
            <i class="fa fa-file-pdf"></i> PDF
          </button>
          <button type="button" onclick="searchAllImages()" class="btn shadow btn-success text-uppercase px-lg-4">
            <i class="fa fa-image"></i> JPG/JPEG
          </button>
        </div>
      </div>
    </div>

    <!-- {% if list|length %}
      {% if display == 'list' %}
        <ul class="list-unstyled">
          {% for i in list %}
            {% if i.attachments_list %}
              {% with i.attachments_list.0.path as file_path %}
                <li class="media border-bottom mb-1 pb-1" data-url="{% static file_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 file_path|lower|slice:"-4:" == ".pdf" %}
                      <a href="#" class="text-dark pdf-link"
                        data-toggle="modal"
                        data-target="#pdfPreviewModal"
                        data-pdfurl="{% static file_path %}">
                        {{ i.attachments_list.0.name }}
                      </a>
                      <span class="d-none file-url" data-type="pdf" data-url="{% static file_path %}"></span>
                    {% else %}
                      <a href="#" class="text-dark img-link"
                        data-toggle="modal"
                        data-target="#imgPreviewModal"
                        data-imgurl="{% static file_path %}">
                        {{ i.attachments_list.0.name }}
                      </a>
                      <span class="d-none file-url" data-type="img" data-url="{% static file_path %}"></span>
                    {% endif %}
                    <span class="float-right font-italic text-muted">
                      Ada {{ i.attachments }} Lampiran
                    </span>
                  </div>
                </li>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </ul>

      {% elif display == 'col' %}
        <div class="row">
          {% for i in list %}
            {% if i.attachments_list %}
              {% with i.attachments_list.0.path as file_path %}
                <div class="col-md-4 mb-4" data-url="{% static file_path %}">
                  <div class="card h-100">
                    <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>
                      {% if file_path|lower|slice:"-4:" == ".pdf" %}
                        <a href="#" class="text-dark pdf-link"
                          data-toggle="modal"
                          data-target="#pdfPreviewModal"
                          data-pdfurl="{% static file_path %}">
                          {{ i.attachments_list.0.name }}
                        </a>
                        <span class="d-none file-url" data-type="pdf" data-url="{% static file_path %}"></span>
                      {% else %}
                        <a href="#" class="text-dark img-link"
                          data-toggle="modal"
                          data-target="#imgPreviewModal"
                          data-imgurl="{% static file_path %}">
                          {{ i.attachments_list.0.name }}
                        </a>
                        <span class="d-none file-url" data-type="img" data-url="{% static file_path %}"></span>
                      {% endif %}
                    </div>
                    <div class="card-footer">
                      <span class="float-right font-italic text-muted">
                        Ada {{ i.attachments }} Lampiran
                      </span>
                    </div>
                  </div>
                </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      {% endif %}
    {% else %}
      <div class="alert alert-dark text-center">(kosong)</div>
    {% endif %} -->


    {% if list|length %}
      {% if display == 'list' %}
        <ul class="list-unstyled">
          {% for i in list %}
            {% if i.attachments_list %}
              {% with i.attachments_list.0.path as file_path %}
                <li class="media border-bottom mb-1 pb-1" data-url="{% static file_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 file_path|lower|slice:"-4:" == ".pdf" %}
                      <a href="#" class="text-dark pdf-link"
                        data-toggle="modal"
                        data-target="#pdfPreviewModal"
                        data-pdfurl="{% static file_path %}">
                        {{ i.attachments_list.0.name }}
                      </a>
                      <span class="d-none file-url" data-type="pdf" data-url="{% static file_path %}"></span>
                    {% else %}
                      <a href="#" class="text-dark img-link"
                        data-toggle="modal"
                        data-target="#imgPreviewModal"
                        data-imgurl="{% static file_path %}">
                        {{ i.attachments_list.0.name }}
                      </a>
                      <span class="d-none file-url" data-type="img" data-url="{% static file_path %}"></span>
                    {% endif %}
                    <span class="float-right font-italic text-muted">
                      Ada {{ i.attachments }} Lampiran
                    </span>
                  </div>
                </li>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </ul>

      {% elif display == 'col' %}
        <div class="row">
          {% for i in list %}
            {% if i.attachments_list %}
              {% with i.attachments_list.0.path as file_path %}
                <div class="col-md-4 mb-4" data-url="{% static file_path %}">
                  <div class="card h-100" style="box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;">
                    {% if file_path|lower|slice:"-4:" == ".pdf" %}
                      <img src="{% static i.attachments_list.0.thumbnail|default:'img/pdf-default.png' %}" class="card-img-top" alt="Thumbnail PDF">
                    {% else %}
                      <img src="{% static file_path %}" class="card-img-top" alt="Image Preview">
                    {% 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>

                      {% if file_path|lower|slice:"-4:" == ".pdf" %}
                        <a href="#" class="text-dark pdf-link"
                          data-toggle="modal"
                          data-target="#pdfPreviewModal"
                          data-pdfurl="{% static file_path %}">
                          {{ i.attachments_list.0.name }}
                        </a>
                        <span class="d-none file-url" data-type="pdf" data-url="{% static file_path %}"></span>
                      {% else %}
                        <a href="#" class="text-dark img-link"
                          data-toggle="modal"
                          data-target="#imgPreviewModal"
                          data-imgurl="{% static file_path %}">
                          {{ i.attachments_list.0.name }}
                        </a>
                        <span class="d-none file-url" data-type="img" data-url="{% static file_path %}"></span>
                      {% endif %}
                    </div>

                    <div class="card-footer">
                      <span class="float-right font-italic text-muted">
                        Ada {{ i.attachments }} Lampiran
                      </span>
                    </div>
                  </div>
                </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      {% endif %}
    {% else %}
      <div class="alert alert-dark text-center">(kosong)</div>
    {% endif %}

    <!-- PAGINASINYA -->
    <ul class="pagination justify-content-center mb-3">
      {% if paging.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?page={{ paging.previous_page_number }}&term={{ term_current }}&pk_skpd_dg={{ search_skpd_dg }}&tahun={{ search_tahun }}&disp={{ display }}&item_jml={{ show }}&sorting={{ sorting }}">
            
            <i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
          </a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a class="page-link">
            <i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
          </a>
        </li>
      {% endif %}

      {% 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="?page={{ num }}&term={{ term_current }}&pk_skpd_dg={{ search_skpd_dg }}&tahun={{ search_tahun }}&disp={{ display }}&item_jml={{ show }}&sorting={{ sorting }}">{{ num }}</a>
          </li>
        {% endif %}
      {% endfor %}

      {% if paging.has_next %}
        <li class="page-item">
          <a class="page-link" href="?page={{ paging.next_page_number }}&term={{ term_current }}&pk_skpd_dg={{ search_skpd_dg }}&tahun={{ search_tahun }}&disp={{ display }}&item_jml={{ show }}&sorting={{ sorting }}">
            <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
          </a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a class="page-link">
            <i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
          </a>
        </li>
      {% endif %}
    </ul>
  </div>
</div>

<!-- Modal Preview PDF -->
<div class="modal fade" id="pdfPreviewModal" tabindex="-1" role="dialog" aria-labelledby="pdfPreviewModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="pdfPreviewModalLabel">Preview PDF</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
          <span aria-hidden="true">&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" aria-labelledby="imgPreviewModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="imgPreviewModalLabel">Preview Gambar</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
          <span aria-hidden="true">&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>

<!-- LOADER PENCARIAN -->
<div id="attachments_wait" class="modal" tabindex="1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="margin-top: 200px;">
      <div class="modal-body">
        <p class="mt-0">Sedang melakukan proses pencarian, <b>mohon ditunggu</b>.</p>
        <div class="progress">
          <div data-wait class="progress-bar progress-bar-animated progress-bar-striped bg-webapp" style="width: 50%">50%</div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}