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

{% block layout_script %}
<meta name="csrf-token" content="{{ csrf_token }}">

<!-- Ektrak teks saja untuk preview -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>

<!-- jsPDF - IMGtoPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<!-- library docx - IMGtoDOCX -->
<!-- ✅ Load library docx UMD -->
<script src="https://cdn.jsdelivr.net/npm/docx@8.5.0/build/index.umd.js"></script>

<script>
(function() {
	new Vue({
		el: document.getElementById('item-attachments-list'),
		data: {
			list: {{ attachments|json }},
		},
		created() {
			let list = [];
			for (let i = 0; i < this.list.length; i++) {
				const item = this.list[i];
				item.href = `{% static '' %}${item.path}`;
				list.push(item);
			}
			// window.Previewer.init(list);
		},
		methods: {
			view(index) {
				window.Previewer.show();
				window.Previewer.goto(index);
			},
		},
	});
})();

$('.alert').fadeIn(300).delay(1500).fadeOut(400);

$('#upload_exec').find('[data-delete]').each(function () {
	$(this).prop('href', this.dataset.delete).on('click', function (event) {
		if (!confirm('Apakah Anda yakin ingin menghapus berkas ini beserta lampirannya?\nData yang sudah dihapus tidak dapat dikembalikan.')) {
			event.preventDefault();
		}
	});
});

