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

{% block layout_script %}

<!-- =============================== -->
<!-- 📦 LIBRARY EKSTERNAL -->
<!-- =============================== -->
<!-- jQuery & 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 -->
<script src="{% static 'libs/pdfjs/pdf.min.js' %}"></script>
<script>
  // Worker untuk PDF.js
  pdfjsLib.GlobalWorkerOptions.workerSrc = "{% static 'libs/pdfjs/pdf.worker.min.js' %}";
  console.log("PDF.js version:", pdfjsLib.version);
</script>

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

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

<!-- Script Utama -->
<script>
  (() => {
    // ===============================
    // 🔎 FORM & FILTER HANDLER
    // ===============================
    const $form = $('#list_form_find');

    // Ubah action URL saat SKPD dipilih
    $form.find('[data-skpd]').on('change', function () {
      const action = $form.data('action');
      $form.prop('action', action);
    }).trigger('change');

    // Set nilai awal filter 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');
    }

    // Ubah action URL saat kategori dipilih
    $form.find('[data-category]').on('change', function () {
      const categoryValue = this.value || '';
      let action = $form.data('action') || '{% url "content_list" %}';
      if (categoryValue) action = `${action}/${categoryValue}`;
      $form.prop('action', action);
      console.log('Action URL:', action);
    });

    // Trigger ulang jika kategori sudah ada
    if ('{{ search_kategori|default:"" }}') {
      $form.find('[data-category]').trigger('change');
    }

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


    // ===============================
    // 🔎 FORM SUBMIT HANDLER
    // ===============================
    $('#searchButton').on('click', function (e) {
      e.preventDefault();

      const searchTerm = $('#searchTerm').val().trim();
      const type = $('input[name="type"]:checked').val();
      const hasMeta = hasMetaFilters();
      const hasTitleTag = hasTitleOrTag();

      if (searchTerm && !hasMeta && !hasTitleTag) {
        // Case 2: hanya OCR
        if (type === 'pdf') searchAllPDFs();
        else if (type === 'image') searchAllImages();
        else searchAllFiles();

      } else if (!searchTerm && (hasMeta || hasTitleTag)) {
        // Case 1: hanya filter meta/judul/tag
        $('#searchMode').val('meta');
        $form.submit();

      } else if (searchTerm && (hasMeta || hasTitleTag)) {
        // Case 3: kombinasi (backend + OCR)
        $('#searchMode').val('combo');
        $form.submit();

      } else {
        $form.submit();
      }
    });

    // ===============================
    // 🛠 HELPER FUNCTION
    // ===============================
    function hasMetaFilters() {
      return $('[data-skpd]').val() || $('[data-category]').val() || $('[data-tahun]').val();
    }

    function hasTitleOrTag() {
      return $('[name="term"]').val().trim() || $('[name="tag"]').val().trim();
    }
  })();


  // ===============================
  // 🔀 REDIRECT / RESET FUNCTION
  // ===============================
  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 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_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 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();
    const pdfUrls = Array.from(document.querySelectorAll('.file-url[data-type="pdf"]'))
      .map(el => el.dataset.url)
      .slice(0, 6);

    const matchedUrls = [];
    const progressBar = document.querySelector('[data-wait]');

    for (let i = 0; i < pdfUrls.length; i++) {
      const pdfUrl = pdfUrls[i];
      try {
        const loadingTask = pdfjsLib.getDocument(pdfUrl);
        const pdf = await loadingTask.promise;
        let found = false;
        const maxPages = Math.min(pdf.numPages, 3);

        // 🔎 Cari teks langsung di PDF
        for (let pageNum = 1; pageNum <= maxPages; 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 ketemu, lakukan OCR dengan Tesseract
        if (!found) {
          for (let pageNum = 1; pageNum <= maxPages; pageNum++) {
            const page = await pdf.getPage(pageNum);
            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 }).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);
      }

      // Progress bar update
      const progress = Math.round(((i + 1) / pdfUrls.length) * 100);
      progressBar.style.width = `${progress}%`;
      progressBar.textContent = `${progress}%`;
    }

    // 🔀 Update tampilan item
    const items = document.querySelectorAll('[data-url]');
    items.forEach(el => {
      const matched = matchedUrls.includes(el.dataset.url);
      const container = el.closest('li') || el.closest('.col-md-3');
      if (container) container.style.display = matched ? '' : 'none';
    });

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

    // ✅ Feedback ke user
    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();
    const imgUrls = Array.from(document.querySelectorAll('.file-url[data-type="img"]'))
      .map(el => el.dataset.url);

    const matchedUrls = [];

    for (const imgUrl of imgUrls) {
      try {
        const { data: { text } } = await Tesseract.recognize(imgUrl, 'eng');
        if (text.toLowerCase().includes(searchTerm)) {
          matchedUrls.push(imgUrl);
        }
      } catch (err) {
        console.error("Error reading image:", imgUrl, err);
      }
    }

    // 🔀 Update tampilan item
    const items = document.querySelectorAll('[data-url]');
    items.forEach(el => {
      const matched = matchedUrls.includes(el.dataset.url);
      const container = el.closest('li') || el.closest('.col-md-3');
      if (container) container.style.display = matched ? '' : 'none';
    });

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

    // ✅ Feedback ke user
    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.'
    });
  }

  // ======================================
  // 🔍 PENCARIAN DI SEMUA FILE (PDF & IMG)
  // ======================================
  async function searchAllFiles() {
    $('#attachments_wait').fadeIn();

    const searchTerm = document.getElementById('searchTerm').value.toLowerCase();
    const matchedUrls = new Set();

    // Kumpulkan daftar URL file
    const pdfUrls = Array.from(document.querySelectorAll('.file-url[data-type="pdf"]'))
      .map(el => el.dataset.url)
      .slice(0, 6);

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

    const progressBar = document.querySelector('[data-wait]');
    const totalTasks = pdfUrls.length + imgUrls.length;
    let completedTasks = 0;

    // =======================
    // 🔎 Pencarian di PDF
    // =======================
    for (const pdfUrl of pdfUrls) {
      try {
        const loadingTask = pdfjsLib.getDocument(pdfUrl);
        const pdf = await loadingTask.promise;
        let found = false;
        const maxPages = Math.min(pdf.numPages, 3);

        // Cari teks langsung di PDF
        for (let pageNum = 1; pageNum <= maxPages; 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 ketemu, lakukan OCR
        if (!found) {
          for (let pageNum = 1; pageNum <= maxPages; pageNum++) {
            const page = await pdf.getPage(pageNum);
            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 }).promise;
            const { data: { text } } = await Tesseract.recognize(canvas, 'eng');

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

        if (found) matchedUrls.add(pdfUrl);

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

      // Update progress bar
      completedTasks++;
      const progress = Math.round((completedTasks / totalTasks) * 100);
      progressBar.style.width = `${progress}%`;
      progressBar.textContent = `${progress}%`;
    }

    // =======================
    // 🖼️ Pencarian di Gambar
    // =======================
    for (const imgUrl of imgUrls) {
      try {
        const { data: { text } } = await Tesseract.recognize(imgUrl, 'eng');
        if (text.toLowerCase().includes(searchTerm)) {
          matchedUrls.add(imgUrl);
        }
      } catch (err) {
        console.error("Error reading image:", imgUrl, err);
      }

      // Update progress bar
      completedTasks++;
      const progress = Math.round((completedTasks / totalTasks) * 100);
      progressBar.style.width = `${progress}%`;
      progressBar.textContent = `${progress}%`;
    }

    // 🔀 Update tampilan hasil
    const items = document.querySelectorAll('[data-url]');
    items.forEach(el => {
      const matched = matchedUrls.has(el.dataset.url);
      const container = el.closest('li') || el.closest('.col-md-3');
      if (container) container.style.display = matched ? '' : 'none';
    });

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

    // ✅ Feedback ke user
    Swal.fire({
      icon: matchedUrls.size > 0 ? 'success' : 'error',
      title: matchedUrls.size > 0 ? 'Ditemukan!' : 'Tidak Ditemukan!',
      text: matchedUrls.size > 0
        ? `Ditemukan di ${matchedUrls.size} file PDF / Gambar.`
        : 'Tidak ditemukan di file PDF / Gambar mana pun.'
    });
  }


  // ============================
  // 📑 MODAL PREVIEW FILE
  // ============================

  // 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', '');
  });

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


