Setelan Widget/Gadget Blog Ikuti Sebelum Unduh Di Kodeksidipo

<!-- Widget Download Minimalis -->
<div class="download-widget" style="font-family: inherit; display: inline-block;">
  <!-- Perhatikan atribut data-url di bawah ini sebagai sumber link file -->
  <a href="#" class="simple-download-link" data-file-id="file_spreadsheet_1vaI" data-url="https://docs.google.com/spreadsheets/d/1vaI4XootQ0g-M_MrPSxs0tjhNeLimUX424kp-Rvf2rk" style="text-decoration: underline; color: #0066cc; font-weight: bold;">[Link Download]</a> 
  <span class="simple-download-counter" style="margin-left: 5px; color: #555;">「Memuat...」</span>
</div>

<!-- Modal Syarat Follow & Pilihan Format File -->
<div id="social-modal" style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);">
  <div style="background: white; margin: 12% auto; padding: 25px; width: 90%; max-width: 380px; border-radius: 8px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
    <p style="margin-top: 0; font-weight: bold; color: #333; font-size: 15px;">Dukung Kami Terlebih Dahulu</p>
    <p style="font-size: 13px; color: #666;">Ikuti salah satu media sosial kami untuk membuka tombol download:</p>
    
    <div style="margin: 15px 0; display: flex; flex-direction: column; gap: 8px;">
      <a href="https://facebook.com/akunanda" target="_blank" class="social-btn" style="background: #1877f2; color: white; padding: 8px; text-decoration: none; border-radius: 4px; font-size: 14px;">Facebook</a>
      <a href="https://instagram.com/akunanda" target="_blank" class="social-btn" style="background: #e4405f; color: white; padding: 8px; text-decoration: none; border-radius: 4px; font-size: 14px;">Instagram</a>
      <a href="https://x.com/akunanda" target="_blank" class="social-btn" style="background: #000000; color: white; padding: 8px; text-decoration: none; border-radius: 4px; font-size: 14px;">X (Twitter)</a>
    </div>

    <!-- Pilihan Format File untuk Pengunjung -->
    <div id="format-section" style="display: none; margin: 15px 0; text-align: left; background: #f4f4f4; padding: 10px; border-radius: 5px;">
      <label style="font-size: 13px; font-weight: bold; color: #333; display: block; margin-bottom: 5px;">Pilih Format File:</label>
      <select id="file-format-select" style="width: 100%; padding: 6px; border-radius: 4px; border: 1px solid #ccc; font-size: 13px;">
        <option value="export?format=xlsx">Microsoft Excel (.xlsx)</option>
        <option value="export?format=pdf">Dokumen PDF (.pdf)</option>
        <option value="export?format=csv">Comma Separated (.csv)</option>
      </select>
    </div>

    <button id="btn-proceed-download" disabled style="background: #e0e0e0; color: #a0a0a0; border: none; padding: 10px 16px; border-radius: 4px; cursor: not-allowed; width: 100%; font-weight: bold; font-size: 14px;">
      Download Sekarang
    </button>
    
    <div style="margin-top: 12px;">
      <span id="close-modal" style="color: #666; cursor: pointer; font-size: 12px; text-decoration: underline;">Batal</span>
    </div>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    if (typeof db === 'undefined') return;

    // Mendukung banyak widget dalam satu halaman jika diperlukan (menggunakan class)
    const widgets = document.querySelectorAll(".download-widget");

    widgets.forEach(widget => {
        const linkEl = widget.querySelector(".simple-download-link");
        const counterEl = widget.querySelector(".simple-download-counter");
        const fileId = linkEl.getAttribute("data-file-id");
        const counterRef = db.ref("downloads/" + fileId);

        // 1. Sinkronisasi counter real-time dari Firebase
        counterRef.on("value", function(snapshot) {
            const count = snapshot.val() || 0;
            counterEl.textContent = "「" + count + " Download」";
        });

        const modal = document.getElementById("social-modal");
        const socialBtns = modal.querySelectorAll(".social-btn");
        const btnProceed = document.getElementById("btn-proceed-download");
        const spanClose = document.getElementById("close-modal");
        const formatSection = document.getElementById("format-section");
        const formatSelect = document.getElementById("file-format-select");
        
        let clickedSocial = false;
        let activeLinkEl = null;

        // 2. Klik link download membuka modal
        linkEl.addEventListener("click", function(e) {
            e.preventDefault();
            activeLinkEl = linkEl; // Simpan elemen link yang sedang diklik
            modal.style.display = "block";
        });

        spanClose.addEventListener("click", function() {
            modal.style.display = "none";
        });

        // 3. Deteksi klik media sosial (membuka akses download & pilihan format)
        socialBtns.forEach(btn => {
            btn.addEventListener("click", function() {
                clickedSocial = true;
                formatSection.style.display = "block"; // Munculkan pilihan format
                btnProceed.removeAttribute("disabled");
                btnProceed.style.background = "#10b981";
                btnProceed.style.color = "white";
                btnProceed.style.cursor = "pointer";
            });
        });

        // 4. Eksekusi penambahan counter dan proses download sesuai format pilihan
        // Menggunakan teknik 'onclick' agar event listener tidak bertumpuk jika ada banyak widget
        btnProceed.onclick = function() {
            if (!clickedSocial || !activeLinkEl) return;

            counterRef.transaction(function(currentCount) {
                return (currentCount || 0) + 1;
            }).then(() => {
                // Ambil base URL dari atribut data-url milik link yang diklik
                const baseUrl = activeLinkEl.getAttribute("data-url");
                const selectedFormat = formatSelect.value; // Mendapatkan pilihan dari dropdown (.xlsx, .pdf, atau .csv)
                
                // Gabungkan base URL dengan format yang dipilih
                const finalUrl = baseUrl + "/" + selectedFormat;
                
                window.location.href = finalUrl;
                modal.style.display = "none";
            }).catch(err => {
                console.error("Gagal memperbarui database:", err);
            });
        };
    });
});
</script>