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

{% block layout_script %}

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

<!-- Vue.js untuk Preview Attachment -->
<script>
(() => {
  new Vue({
    el: '#item-attachments-list',
    data: {
      list: {{ attachments|json }},
    },
    created() {
      const updatedList = this.list.map(item => ({
        ...item,
        href: `{% static '' %}${item.path}`,
      }));
      window.Previewer.init(updatedList);
    },
    methods: {
      view(index) {
        window.Previewer.show();
        window.Previewer.goto(index);
      },
    },
  });
})();

// Alert muncul dan hilang otomatis
$('.alert').fadeIn(300).delay(1500).fadeOut(400);

// Tombol hapus dengan konfirmasi
$('#upload_exec').find('[data-delete]').each(function() {
  $(this).prop('href', this.dataset.delete).on('click', event => {
    const confirmMsg = `Anda yakin ingin menghapus berkas ini beserta lampirannya?\nData yang sudah dihapus tidak bisa dikembalikan.`;
    if (!window.confirm(confirmMsg)) event.preventDefault();
  });
});

// Fungsi Preview PDF
function previewPDF(pdfUrl) {
  const iframe = document.createElement('iframe');
  iframe.src = pdfUrl;
  iframe.width = '900px';
  iframe.height = '600px';
  iframe.style.border = 'none';

  const previewModal = document.createElement('div');
  previewModal.id = 'pdf-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',
  });

  previewModal.appendChild(iframe);

  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',
    borderRadius: '10px',
    cursor: 'pointer',
  });

  previewModal.appendChild(closeButton);
  document.body.appendChild(previewModal);
}

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

  const shareOptions = `
    <div id="share-modal" style="
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.3);
      border-radius: 10px; 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" style="font-size: 11px;"></i>
      </a>
      <a href="${gmailUrl}" target="_blank" class="btn btn-danger my-2">
        <i class="far fa-envelope" style="font-size: 11px;"></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" style="font-size: 11px;"></i>
      </a>
      <button onclick="document.getElementById('share-modal').remove()" class="btn btn-dark my-2">
        <i class="fas fa-times" style="font-size: 11px;"></i>
      </button>
    </div>
  `;
  document.body.insertAdjacentHTML('beforeend', shareOptions);
}
</script>

<!-- Loading Spinner -->
<style>
#upload-spinner {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex; justify-content: center; align-items: center;
}

.loader {
  width: 60px; height: 60px;
  border: 8px solid #e0e0e0;
  border-top: 8px solid #28a745;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Modal Upload Result */
#upload-result-modal {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: #fefefe;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  z-index: 10000;
  padding: 30px 25px;
  width: 92%; max-width: 420px;
  text-align: center;
  display: none;
  transition: all 0.3s ease-in-out;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#upload-result-modal h5 {
  font-weight: bold;
  margin-bottom: 15px;
  color: #28a745;
}

#upload-result-modal p {
  margin-bottom: 20px;
  color: #444;
  font-size: 14px;
}

#upload-result-modal .btn {
  margin: 5px 10px;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
}

#upload-result-modal h5.text-danger i { color: #dc3545; }
#upload-result-modal h5.text-success i { color: #28a745; }
</style>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
// Data Bulanan
const berkasmasuk_monthly = (() => {
  const list = Array(12).fill(0);
  {{ berkasmasuk_monthly|json }}.forEach(data => {
    list[data.tanggal__month - 1] += data.banyak;
  });
  return list;
})();

const suratmasuk_monthly = (() => {
  const list = Array(12).fill(0);
  {{ suratmasuk_monthly|json }}.forEach(data => {
    list[data.tanggal__month - 1] += data.banyak;
  });
  return list;
})();

const suratkeluar_monthly = (() => {
  const list = Array(12).fill(0);
  {{ suratkeluar_monthly|json }}.forEach(data => {
    list[data.tanggal__month - 1] += data.banyak;
  });
  return list;
})();

const disposisi_monthly = (() => {
  const list = Array(12).fill(0);
  {{ disposisi_monthly|json }}.forEach(data => {
    list[data.tanggal__month - 1] += data.banyak;
  });
  return list;
})();