function previewPDF(fileUrl) {
  const lowerUrl = fileUrl.toLowerCase();
  const isImage = lowerUrl.endsWith(".jpg") || lowerUrl.endsWith(".jpeg") || lowerUrl.endsWith(".png");
  const isDocx = lowerUrl.endsWith(".docx");

  const previewModal = document.createElement('div');
  previewModal.id = 'preview-modal';
  Object.assign(previewModal.style, {
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    backgroundColor: 'white',
    padding: '20px',
    boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
    zIndex: '9999',
    maxWidth: '80%',
    maxHeight: '80%',
    overflow: 'auto',
    borderRadius: '10px',
  });

  // Isi modal
  if (isImage) {
    // Jika file adalah gambar
    const img = document.createElement('img');
    img.src = fileUrl;
    img.style.maxWidth = "100%";
    img.style.maxHeight = "70vh";
    img.style.display = "block";
    img.style.margin = "0 auto 15px auto";
    previewModal.appendChild(img);

    // Tombol Download (Save As custom)
    const downloadBtn = document.createElement('a');
    downloadBtn.textContent = "⬇️ Download Gambar";
    Object.assign(downloadBtn.style, {
      display: "block",
      padding: "8px 12px",
      backgroundColor: "#2187DA",
      color: "white",
      fontSize: "12px",
      borderRadius: "5px",
      textDecoration: "none",
      margin: "10px auto",
      width: "fit-content",
      textAlign: "center",
      cursor: "pointer"
    });

    // Klik → prompt nama file → simpan dengan nama itu
    downloadBtn.onclick = async () => {
      const defaultName = fileUrl.split('/').pop();
      const newName = prompt("Simpan sebagai:", defaultName) || defaultName;

      // fetch file agar bisa disave ulang
      const response = await fetch(fileUrl);
      const blob = await response.blob();

      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = newName;
      a.click();
      URL.revokeObjectURL(a.href);
    };

    previewModal.appendChild(downloadBtn);

  } 
  else if (isDocx) {
  const icon = document.createElement('div');
  const fileName = fileUrl.split('/').pop();
  icon.textContent = `${fileName}`;
  Object.assign(icon.style, {
    fontSize: "14px",
    fontWeight: "bold",
    textAlign: "center",
    marginBottom: "15px"
  });
  previewModal.appendChild(icon);

  // 🔹 Pastikan ukuran modal tetap
  Object.assign(previewModal.style, {
    width: "600px",        // lebar tetap
    height: "500px",       // tinggi tetap
    maxWidth: "90vw",      // biar responsif di layar kecil
    maxHeight: "90vh",
    overflow: "hidden",    // biar tidak meluber keluar modal
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start"
  });

  // Area preview teks
  const previewArea = document.createElement('div');
  Object.assign(previewArea.style, {
    flex: "1",                // biar mengisi tinggi sisa modal
    overflowY: "auto",        // scroll kalau konten panjang
    padding: "15px",
    border: "1px solid #ccc",
    borderRadius: "5px",
    textAlign: "left",
    fontSize: "10px",         // ukuran teks default
    lineHeight: "1.8",
    backgroundColor: "#fafafa"
  });
  previewModal.appendChild(previewArea);

  // Ambil file DOCX dan convert ke HTML
  fetch(fileUrl)
    .then(res => res.arrayBuffer())
    .then(arrayBuffer => mammoth.convertToHtml({ arrayBuffer }))
    .then(result => {
      previewArea.innerHTML = result.value || "⚠️ Tidak ada teks yang bisa ditampilkan.";

      // Cari teks alamat (contoh: mengandung "RT 074 RW 024")
      const alamatNode = [...previewArea.querySelectorAll("p")]
        .find(p => p.innerText.includes("RT 074 RW 024"));

      if (alamatNode) {
        alamatNode.style.textAlign = "right"; // rata kanan
        alamatNode.style.fontSize = "10px";
        alamatNode.style.lineHeight = "1.2";
        alamatNode.style.margin = "0 0 10px 0";
      }

      // Atur heading, paragraf, list
      previewArea.querySelectorAll("h1, h2, h3").forEach(el => {
        el.style.fontSize = "11px";
        el.style.margin = "8px 0";
      });

      previewArea.querySelectorAll("p").forEach(el => {
        el.style.margin = "4px 0";
      });

      previewArea.querySelectorAll("ul, ol").forEach(el => {
        el.style.margin = "6px 0 6px 18px";
        el.style.fontSize = "11px";
      });

      // Atur gambar agar tidak terlalu besar
      previewArea.querySelectorAll("img").forEach(el => {
        el.style.maxWidth = "100%";
        el.style.height = "auto";
        el.style.display = "block";
        el.style.margin = "8px auto";
        el.style.maxHeight = "200px";
      });
    })
    .catch(err => {
      previewArea.textContent = "❌ Gagal memuat preview DOCX: " + err.message;
    });

  // Tombol Download tetap
  const downloadBtn = document.createElement('a');
  downloadBtn.textContent = "⬇️ Download Dokumen";
  Object.assign(downloadBtn.style, {
    display: "block",
    padding: "8px 12px",
    backgroundColor: "#2187DA",
    color: "white",
    fontSize: "12px",
    borderRadius: "5px",
    textDecoration: "none",
    margin: "10px auto",
    width: "fit-content",
    textAlign: "center",
    cursor: "pointer"
  });

  downloadBtn.onclick = async () => {
    // Gunakan langsung fileName dari atas
    const newName = fileName;  

    const response = await fetch(fileUrl);
    const blob = await response.blob();

    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = newName;  // 🔹 langsung pakai fileName
    a.click();
    URL.revokeObjectURL(a.href);
  };

  previewModal.appendChild(downloadBtn);
}
   else {
    // Jika file adalah PDF
    const iframe = document.createElement('iframe');
    iframe.src = fileUrl;
    iframe.width = '900px';
    iframe.height = '600px';
    iframe.style.border = 'none';
    previewModal.appendChild(iframe);
  }

  // Tombol close
  const closeButton = document.createElement('button');
  closeButton.textContent = 'X';
  closeButton.onclick = () => document.body.removeChild(previewModal);
  Object.assign(closeButton.style, {
    position: 'absolute',
    top: '10px',
    right: '10px',
    padding: '5px 10px',
    backgroundColor: 'red',
    color: 'white',
    border: 'none',
    cursor: 'pointer',
    borderRadius: '10px',
  });
  previewModal.appendChild(closeButton);

  document.body.appendChild(previewModal);
}



function shareAttachment(fileName, fileUrl) {
	const encodedText = encodeURIComponent(`${fileName}\n\nLink: ${window.location.origin}${fileUrl}`);
	const gmailUrl = `https://mail.google.com/mail/?view=cm&fs=1&su=${encodeURIComponent('Berbagi Lampiran: ' + fileName)}&body=${encodedText}&tf=1`;

	const modal = `
	<div id="share-modal" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
		background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 9999;">
		<span>Bagikan ke:</span><br>
		<a href="https://api.whatsapp.com/send?text=${encodedText}" target="_blank" class="btn btn-success my-2">
			<i class="fab fa-whatsapp"></i>
		</a>
		<a href="${gmailUrl}" target="_blank" class="btn btn-danger my-2">
			<i class="far fa-envelope"></i>
		</a>
		<a href="https://www.messenger.com/new?text=${encodedText}" target="_blank" class="btn btn-primary my-2">
			<i class="fab fa-facebook-messenger"></i>
		</a>
		<button onclick="document.getElementById('share-modal').remove()" class="btn btn-dark my-2">
			<i class="fas fa-times"></i>
		</button>
	</div>
	`;
	document.body.insertAdjacentHTML('beforeend', modal);
}