{% if request.GET.searchMode == "combo" and request.GET.searchTerm %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const searchTerm = "{{ request.GET.searchTerm|escapejs }}".trim().toLowerCase();
    const type = "{{ request.GET.type|default:'all' }}";
    const items = document.querySelectorAll('.file-url'); // hasil filter backend

    console.log("🔍 Combo Mode OCR → hasil filter:", items.length, "file");

    // ========================
    // 🔎 Search PDF hasil filter
    // ========================
    async function searchFilteredPDFs() {
      $('#attachments_wait').fadeIn();
      const matchedUrls = [];
      const progressBar = document.querySelector('[data-wait]');

      for (let i = 0; i < items.length; i++) {
        const el = items[i];
        if (el.dataset.type !== "pdf") continue;
        const pdfUrl = el.dataset.url;
        let found = false;

        try {
          const loadingTask = pdfjsLib.getDocument(pdfUrl);
          const pdf = await loadingTask.promise;
          const maxPages = Math.min(pdf.numPages, 3);

          // Cari teks langsung di PDF
          for (let pageNum = 1; pageNum <= maxPages; 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;
            }
          }

          // Kalau belum ketemu → OCR
          if (!found) {
            for (let pageNum = 1; pageNum <= maxPages; pageNum++) {
              const page = await pdf.getPage(pageNum);
              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 }).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 OCR PDF:", pdfUrl, err);
        }

        // Update progress bar
        const progress = Math.round(((i + 1) / items.length) * 100);
        if (progressBar) {
          progressBar.style.width = `${progress}%`;
          progressBar.textContent = `${progress}%`;
        }
      }

      // Filter tampilan
      items.forEach(el => {
        const matched = matchedUrls.includes(el.dataset.url);
        const container = el.closest('li') || el.closest('.col-md-3');
        if (container) container.style.display = matched ? '' : '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} PDF hasil filter.`
          : 'Tidak ditemukan di hasil filter.'
      });
    }


    // ========================
    // 🖼️ Search Gambar hasil filter
    // ========================
    async function searchFilteredImages() {
      $('#attachments_wait').fadeIn();
      const matchedUrls = [];

      for (const el of items) {
        if (el.dataset.type !== "img") continue;
        const imgUrl = el.dataset.url;

        try {
          const { data: { text } } = await Tesseract.recognize(imgUrl, 'eng');
          if (text.toLowerCase().includes(searchTerm)) {
            matchedUrls.push(imgUrl);
          }
        } catch (err) {
          console.error("❌ Error OCR Image:", imgUrl, err);
        }
      }

      // Filter tampilan
      items.forEach(el => {
        const matched = matchedUrls.includes(el.dataset.url);
        const container = el.closest('li') || el.closest('.col-md-3');
        if (container) container.style.display = matched ? '' : '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 hasil filter.`
          : 'Tidak ditemukan di hasil filter.'
      });
    }


    // ========================
    // 📂 Search Semua hasil filter
    // ========================
    async function searchFilteredAll() {
      $('#attachments_wait').fadeIn();
      const matchedUrls = [];
      const progressBar = document.querySelector('[data-wait]');
      let completed = 0;

      if (items.length === 0) {
        $('#attachments_wait').fadeOut();
        Swal.fire({
          icon: 'warning',
          title: 'Tidak ada file hasil filter',
          text: 'Filter tidak mengembalikan file apapun.'
        });
        return;
      }

      for (let i = 0; i < items.length; i++) {
        const el = items[i];
        const fileType = el.dataset.type;
        const fileUrl = el.dataset.url;
        let found = false;

        try {
          if (fileType === "pdf") {
            const loadingTask = pdfjsLib.getDocument(fileUrl);
            const pdf = await loadingTask.promise;
            const maxPages = Math.min(pdf.numPages, 3);

            // Cari teks asli dulu
            for (let pageNum = 1; pageNum <= maxPages; 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;
              }
            }

            // Kalau belum ketemu → OCR
            if (!found) {
              for (let pageNum = 1; pageNum <= maxPages; pageNum++) {
                const page = await pdf.getPage(pageNum);
                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 }).promise;
                const { data: { text } } = await Tesseract.recognize(canvas, 'eng');

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

          else if (fileType === "img") {
            const { data: { text } } = await Tesseract.recognize(fileUrl, 'eng');
            if (text.toLowerCase().includes(searchTerm)) {
              found = true;
            }
          }

          if (found) matchedUrls.push(fileUrl);

        } catch (err) {
          console.error("❌ OCR error:", fileUrl, err);
        }

        // Update progress bar
        completed++;
        const progress = Math.round((completed / items.length) * 100);
        if (progressBar) {
          progressBar.style.width = `${progress}%`;
          progressBar.textContent = `${progress}%`;
        }
      }

      // Filter tampilan
      items.forEach(el => {
        const matched = matchedUrls.includes(el.dataset.url);
        const container = el.closest('li') || el.closest('.col-md-3');
        if (container) container.style.display = matched ? '' : '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} file hasil filter.`
          : 'Tidak ditemukan setelah OCR pada hasil filter.'
      });
    }


    // ========================
    // 🚀 Jalankan sesuai type
    // ========================
    if (searchTerm) {
      if (type === "pdf") {
        searchFilteredPDFs();
      } else if (type === "image") {
        searchFilteredImages();
      } else {
        searchFilteredAll();
      }
    }
  });
  </script>
{% endif %}