const attachmentsMonthly = {{ attachments_monthly|safe }};
const attachments_monthly = (() => {
  const list = Array(12).fill(0);
  attachmentsMonthly.forEach(item => {
    list[item.bulan - 1] += item.total;  // ✅ pakai += agar akumulatif
  });
  return list;
})();
// const attachments_monthly = (() => {
//   const list = Array(12).fill(0);
//   attachmentsMonthly.forEach(item => {
//     list[item.bulan - 1] = item.total;
//   });
//   return list;
// })();

const labels = [
  'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
  'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
];

// Utility: Generate Colors & Pie Chart
function generateColors(length) {
  return [
    '#FF6384', '#36A2EB', '#FFCE56', '#66BB6A', '#BA68C8', '#FFA726',
    '#8D6E63', '#26C6DA', '#D4E157', '#EC407A', '#5C6BC0', '#FF7043'
  ].slice(0, length);
}

function createPieChart(id, label, data) {
  new Chart(document.getElementById(id).getContext('2d'), {
    type: 'pie',
    data: {
      labels: labels,
      datasets: [{
        label: label,
        data: data,
        backgroundColor: generateColors(12),
        borderWidth: 1,
      }]
    },
    options: {
      responsive: true,
      legend: { position: 'right' },
    },
  });
}

// Counter Effect
function countUp(elementId, target) {
  let current = 0;
  const increment = Math.ceil(target / 50);
  const el = document.getElementById(elementId);

  const counter = setInterval(() => {
    current += increment;
    if (current >= target) {
      current = target;
      clearInterval(counter);
    }
    el.textContent = current;
  }, 20);
}

// Init Chart & Counter
window.onload = () => {
  createPieChart('chartBerkas', 'Total Surat', berkasmasuk_monthly);
  createPieChart('chartSuratMasuk', 'Surat Masuk', suratmasuk_monthly);
  createPieChart('chartSuratKeluar', 'Surat Keluar', suratkeluar_monthly);
  createPieChart('chartDisposisi', 'Total Disposisi', disposisi_monthly);
  createPieChart('attachmentsPieChart', 'Total Berkas Attachment', attachments_monthly);

  const totalAttachments = attachments_monthly.reduce((a, b) => a + b, 0);
  countUp('totalAttachments', totalAttachments);
};
</script>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		function fetchAttachmentData() {
			const tahun = {{ tahun_active }};  // ambil tahun dari context

			fetch(`/api/attachments-monthly/?tahun=${tahun}`)
				.then(res => res.json())
				.then(result => {
					const data = result.data;

					// Mapping bulan (1–12) ke index chart
					const bulan = Array.from({ length: 12 }, (_, i) => i + 1);
					const counts = bulan.map(b => {
					return data
						.filter(item => item.bulan === b)
						.reduce((sum, item) => sum + item.total, 0);
					});
					// const counts = bulan.map(b => {
					// 	const found = data.find(item => item.bulan === b);
					// 	return found ? found.total : 0;
					// });

					// Ganti bagian ini sesuai id/chart.js kamu
					if (window.attachmentsChart) {
						window.attachmentsChart.data.datasets[0].data = counts;
						window.attachmentsChart.update();
					} else {
						console.warn('attachmentsChart not defined!');
					}
				});
		}

		// Misal dipanggil setelah file berhasil diupload
		window.updateAttachmentsChart = fetchAttachmentData;

		// Opsional: langsung panggil saat halaman load
		fetchAttachmentData();
	});
</script>



<!-- Layout & Komponen Chart -->
<style>
html, body {
  margin: 0; padding: 0;
  width: 100%; overflow-x: hidden;
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

.chart-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: 30px;
  padding: 0 20px;
}

.chart-box {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  text-align: center;
}