// 🔁 Konversi PDF ke DOCX - Tampilkan progress bar
function convertPdfToDocxFromStatic(pdfUrl, fileName) {
  const popup = document.getElementById('docx-progress-popup');
  const bar = document.querySelector('[data-docx-wait]');
  popup.style.display = 'block';
  bar.style.width = '0%';
  bar.textContent = '0%';

  let simulated = 10;
  const simulateProgress = setInterval(() => {
    if (simulated < 90) {
      bar.style.width = simulated + '%';
      bar.textContent = simulated + '%';
      simulated += 5;
    }
  }, 200);

  fetch(pdfUrl)
    .then(response => response.blob())
    .then(blob => {
      const formData = new FormData();
      formData.append('file', new File([blob], fileName, { type: 'application/pdf' }));

      const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

      return fetch("{% url 'convert_to_word' %}", {
        method: 'POST',
        headers: { 'X-CSRFToken': csrfToken },
        body: formData
      });
    })
    .then(response => {
      clearInterval(simulateProgress);
      bar.style.width = '100%';
      bar.textContent = '100%';
      setTimeout(() => popup.style.display = 'none', 500);

      if (!response.ok) throw new Error("Gagal mengkonversi PDF");
      return response.blob();
    })
    .then(blob => {
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = fileName.replace('.pdf', '.docx');
      a.click();
    })
    .catch(err => {
      clearInterval(simulateProgress);
      popup.style.display = 'none';
      alert("❌ Gagal: " + err.message);
    });
}


// 🔁 Konversi PDF ke JPG langsung upload file
function convertPdfToJpgFromStatic(pdfUrl, fileName) {
  const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  const popup = document.getElementById('jpg-progress-popup');
  const bar = document.querySelector('[data-convert-wait]');
  popup.style.display = 'block';
  bar.style.width = '0%';
  bar.textContent = '0%';

  let simulated = 10;
  const simulateProgress = setInterval(() => {
    if (simulated < 85) {
      bar.style.width = simulated + '%';
      bar.textContent = simulated + '%';
      simulated += 5;
    }
  }, 200);

  fetch(pdfUrl)
    .then(res => res.blob())
    .then(blob => {
      const formData = new FormData();
      formData.append("file", new File([blob], fileName, { type: "application/pdf" }));

      return fetch("{% url 'convert_to_images' %}", {
        method: "POST",
        headers: { "X-CSRFToken": csrfToken },
        body: formData
      });
    })
    .then(res => {
      bar.style.width = '90%';
      bar.textContent = '90%';
      if (!res.ok) throw new Error("Gagal merespons server.");
      return res.json();
    })
    .then(data => {
      clearInterval(simulateProgress);
      bar.style.width = '100%';
      bar.textContent = '100%';
      setTimeout(() => popup.style.display = 'none', 500);

      if (!data.images || !Array.isArray(data.images) || data.images.length === 0) {
        throw new Error('Tidak ada gambar yang dihasilkan.');
      }

      const viewer = document.createElement('div');
      viewer.id = 'jpg-popup-modal';
      Object.assign(viewer.style, {
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        backgroundColor: '#8C92A3',
        padding: '20px',
        boxShadow: '0 0 10px rgba(0,0,0,0.3)',
        zIndex: 9999,
        maxHeight: '80vh',
        maxWidth: '90vw',
        overflowY: 'auto',
        borderRadius: '10px'
      });

      // tombol close
      const closeBtn = document.createElement('button');
      closeBtn.textContent = '×';
      Object.assign(closeBtn.style, {
        position: 'absolute',
        top: '10px',
        right: '15px',
        fontSize: '20px',
        background: 'red',
        color: 'white',
        border: 'none',
        padding: '5px 10px',
        cursor: 'pointer',
        borderRadius: '5px'
      });
      closeBtn.onclick = () => viewer.remove();
      viewer.appendChild(closeBtn);

      // 🔽 tombol download ZIP
      const zipBtn = document.createElement('button');
      zipBtn.textContent = 'Unduh Gambar (ZIP)';
      Object.assign(zipBtn.style, {
        display: 'block',
        marginBottom: '15px',
        padding: '8px 12px',
        background: '#2784F5',
        color: 'white',
        border: 'none',
        cursor: 'pointer',
        borderRadius: '5px'
      });
      zipBtn.onclick = async () => {
        const zip = new JSZip();
        const folder = zip.folder("images");
        for (let i = 0; i < data.images.length; i++) {
          const url = data.images[i];
          const response = await fetch(url);
          const blob = await response.blob();
          folder.file(`page_${i+1}.jpg`, blob);
        }
        const content = await zip.generateAsync({ type: "blob" });
        const a = document.createElement('a');
        a.href = URL.createObjectURL(content);
        a.download = fileName.replace('.pdf', '.zip');
        a.click();
      };
      viewer.appendChild(zipBtn);

      // render semua image hasil konversi
      data.images.forEach(url => {
        const img = document.createElement('img');
        img.src = url;
        img.style.maxWidth = "100%";
        img.style.display = "block";
        img.style.marginBottom = "10px";
        viewer.appendChild(img);
      });

      document.body.appendChild(viewer);
    })
    .catch(err => {
      clearInterval(simulateProgress);
      popup.style.display = 'none';
      alert('❌ Gagal konversi JPG: ' + err.message);
    });
}