<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); // hanya render halaman pertama

        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;

        // konversi canvas ke base64 → pasang ke <img>
        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>
{% 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" 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-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" aria-label="PDF" title="PDF"></i>
                </label>
                <label class="mr-2 mb-0 text-center">
                  <input type="radio" name="type" value="image">
                  <i class="fas fa-image" aria-label="Image" title="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" aria-label="List" title="List"></i>
              </button>
              <button id="btn_col" type="button" class="btn btn-sm btn-light" onclick="redir_disp('col')">
                <i class="fas fa-grip-horizontal" aria-label="Grid" title="Grid"></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"
            style="box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;">
            <i class="fa fa-search"></i> Cari
          </button>
          <button type="button" onclick="reset_page()" class="btn btn-warning"
            style="box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;">
            <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>
                          <span class="d-none file-url" data-type="pdf" data-url="{% static attachment.path %}"></span>
                        {% else %}
                          <a href="#"
                            class="text-dark img-link"
                            data-toggle="modal"
                            data-target="#imgPreviewModal"
                            data-imgurl="{% static attachment.path %}">
                            {{ attachment.name }}
                          </a>
                          <span class="d-none file-url" data-type="img" data-url="{% static attachment.path %}"></span>
                        {% 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" style="box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;">
                
                {% if i.attachments_list %}
                  {% if i.attachments_list|length > 1 %}
                    <!-- Carousel untuk 2 atau lebih lampiran -->
                    <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>
                      <!-- Carousel controls -->
                      <a class="left carousel-control" href="#carousel-{{ i.pk }}" data-slide="prev">
                        <span><i class="fa fa-arrow-left" aria-hidden="true"></i></span>
                      </a>
                      <a class="right carousel-control" href="#carousel-{{ i.pk }}" data-slide="next">
                        <span><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
                      </a>
                    </div>
                  {% else %}
                    <!-- Hanya 1 lampiran -->
                    <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 %}
                  <!-- Tidak ada lampiran -->
                  <img src="{% static 'upload/logo.png' %}" class="d-block w-100 p-1" alt="No Thumbnail">

                  <span class="float-right text-muted">
                    Tidak Ada Lampiran
                  </span>
                {% 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>

                  <!-- Marker untuk OCR -->
                  {% if i.attachments_list %}
                    {% with i.attachments_list.0.path as file_path %}
                      {% if file_path|lower|slice:"-4:" == ".pdf" %}
                        <span class="d-none file-url" data-type="pdf" data-url="{% static file_path %}"></span>
                      {% else %}
                        <span class="d-none file-url" data-type="img" data-url="{% static file_path %}"></span>
                      {% endif %}
                    {% endwith %}
                  {% endif %}
                </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">
      {% 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: 5%">5%</div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}