.chart-box canvas {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.custom-button {
  min-width: 100px;
  text-align: center;
  padding: 0.25rem 0.75rem;
  border-radius: 5rem;
  font-size: 0.875rem;
  border: none;
  cursor: default;
}

.btn-primary-badge { background-color: #0a6f97; color: white; }
.btn-success-badge { background-color: #28a745; color: white; }
.btn-warning-badge { background-color: #a7a528; color: white; }
.btn-dark-badge { background-color: #7335a7; color: white; }
</style>

{% endblock %}


{% block layout_content %}
<span class="font-weight-bold text-uppercase text-accent mr-2">Filter</span>
<div class="btn-group" role="group">
	{% for i in tahun %}
		{% if i.tahun == tahun_active %}
			<a href="#" class="btn btn-webapp">{{ i.tahun }}</a>
		{% else %}
			<a href="?ta={{ i.tahun }}" class="btn btn-outline-webapp">{{ i.tahun }}</a>
		{% endif %}
	{% endfor %}
</div>


<div class="chart-container">
	<div class="chart-box mb-2">
		<h4>Berkas Attachment</h4>
		<canvas id="attachmentsPieChart"></canvas>
		<h5>Ukuran: 
			<span>{{ ukuran_total_attachments|filesizeformat }}</span>
		</h5>
		<h5>Jumlah Berkas: <span>{{ total_attachments }} Dokumen</span></h5>
	</div>
	<div class="chart-box mb-2">
		<h4>Berkas Surat</h4>
		<canvas id="chartBerkas"></canvas>&nbsp;
		<h5>Ukuran: 
			<span title="ukuran_berkas">{{ ukuran_berkas|filesizeformat }}</span>
		</h5>
		<h5>Jumlah Surat: <span>{{ total_berkas_surat }} Dokumen</span></h5>
	</div>
	<div class="chart-box mb-2">
		<h4>Surat Masuk</h4>
		<canvas id="chartSuratMasuk"></canvas>&nbsp;
		<h5>Ukuran: 
			<span title="ukuran_surat_masuk">{{ ukuran_surat_masuk|filesizeformat }}</span>
    		<h5>Jumlah: <span>{{ total_surat_masuk }} Dokumen</span></h5>
		</h5>
	</div>
	<div class="chart-box mb-2">
		<h4>Surat Keluar</h4>
		<canvas id="chartSuratKeluar"></canvas>&nbsp;
		<h5>Ukuran: 
			<span title="ukuran_surat_keluar">{{ ukuran_surat_keluar|filesizeformat }}</span>
    		<h5>Jumlah: <span>{{ total_surat_keluar }} Dokumen</span></h5>
		</h5>
	</div>
	<div class="chart-box mb-2">
		<h4>Berkas Disposisi</h4>
		<canvas id="chartDisposisi"></canvas>&nbsp;
		<h5>Ukuran: 
			<span title="ukuran_disposisi">{{ ukuran_disposisi|filesizeformat }}</span>
		</h5>
		<h5>Jumlah Disposisi: <span>{{ total_disposisi }} Dokumen</span></h5>
	</div>
</div>

<div class="card-body mt-4" style="box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); border-radius: 16px;">
	<div class="row">

		<div class="col-md-12 mb-4">
			<div class="d-flex justify-content-between align-items-center mb-3">
				<h5 class="card-title mb-0">
					<i class="fas fa-chart-bar text-info"></i> <b>Statistik Aktivitas Pengguna</b>
				</h5>
				<a href="{% url 'log_activity' %}" class="btn btn-sm btn-dark">
					<i class="fas fa-list"></i> Lihat Semua Aktivitas
				</a>
			</div>
			<ul class="list-group">
				<li class="list-group-item d-flex justify-content-between align-items-center">
					Total Aktivitas Tercatat
					<button class="custom-button btn-primary-badge">{{ total_log }}</button>
				</li>
				<li class="list-group-item d-flex justify-content-between align-items-center">
					Pengguna Teraktif
					<button class="custom-button btn-success-badge" style="text-transform: uppercase;">
						{{ user_teraktif.user__usr }} ({{ user_teraktif.total }})
					</button>
				</li>
				<li class="list-group-item d-flex justify-content-between align-items-center">
					Aksi Terbanyak
					<button class="custom-button btn-warning-badge" style="text-transform: uppercase;">
						{{ aksi_terbanyak.action|upper }} ({{ aksi_terbanyak.total }})
					</button>
				</li>
				<li class="list-group-item d-flex justify-content-between align-items-center">
					Hari Paling Aktif
					<span class="custom-button btn-dark-badge" style="text-transform: uppercase;">
						{% if hari_terbanyak.tanggal %}
							{{ hari_terbanyak.tanggal|date:"d M Y" }} ({{ hari_terbanyak.total }})
						{% else %}
							-
						{% endif %}
					</span>
				</li>
			</ul>
		</div>



<link rel="stylesheet" href="https://unpkg.com/vis-network/styles/vis-network.css"/>
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>



<link rel="stylesheet" 
 href="https://unpkg.com/vis-network/styles/vis-network.css"
/>
	</div>
</div>

<div class="card-body p-4 mt-4" 
     style="box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); border-radius: 16px;">

    <label class="font-weight-bold">Pilih SKPD</label>
    <select id="graphSkpdSelect" class="form-control mb-3">
        <option value="">-- Pilih SKPD --</option>
        {% for s in skpds %}
        <option value="{{ s.pk }}">{{ s.urai }}</option>
        {% endfor %}
    </select>

    <div id="graph-container"
         style="width: 100%; height: 700px; border:1px solid #ddd; border-radius:12px;"></div>
</div>





<!-- Upload Result Modal -->
<div id="upload-result-modal">
	<h5 id="upload-status-text" class="text-success">
		<i class="fas fa-check-circle"></i> Upload Berhasil
	</h5>
	<p id="upload-file-name">Nama file: -</p>
	<div class="d-flex justify-content-center" id="upload-result-actions">
		<button class="btn btn-sm btn-secondary" onclick="document.getElementById('upload-result-modal').style.display='none'">
			<i class="fa fa-times" aria-hidden="true"></i> Tutup
		</button>
		<a href="#" target="_blank" id="open-drive-btn" class="btn btn-sm btn-success">
			<i class="fab fa-google-drive"></i> Buka di GDrive
		</a>
	</div>
</div>

<script>
let network;
let nodes = new vis.DataSet([]);
let edges = new vis.DataSet([]);

// toggle state
let openedCategories = {}; 
let openedMain = { kontrak: false, sp2d: false };

document.getElementById("graphSkpdSelect").addEventListener("change", async function () {
    const pk = this.value;
    if (!pk) return;

    const res = await fetch(`/graph/skpd/${pk}/`);
    const data = await res.json();

    renderBaseGraph(data);
});

/* ===========================
   BASE GRAPH (2 NODE UTAMA)
   =========================== */
function renderBaseGraph(data) {
    nodes.clear();
    edges.clear();

    openedCategories = {};
    openedMain = { kontrak: false, sp2d: false };

    // KONTRAK
    nodes.add({
        id: "kontrak",
        label: "KONTRAK",
        shape: "box",
        x: -200,
        y: 0,
        color: { background: "#0D47A1", border: "#062863" },
        font: { color: "#fff", size: 18 }
    });

    // SP2D
    nodes.add({
        id: "sp2d",
        label: "SP2D",
        shape: "box",
        x: 200,
        y: 0,
        color: { background: "#0D47A1", border: "#062863" },
        font: { color: "#fff", size: 18 }
    });

    edges.add({
        from: "kontrak",
        to: "sp2d",
        arrows: "to",
        color: "#888"
    });

    window.graphData = data;

    network = new vis.Network(
        document.getElementById("graph-container"),
        { nodes, edges },
        { physics: false, interaction: { dragView: true, zoomView: true } }
    );

    network.on("click", handleClick);
}

/* ===========================
   HANDLE CLICK
   =========================== */
function handleClick(params) {
    const clicked = params.nodes[0];
    if (!clicked) return;

    // toggle main KONTRAK
    if (clicked === "kontrak") {
        if (openedMain.kontrak) {
            hideKontrakChildren();
            openedMain.kontrak = false;
        } else {
            expandKontrak();
            openedMain.kontrak = true;
        }
    }

    // toggle SP2D files
    if (clicked === "sp2d") {
        toggleCategoryFiles("sp2d");
    }

    // toggle kategori anak
    if (clicked.startsWith("cat-")) {
        const catId = clicked.replace("cat-", "");
        toggleCategoryFiles(catId);
    }

    // buka file
    if (clicked.startsWith("file-")) {
        const fileId = clicked.replace("file-", "");
        window.open(`/berkas/item/${fileId}`, "_blank");
    }
}

/* =====================================
   EXPAND KATEGORI ANAK KONTRAK
   ===================================== */
function expandKontrak() {
    const data = window.graphData;

    const baseX = -250;     // lebih kiri agar ruang file lebih longgar
    let yPos = -200;
    const spacingY = 120;   // konsisten & tidak terlalu berdekatan

    data.forEach(cat => {
        if (cat.name === "SP2D") return;
        if (cat.children.length === 0) return;

        const id = "cat-" + cat.id;
        if (!nodes.get(id)) {

            nodes.add({
                id,
                label: cat.name,
                shape: "box",
                x: baseX,
                y: yPos,
                color: {
                    background: "#E8F5E9",
                    border: "#66BB6A"
                },
                font: { color: "#1B5E20", size: 14, bold: true },
                margin: 10
            });

            edges.add({
                from: id,
                to: "kontrak",
                arrows: "to",
                color: {
                    color: "#66BB6A",
                    highlight: "#2E7D32"
                },
                smooth: { type: "cubicBezier" }
            });
        }

        yPos += spacingY;
    });
}

/* =====================================
   HIDE ALL KONTRAK CHILDREN
   ===================================== */
function hideKontrakChildren() {
    const data = window.graphData;

    data.forEach(cat => {
        if (cat.name === "SP2D") return;

        const catNodeId = "cat-" + cat.id;

        // hapus node kategori
        if (nodes.get(catNodeId)) {
            nodes.remove(catNodeId);
        }

        // hapus file-file kategori tersebut
        cat.children.forEach(f => {
            const fileNode = "file-" + f.id;
            if (nodes.get(fileNode)) nodes.remove(fileNode);
        });

        openedCategories[cat.id] = false;
    });
}

/* =====================================
   TOGGLE FILES
   ===================================== */
function toggleCategoryFiles(catId) {
    if (openedCategories[catId]) {
        hideFiles(catId);
        openedCategories[catId] = false;
        return;
    }

    showFiles(catId);
    openedCategories[catId] = true;
}

/* =====================================
   SHOW FILES
   ===================================== */
function showFiles(catId) {
    let cat;

    if (catId === "sp2d") {
        cat = window.graphData.find(c => c.name === "SP2D");
    } else {
        cat = window.graphData.find(c => c.id == catId);
    }

    if (!cat) return;

    const files = cat.children;

    // Grid Layout
    const spacingX = 200;
    const spacingY = 85;
    const itemsPerColumn = 12;

    // Lokasi dasar file
    const baseX = catId === "sp2d" ? 350 : 100;
    const baseY = -300;

    files.forEach((f, index) => {
        const fileNode = "file-" + f.id;
        if (nodes.get(fileNode)) return;

        const col = Math.floor(index / itemsPerColumn);
        const row = index % itemsPerColumn;

        nodes.add({
            id: fileNode,
            label: f.title,
            shape: "box",
            x: baseX + (col * spacingX),
            y: baseY + (row * spacingY),
            color: {
                background: "#FFF8E1",
                border: "#F9A825"
            },
            font: { size: 11 },
            margin: 8,
            widthConstraint: { maximum: 150 }
        });

        edges.add({
            from: fileNode,
            to: catId === "sp2d" ? "sp2d" : ("cat-" + catId),
            arrows: "to",
            color: {
                color: "#F9A825",
                highlight: "#F57F17"
            },
            smooth: { type: "cubicBezier" }
        });
    });
}

/* =====================================
   HIDE FILES
   ===================================== */
function hideFiles(catId) {
    let cat;

    if (catId === "sp2d") {
        cat = window.graphData.find(c => c.name === "SP2D");
    } else {
        cat = window.graphData.find(c => c.id == catId);
    }

    if (!cat) return;

    cat.children.forEach(f => {
        const fileNode = "file-" + f.id;
        if (nodes.get(fileNode)) nodes.remove(fileNode);
    });
}
</script>



<!-- Upload & Convert PDF ke Word -->
<script>
function uploadAndConvert() {
	const fileInput = document.getElementById('pdfFile');
	const file = fileInput.files[0];
	if (!file) {
		alert("Pilih file PDF terlebih dahulu.");
		return;
	}

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

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

	fetch("{% url 'convert_to_word' %}", {
		method: 'POST',
		headers: {
			'X-CSRFToken': csrfToken
		},
		body: formData
	})
	.then(response => {
		if (!response.ok) throw new Error("Konversi gagal");
		return response.blob();
	})
	.then(blob => {
		const url = window.URL.createObjectURL(blob);
		const a = document.createElement('a');
		a.href = url;
		a.download = file.name.replace('.pdf', '.docx');
		document.body.appendChild(a);
		a.click();
		a.remove();
	});
}
</script>

<!-- Upload & Convert PDF ke Images -->
<script>
function uploadAndConvertToImages() {
	const fileInput = document.getElementById('pdfToImageFile');
	const file = fileInput.files[0];
	if (!file) {
		alert("Pilih file PDF terlebih dahulu.");
		return;
	}

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

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

	fetch("{% url 'convert_to_images' %}", {
		method: 'POST',
		headers: {
			'X-CSRFToken': csrfToken
		},
		body: formData
	})
	.then(response => response.json())
	.then(data => {
		const imagesContainer = document.getElementById('converted-images');
		imagesContainer.innerHTML = ''; // NOTE: Kosongkan container dulu

		data.images.forEach((img_url, idx) => {
			const colDiv = document.createElement('div');
			colDiv.classList.add('col-md-4', 'mb-4');

			const card = document.createElement('div');
			card.classList.add('card', 'text-center', 'shadow-sm');

			const img = document.createElement('img');
			img.src = img_url;
			img.alt = `Halaman ${idx + 1}`;
			img.classList.add('card-img-top');
			img.style.maxHeight = '250px';
			img.style.objectFit = 'contain';

			const cardBody = document.createElement('div');
			cardBody.classList.add('card-body');

			const downloadLink = document.createElement('a');
			downloadLink.href = img_url;
			downloadLink.download = `halaman_${idx + 1}.png`;
			downloadLink.textContent = 'Unduh';
			downloadLink.classList.add('btn', 'btn-primary');

			cardBody.appendChild(downloadLink);
			card.appendChild(img);
			card.appendChild(cardBody);
			colDiv.appendChild(card);
			imagesContainer.appendChild(colDiv);
		});

		document.getElementById('image-results').style.display = 'table-row';
	})
	.catch(error => {
		alert("Konversi gagal: " + error.message);
	});
}
</script>

<!-- ALERT: hanya 1 versi, auto replace -->
<script>
// NOTE: Gunakan hanya satu versi showAlert agar tidak konflik
function showAlert(message, type = 'success') {
	const alertContainer = document.getElementById('alert-container');
	const alertBox = document.createElement('div');
	alertBox.className = `alert alert-${type} alert-dismissible fade show`;
	alertBox.role = 'alert';
	alertBox.innerHTML = `
		${message}
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	`;

	alertContainer.innerHTML = ''; // NOTE: Kosongkan alert sebelumnya
	alertContainer.appendChild(alertBox);

	setTimeout(() => {
		alertBox.classList.remove('show');
		alertBox.classList.add('fade');
		alertBox.remove();
	}, 5000); // NOTE: Auto dismiss 5 detik
}
</script>

<!-- Upload ke Google Drive -->
<script>
function uploadToDriveServer() {
	const fileInput = document.getElementById('fileToUploadDrive');
	const file = fileInput.files[0];
	if (!file) {
		alert("❌ Pilih file terlebih dahulu.");
		return;
	}

	// NOTE: Tampilkan spinner custom
	const spinner = document.createElement('div');
	spinner.id = 'upload-spinner';
	spinner.innerHTML = `<div class="loader"></div>`;
	document.body.appendChild(spinner);

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

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

	fetch("{% url 'upload_to_drive' %}", {
		method: 'POST',
		headers: {
			'X-CSRFToken': csrfToken
		},
		body: formData
	})
	.then(response => response.json())
	.then(data => {
		document.getElementById('upload-spinner')?.remove();

		if (data.status === 'success') {
			// NOTE: Sukses upload Drive
			document.getElementById('upload-status-text').innerHTML = `<i class="fas fa-check-circle"></i> Upload Berhasil`;
			document.getElementById('upload-status-text').className = 'text-success';
			document.getElementById('upload-file-name').innerText = "Nama file: " + data.file_name;

			const openBtn = document.getElementById('open-drive-btn');
			openBtn.href = data.web_link || "https://drive.google.com/drive/";
			openBtn.style.display = 'inline-block';

			document.getElementById('upload-result-modal').style.display = 'block';
		} else {
			// NOTE: Gagal upload Drive
			document.getElementById('upload-status-text').innerHTML = `<i class="fas fa-times-circle"></i> Gagal Upload`;
			document.getElementById('upload-status-text').className = 'text-danger';
			document.getElementById('upload-file-name').innerText = "Pesan: " + data.message;

			const openBtn = document.getElementById('open-drive-btn');
			openBtn.style.display = 'none';

			document.getElementById('upload-result-modal').style.display = 'block';
		}
	})
	.catch(error => {
		document.getElementById('upload-spinner')?.remove();
		alert('❌ Terjadi kesalahan saat upload: ' + error.message);
	});
}
</script>

{% endblock %}