// Convert .docx (static url) -> PDF via server
function convertDocxToPdfFromStatic(docUrl, fileName) {
  const popup = document.getElementById('word2pdf-progress-popup');
  const bar = document.querySelector('[data-word2pdf-wait]');
  popup.style.display = 'block';
  bar.style.width = '0%';
  bar.textContent = '0%';

  let simulated = 10;
  const simulateProgress = setInterval(() => {
    if (simulated < 85) {
      bar.style.width = simulated + '%';
      bar.textContent = simulated + '%';
      simulated += 5;
    }
  }, 200);

  fetch(docUrl)
    .then(r => {
      if (!r.ok) throw new Error('Gagal mengambil file .docx dari server.');
      return r.blob();
    })
    .then(blob => {
      const formData = new FormData();
      formData.append('file', new File([blob], fileName, { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }));

      // ambil CSRF
      const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

      return fetch("{% url 'convert_word_to_pdf' %}", {
        method: 'POST',
        headers: { 'X-CSRFToken': csrfToken },
        body: formData
      });
    })
    .then(response => {
      clearInterval(simulateProgress);
      bar.style.width = '100%';
      bar.textContent = '100%';
      setTimeout(() => popup.style.display = 'none', 500);

      if (!response.ok) {
        return response.text().then(text => { throw new Error(text || 'Server error saat konversi'); });
      }
      return response.blob();
    })
    .then(blob => {
      // Unduh PDF
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = fileName.replace(/\.(docx|doc)$/i, '.pdf');
      a.click();
      URL.revokeObjectURL(a.href);
    })
    .catch(err => {
      clearInterval(simulateProgress);
      popup.style.display = 'none';
      alert('❌ Gagal konversi Word → PDF: ' + err.message);
    });
}

// 🔁 Konversi DOCX ke JPG langsung dari static url
function convertDocxToJpgFromStatic(docxUrl, fileName) {
  const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  const popup = document.getElementById('jpg-progress-popup');
  const bar = document.querySelector('[data-convert-wait]');
  popup.style.display = 'block';
  bar.style.width = '0%';
  bar.textContent = '0%';

  let simulated = 10;
  const simulateProgress = setInterval(() => {
    if (simulated < 85) {
      bar.style.width = simulated + '%';
      bar.textContent = simulated + '%';
      simulated += 5;
    }
  }, 200);

  // ambil absolute url file docx
  const absoluteUrl = new URL(docxUrl, window.location.origin).href;

  fetch("{% url 'convert_docx_url_to_jpg' %}", {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
    body: JSON.stringify({ url: absoluteUrl, name: fileName })
  })
  .then(res => {
    bar.style.width = '90%';
    bar.textContent = '90%';
    if (!res.ok) throw new Error("Gagal merespons server.");
    return res.json();
  })
  .then(data => {
    clearInterval(simulateProgress);
    bar.style.width = '100%';
    bar.textContent = '100%';
    setTimeout(() => popup.style.display = 'none', 500);

    if (!data.images || !Array.isArray(data.images) || data.images.length === 0) {
      throw new Error('Tidak ada gambar yang dihasilkan.');
    }

    // Modal preview
    const viewer = document.createElement('div');
    viewer.id = 'jpg-popup-modal';
    Object.assign(viewer.style, {
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      backgroundColor: '#8C92A3',
      padding: '20px',
      boxShadow: '0 0 10px rgba(0,0,0,0.3)',
      zIndex: 9999,
      maxHeight: '80vh',
      maxWidth: '90vw',
      overflowY: 'auto',
      borderRadius: '10px'
    });

    // close button
    const closeBtn = document.createElement('button');
    closeBtn.textContent = '×';
    Object.assign(closeBtn.style, {
      position: 'absolute',
      top: '10px',
      right: '15px',
      fontSize: '20px',
      background: 'red',
      color: 'white',
      border: 'none',
      padding: '5px 10px',
      cursor: 'pointer',
      borderRadius: '5px'
    });
    closeBtn.onclick = () => viewer.remove();
    viewer.appendChild(closeBtn);

    // 🔽 tombol download ZIP
    const zipBtn = document.createElement('button');
    zipBtn.textContent = 'Unduh Gambar (ZIP)';
    Object.assign(zipBtn.style, {
      display: 'block',
      marginBottom: '15px',
      padding: '8px 12px',
      background: '#2784F5',
      color: 'white',
      border: 'none',
      cursor: 'pointer',
      borderRadius: '5px'
    });
    zipBtn.onclick = async () => {
      const zip = new JSZip();
      const folder = zip.folder("images");
      for (let i = 0; i < data.images.length; i++) {
        const url = data.images[i];
        const response = await fetch(url);
        const blob = await response.blob();
        folder.file(`page_${i+1}.jpg`, blob);
      }
      const content = await zip.generateAsync({ type: "blob" });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(content);
      a.download = fileName.replace(/\.(docx|doc)$/i, '.zip');
      a.click();
    };
    viewer.appendChild(zipBtn);

    // render semua image
    data.images.forEach(url => {
      const img = document.createElement('img');
      img.src = url;
      img.style.maxWidth = "100%";
      img.style.display = "block";
      img.style.marginBottom = "10px";
      viewer.appendChild(img);
    });

    document.body.appendChild(viewer);
  })
  .catch(err => {
    clearInterval(simulateProgress);
    popup.style.display = 'none';
    alert('❌ Gagal konversi DOCX ke JPG: ' + err.message);
  });
}
</script>

<script>
  // 🔁 Konversi Image → PDF (langsung di browser)
  function convertImageToPdfFromStatic(imgUrl, fileName) {
    const popup = document.getElementById('img2pdf-progress-popup');
    const bar = document.querySelector('[data-img2pdf-wait]');
    popup.style.display = 'block';
    bar.style.width = '0%';
    bar.textContent = '0%';

    let simulated = 10;
    const simulateProgress = setInterval(() => {
      if (simulated < 90) {
        bar.style.width = simulated + '%';
        bar.textContent = simulated + '%';
        simulated += 5;
      }
    }, 200);

    const { jsPDF } = window.jspdf;
    const pdf = new jsPDF({ orientation: "portrait", unit: "pt", format: "a4" });
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();

    const img = new Image();
    img.crossOrigin = "anonymous";
    img.src = imgUrl;

    img.onload = function () {
      clearInterval(simulateProgress);
      bar.style.width = '100%';
      bar.textContent = '100%';
      setTimeout(() => popup.style.display = 'none', 500);

      const imgWidth = img.width;
      const imgHeight = img.height;

      // 🔑 Skala agar gambar fit ke halaman
      const ratio = Math.min(pageWidth / imgWidth, pageHeight / imgHeight);
      const newWidth = imgWidth * ratio;
      const newHeight = imgHeight * ratio;

      // Posisi gambar di tengah halaman
      const x = (pageWidth - newWidth) / 2;
      // const y = (pageHeight - newHeight) / 2;
      const y = 0;

      pdf.addImage(img, "JPEG", x, y, newWidth, newHeight);
      pdf.save(fileName.replace(/\.(jpg|jpeg|png)$/i, ".pdf"));
    };

    img.onerror = function () {
      clearInterval(simulateProgress);
      popup.style.display = 'none';
      alert("❌ Gagal memuat gambar.");
    };
  }

  // 🔁 Konversi Image → DOCX
  async function convertImageToDocxFromStatic(imgUrl, fileName) {
    const popup = document.getElementById('img2docx-progress-popup');
    const bar = document.querySelector('[data-img2docx-wait]');
    popup.style.display = 'block';
    bar.style.width = '0%';
    bar.textContent = '0%';

    let simulated = 10;
    const simulateProgress = setInterval(() => {
      if (simulated < 90) {
        bar.style.width = simulated + '%';
        bar.textContent = simulated + '%';
        simulated += 5;
      }
    }, 200);

    try {
      const response = await fetch(imgUrl);
      const blob = await response.blob();
      const arrayBuffer = await blob.arrayBuffer();

      // Ambil dimensi asli gambar
      const img = await createImageBitmap(blob);
      const originalWidth = img.width;
      const originalHeight = img.height;

      // A4 dalam pixel (96 DPI)
      const pageWidth = 794;   // 8.27 inch
      const pageHeight = 1123; // 11.69 inch

      // Skala proporsional agar muat dalam halaman
      const scale = Math.min(pageWidth / originalWidth, pageHeight / originalHeight);
      const targetWidth = originalWidth * scale;
      const targetHeight = originalHeight * scale;

      // Konversi px ke EMU
      const pxToEMU = px => px * 9525;

      clearInterval(simulateProgress);
      bar.style.width = '100%';
      bar.textContent = '100%';
      setTimeout(() => popup.style.display = 'none', 500);

      const { Document, Packer, Paragraph, ImageRun, AlignmentType } = window.docx;

      const doc = new Document({
        sections: [{
          properties: {
            page: {
              size: { width: pxToEMU(pageWidth), height: pxToEMU(pageHeight) }, // A4 Portrait
              margin: { top: 0, bottom: 0, left: 0, right: 0 },
            },
          },
          children: [
            new Paragraph({
              alignment: AlignmentType.CENTER, // ✅ Gambar di tengah horizontal
              children: [
                new ImageRun({
                  data: arrayBuffer,
                  transformation: {
                    width: targetWidth,
                    height: targetHeight,
                  },
                }),
              ],
            }),
          ],
        }],
      });

      const docBlob = await Packer.toBlob(doc);
      const a = document.createElement("a");
      a.href = URL.createObjectURL(docBlob);
      a.download = fileName.replace(/\.(jpg|jpeg|png)$/i, ".docx");
      a.click();

    } catch (err) {
      clearInterval(simulateProgress);
      popup.style.display = 'none';
      alert("❌ " + err.message);
    }
  }
  
</script>

{% endblock %}


{% block layout_content %}
  <!-- Progress Bar Convert WORD -> PDF -->
  <div id="word2pdf-progress-popup" style="display: none; position: fixed; z-index: 9999; top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); width: 400px; text-align: center;">
    <h5 class="mb-3">Sedang mengkonversi Word ke PDF...</h5>
    <div class="progress" style="height: 25px;">
      <div class="progress-bar progress-bar-striped progress-bar-animated"
          role="progressbar" style="width: 0%; background-color: #1D326E;" data-word2pdf-wait>
        0%
      </div>
    </div>
  </div>
  <!-- Progress Bar Convert to WORD -->
  <div id="docx-progress-popup" style="display: none; position: fixed; z-index: 9999; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); width: 400px; text-align: center;">
    <h5 class="mb-3">Sedang mengkonversi PDF ke Word...</h5>
    <div class="progress" style="height: 25px;">
      <div class="progress-bar progress-bar-striped progress-bar-animated" 
        role="progressbar" style="width: 0%; background-color: #1D326E;" data-docx-wait>
        0%
      </div>
    </div>
  </div>
  <!-- Progress Bar Convert to Image -->
  <div id="jpg-progress-popup" style="display: none; position: fixed; z-index: 9999; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); width: 400px; text-align: center;">
    <h5 class="mb-3">Sedang mengkonversi Dokumen (PDF/DOCX) ke Gambar...</h5>
    <div class="progress" style="height: 25px;">
      <div class="progress-bar progress-bar-striped progress-bar-animated" 
        role="progressbar" style="width: 0%; background-color: #24612C;" data-convert-wait>
        0%
      </div>
    </div>
  </div>
  <!-- Progress Bar Convert Image → PDF -->
  <div id="img2pdf-progress-popup" style="display: none; position: fixed; z-index: 9999; 
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); 
      width: 400px; text-align: center;">
    <h5 class="mb-3">Sedang mengkonversi Gambar ke PDF...</h5>
    <div class="progress" style="height: 25px;">
      <div class="progress-bar progress-bar-striped progress-bar-animated" 
          role="progressbar" style="width: 0%; background-color: #b30000;" data-img2pdf-wait>
        0%
      </div>
    </div>
  </div>
  <!-- Progress Bar Convert Image → DOCX -->
  <div id="img2docx-progress-popup" style="display: none; position: fixed; z-index: 9999; 
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); 
      width: 400px; text-align: center;">
    <h5 class="mb-3">Sedang mengkonversi Gambar ke Word...</h5>
    <div class="progress" style="height: 25px;">
      <div class="progress-bar progress-bar-striped progress-bar-animated" 
          role="progressbar" style="width: 0%; background-color: #004080;" data-img2docx-wait>
        0%
      </div>
    </div>
  </div>

  <div class="card my-3">
    <div class="card-body">
      <table class="table table-hover table-borderless">
        <tbody>
          <tr><th>SKPD</th><td>:</td><td>{{ skpd.urai|default:"(kosong)" }}</td></tr>
          <tr><th>Tahun</th><td>:</td><td>{{ item.tahun.tahun }}</td></tr>
          <tr><th>Judul</th><td>:</td><td>{{ item.judul }}</td></tr>
          <tr><th>Deskripsi</th><td>:</td><td>{{ item.deskripsi|linebreaksbr }}</td></tr>

          {% for i,attr in attributes.items %}
            {% if attr.name and attr.type %}
            <tr data-pk="{{i}}">
              <th>{{ attr.name }}</th><td>:</td>
              <td>
                {% for k,v in item.attributes.items %}
                  {% if k == i %}
                    {% if attr.type == 'date' %}
                      {{ v|stringDateYMD }}
                    {% elif attr.type == 'text_max' %}
                      {{ v.strip|linebreaksbr }}
                    {% else %}
                      {{ v }}
                    {% endif %}
                  {% endif %}
                {% endfor %}
              </td>
            </tr>
            {% endif %}
          {% endfor %}

          {% for attachment in attachments %}
          <tr>
            <th>Lampiran</th><td>:</td>
            <td>
              <span class="text-muted"><b>{{ forloop.counter }}.</b></span>

              <span onclick="previewPDF('{% static attachment.path %}')" 
                style="cursor: pointer; color: rgb(33, 135, 218);">
                <b>{{ attachment.name }} :</b>
              </span>

              <!-- Convert PDF ke Word -->
              {% if attachment.name|endswith_any:".pdf" %}
              <button onclick="convertPdfToDocxFromStatic('{% static attachment.path %}', '{{ attachment.name }}')" 
                  class="btn btn-sm ml-1"  
                  title="Convert to WORD" 
                  style="background-color: rgb(21, 77, 126); color: white;">
                <i class="fa fa-file-word"></i>
              </button>
              {% endif %}

              <!-- Convert PDF ke JPG -->
              {% if attachment.name|endswith_any:".pdf" %}
              <button onclick="convertPdfToJpgFromStatic('{% static attachment.path %}', '{{ attachment.name }}')" 
                  class="btn btn-sm ml-1" 
                  style="background-color: #24612C; color: aliceblue;" 
                  title="Convert to JPG">
                <i class="fa fa-file-image"></i>
              </button>
              {% endif %}

              <!-- Convert Word → PDF -->
              {% if attachment.name|endswith_any:".docx" %}
              <button onclick="convertDocxToPdfFromStatic('{% static attachment.path %}', '{{ attachment.name }}')" 
                  class="btn btn-sm ml-1" 
                  style="background-color:#e01d1d; color:white;" 
                  title="Convert Word ke PDF">
                <i class="fa fa-file-pdf"></i>
              </button>
              <!-- Convert DOCX to JPG -->
              <button onclick="convertDocxToJpgFromStatic('{% static attachment.path %}', '{{ attachment.name }}')" 
                  class="btn btn-sm ml-1" 
                  style="background-color: #0d6323; color: aliceblue;" 
                  title="Convert DOCX to JPG">
                <i class="fa fa-file-image"></i>
              </button>
              {% endif %}

              <!-- Convert Image → PDF -->
              {% if attachment.name|endswith_any:".jpg,.jpeg,.png" %}
              <button onclick="convertImageToPdfFromStatic('{% static attachment.path %}', '{{ attachment.name }}')" 
                      class="btn btn-sm ml-1" 
                      style="background-color:#b30000; color:white;" 
                      title="Convert Image to PDF">
                <i class="fa fa-file-pdf"></i>
              </button>

              <!-- Convert Image → DOCX -->
              <button onclick="convertImageToDocxFromStatic('{% static attachment.path %}', '{{ attachment.name }}')" 
                      class="btn btn-sm ml-1" 
                      style="background-color:#004080; color:white;" 
                      title="Convert Image to DOCX">
                <i class="fa fa-file-word"></i>
              </button>
              {% endif %}

              <!-- Tombol Preview (selalu ada) -->
              <button onclick="previewPDF('{% static attachment.path %}')" 
                  class="btn btn-sm ml-1" 
                  title="Preview & Download" 
                  style="background-color: rgb(33, 135, 218); color: white;">
                <i class="fa fa-download"></i>
              </button>

              {% if status_konten == 'public' %}
              <!-- Tombol Share -->
              <button onclick="shareAttachment('{{ attachment.name }}', '{% static attachment.path %}')" 
                  class="btn btn-sm btn-warning ml-1" 
                  title="Bagikan">
                <i class="fas fa-share"></i>
              </button>
              {% endif %}
            </td>
          </tr>
          {% endfor %}

          <tr><th>Waktu Pembuatan</th><td>:</td><td>{{ item.created }}</td></tr>
          <tr>
            <th>Tags</th><td>:</td>
            <td>
              {% for tag in item.contenttag_set.all %}
                <a href="{% url 'tag_detail' tag.tag.name %}" class="badge badge-warning">{{ tag.tag.name }}</a>
              {% empty %}
                <span class="text-muted">(tidak ada tag)</span>
              {% endfor %}
            </td>
          </tr>
        </tbody>
      </table>

      <div class="text-right">
        <h5><strong>Dibuat Oleh: {{ user_yg_input }}</strong></h5>
      </div>

      <div>
        <a href="{% if request.META.HTTP_REFERER %}{{ request.META.HTTP_REFERER }}{% else %}javascript:window.history.back();{% endif %}" 
          class="btn btn-sm btn-secondary">
          <i class="fa fa-arrow-left"></i> Kembali
        </a>
        <a href="{% url 'content_list' %}" class="btn btn-sm btn-secondary shadow">
          <i class="fas fa-list"></i> List Berkas
        </a>
        {% if allow == 'yes' %}
          <a href="{% url 'content_update' pk=item.pk %}" class="btn btn-sm btn-success"><i class="fas fa-edit"></i> Edit</a>
          <button class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmDeleteModal">
            <i class="fa fa-trash"></i> Hapus
          </button>
        {% endif %}
        <a href="{% url 'content_history' pk=item.pk %}" class="btn btn-sm btn-primary">
          <i class="fa fa-history"></i> Riwayat
        </a>
      </div>
    </div>
  </div>

  <!-- Modal Hapus -->
  <div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content border-0 shadow">
      <div class="modal-header bg-danger text-white">
      <h5 class="modal-title" id="confirmDeleteLabel"><i class="fas fa-trash"></i> Konfirmasi Hapus</h5>
      <button type="button" class="close text-white" data-dismiss="modal" aria-label="X">
        <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
      Apakah Anda yakin ingin menghapus dokumen ini? Tindakan ini tidak dapat dibatalkan.
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
      <a href="{% url 'content_delete' pk=item.pk %}" class="btn btn-danger">Ya, Hapus</a>
      </div>
    </div>
    </div>
  </div>
{% endblock %}