<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate QR Code</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: auto;
            margin: 0;
            /*background-color: #f0f0f0*/;
        }

        .container {
            text-align: center;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            width: 50%;
        }

        input[type="file"], input[type="text"], select, textarea {
            margin-top: 10px;
            display: block;
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        table, th, td {
            border: 1px solid #ccc;
        }

        th, td {
            padding: 10px;
            text-align: left;
        }

        .actions {
            display: flex;
            gap: 10px;
        }

        #qrcodeContainer {
            margin-top: 20px;
        }

        #generatedQR {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        #generatedQR img {
            max-width: 300px;
            height: auto;
        }

.container {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 50%;
    overflow-x: auto; /* Tambahkan properti ini */
}

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th, td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
        word-wrap: break-word;
    }

    #table-container {
        overflow-x: auto; /* Tambahkan properti untuk scroll horizontal */
        max-width: 100%; /* Sesuaikan dengan kebutuhan desain Anda */
    }


body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: auto;
    margin: 0;
    /*background-color: #f0f0f0*/;
}

.container {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 90%; /* Lebar container disesuaikan dengan layar */
    max-width: 600px; /* Lebar maksimum container */
}

input[type="file"], input[type="text"], select, textarea {
    margin-top: 10px;
    display: block;
    width: calc(100% - 20px); /* Mengurangi padding dari lebar total */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Memastikan padding tidak menambah lebar total */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    overflow-x: auto; /* Untuk scroll horizontal jika melebihi lebar layar */
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    word-wrap: break-word; /* Memastikan teks dalam cell dapat wrap */
}

.actions {
    display: flex;
    gap: 10px;
    justify-content: center; /* Pusatkan tombol aksi di tampilan mobile */
}

#generatedQR img {
    max-width: 100%; /* Agar QR Code tetap dalam batas layar */
    height: auto;
}

@media (max-width: 768px) { /* Breakpoint untuk perangkat mobile */
    .container {
        width: 90%;
    }
}


button {
    background-color: #f0f0f0; /* Warna abu-abu muda */
    color: #333; /* Warna teks hitam */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2); /* Efek bevel */
}

button:hover {
    background-color: #ccc; /* Efek hover */
}

    </style>
</head>
<body>
<script>


  // Cegah akses dengan tombol F12
  document.addEventListener('keydown', (e) => {
    if (e.key === "F12" || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
      e.preventDefault();
      
    }
  });

  // Cegah klik kanan
  document.addEventListener('contextmenu', (e) => e.preventDefault());

  // Deteksi jika konsol terbuka
  const detectDevTools = (threshold) => {
    const start = new Date();
    debugger; // Pemicu konsol
    const end = new Date();
    if (end - start > threshold) {
      alert("Developer Tools terdeteksi! Menutup akses.");
      window.location.reload(); // Atau tindakan lain, misalnya logout
    }
  };

  setInterval(() => detectDevTools(100), 1000); // Cek konsol setiap detik
</script>

<script>
  if (window.location.href === "http://localhost/qr/qr.html" && window.top === window.self) {
    // Jika halaman tidak dimuat dalam iframe
    window.location.href = "https://www.google.com";
  }
</script>

<script>
  document.addEventListener('contextmenu', (e) => e.preventDefault()); // Blok klik kanan
  document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && (e.key === 'u' || e.key === 's' || e.key === 'p')) {
      e.preventDefault(); // Blok Ctrl+U, Ctrl+S, Ctrl+P
    }
  });
</script>



    <div class="container">
        <select id="qris-options" name="qris-options">
        <option value="qris">Generate QRIS</option>
        <option value="tambah-qris">Tambah QRIS</option>
    </select>
        <div id="tambahqr">
        <h2>Tambahkan Data QRIS</h1>
        <div>
            
            <input type="file" id="file-input" accept="image/*">
            <input type="text" id="id_merchan" placeholder="ID QRIS">
            <input type="text" id="nama_merchan" placeholder="Nama QRIS">
            <textarea id="result" rows="5" readonly style="display: none;"></textarea>
            <button onclick="createData()">Simpan / Perbaharui Data</button>
        </div>
        <div>
            <hr>
<h4>Data QRIS Kamu</h2>
    <hr>
                    <div id="table-container">
            <table>
                <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">ID QRIS</th>
                        <th style="text-align: center;">Nama QRIS</th>
                        <th style="display: none;">QR Code Data</th>
                        <th style="text-align: center;">Aksi</th>
                    </tr>
                </thead>
                <tbody id="data-table-body">
                </tbody>
            </table>
            </table>
        </div>
            
            
        </div>
        </div>
        <div id="qris">
            <h2>Buat QRIS Dinamis</h2>
            <select id="id_merchan_load" onchange="loadMerchanData()">
                <option value="">Pilih ID QRIS</option>
            </select>
            <input type="text" id="nama_merchan_load" placeholder="Nama QRIS" readonly>
            
<input type="text" id="formattedInput" placeholder="Nominal Tagihan" oninput="formatInput()">
            <input type="text" id="nominal" placeholder="Nominal Tagihan" style="display: none;">

            <textarea id="qr_data_load" rows="5" readonly style="display: none;"></textarea>
            <button onclick="generateQR()">Generate QR Code</button>
        </div>
        <div id="generatedQR">
            <!-- QR Code will be displayed here -->
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qrcode-styling/dist/qrcode-styling.min.js"></script>
<script>
        // Mengambil elemen dropdown dan div yang akan ditampilkan
        var qrisOptions = document.getElementById('qris-options');
        var divA = document.getElementById('qris');
        var divB = document.getElementById('tambahqr');

        // Function untuk menampilkan div sesuai pilihan dropdown
        function showHideDiv() {
            if (qrisOptions.value === 'qris') {
                divA.style.display = 'block';
                divB.style.display = 'none';
            } else if (qrisOptions.value === 'tambah-qris') {
                divA.style.display = 'none';
                divB.style.display = 'block';
            }
        }

        // Panggil fungsi showHideDiv saat halaman dimuat dan saat dropdown berubah
        showHideDiv();
        qrisOptions.addEventListener('change', showHideDiv);
    </script>


    <script>
        const fileInput = document.getElementById('file-input');
        const idMerchanInput = document.getElementById('id_merchan');
        const namaMerchanInput = document.getElementById('nama_merchan');
        const resultTextarea = document.getElementById('result');
        const idMerchanLoadInput = document.getElementById('id_merchan_load');
        const namaMerchanLoadInput = document.getElementById('nama_merchan_load');
        const nominalInput = document.getElementById('nominal');
        const qrDataLoadTextarea = document.getElementById('qr_data_load');
        const dataTableBody = document.getElementById('data-table-body');
        let editIndex = null;
        let generatedQRCode = null;

        // Load data from localStorage on page load
        document.addEventListener('DOMContentLoaded', function() {
            renderTable();
            loadMerchanOptions();
        });

        // File input change event listener to read QR code
        fileInput.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (!file) {
                return;
            }

            const reader = new FileReader();
            reader.onload = function(event) {
                const img = new Image();
                img.onload = function() {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    
                    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    const code = jsQR(imageData.data, imageData.width, imageData.height);
                    
                    if (code) {
                        resultTextarea.value = code.data;
                    } else {
                        resultTextarea.value = "No QR code found.";
                    }
                }
                img.src = event.target.result;
            }
            reader.readAsDataURL(file);
        });

        // Function to create or update data
        function createData() {
            const idMerchan = idMerchanInput.value;
            const namaMerchan = namaMerchanInput.value;
            const qrData = resultTextarea.value;

            if (editIndex === null) {
                const data = getData();
                data.push({ idMerchan, namaMerchan, qrData });
                saveData(data);
            } else {
                updateData(editIndex, { idMerchan, namaMerchan, qrData });
                editIndex = null;
            }

            idMerchanInput.value = '';
            namaMerchanInput.value = '';
            resultTextarea.value = '';

            renderTable();
            loadMerchanOptions();
        }

        // Function to get data from localStorage
        function getData() {
            return JSON.parse(localStorage.getItem('merchanData')) || [];
        }

        // Function to save data to localStorage
        function saveData(data) {
            localStorage.setItem('merchanData', JSON.stringify(data));
        }

        // Function to delete data based on index
        function deleteData(index) {
            const data = getData();
            data.splice(index, 1);
            saveData(data);
            renderTable();
            loadMerchanOptions();
        }

        // Function to edit data based on index
        function editData(index) {
            const data = getData();
            const item = data[index];
            idMerchanInput.value = item.idMerchan;
            namaMerchanInput.value = item.namaMerchan;
            resultTextarea.value = item.qrData;
            editIndex = index;
        }

        // Function to update data based on index
        function updateData(index, newData) {
            const data = getData();
            data[index] = newData;
            saveData(data);
        }

        // Function to render table with data
        function renderTable() {
            const data = getData();
            dataTableBody.innerHTML = '';
            data.forEach((item, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.idMerchan}</td>
                    <td>${item.namaMerchan}</td>
                    <td style="display: none;">${item.qrData}</td>

                    <td class="actions">
                        <button onclick="editData(${index})">Edit</button>
                        <button onclick="deleteData(${index})">Hapus</button>
                    </td>
                `;
                dataTableBody.appendChild(row);
            });
        }

        // Function to load ID Merchan options from data
        function loadMerchanOptions() {
            const data = getData();
            idMerchanLoadInput.innerHTML = '<option value="">Pilih ID QRIS</option>';
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.idMerchan;
                option.textContent = item.idMerchan;
                idMerchanLoadInput.appendChild(option);
            });
        }

        // Function to load Merchan data based on selected ID
        function loadMerchanData() {
            const idMerchan = idMerchanLoadInput.value;
            const data = getData();
            const merchan = data.find(item => item.idMerchan === idMerchan);
            if (merchan) {
                namaMerchanLoadInput.value = merchan.namaMerchan;
                qrDataLoadTextarea.value = merchan.qrData;
            } else {
                namaMerchanLoadInput.value = '';
                qrDataLoadTextarea.value = '';
            }
        }

function formatInput() {
  let inputElement = document.getElementById('formattedInput');
  let formattedValue = inputElement.value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  inputElement.value = formattedValue;

  // Update the non-formatted input
  document.getElementById('nominal').value = formattedValue.replace(/,/g, '');
}

 // Function to generate QR Code based on selected data
function generateQR() {
    const qrData = qrDataLoadTextarea.value;
    const nominal = nominalInput.value;

    // Your QRIS generation logic here
    var qrisData = qrData;
    var paymentAmount = nominal;

    var result = "";

    qrisData = qrisData.slice(0, -4);
    var step1 = qrisData.replace("010211", "010212");
    var step2 = step1.split("5802ID");

    var uang = "54" + ("0" + paymentAmount.length).slice(-2) + paymentAmount;
    uang += "5802ID";

    result = step2[0] + uang + step2[1] + convertCRC16(step2[0] + uang + step2[1]);

    // Remove previously generated QR Code
    const generatedQRContainer = document.getElementById("generatedQR");
    while (generatedQRContainer.firstChild) {
        generatedQRContainer.removeChild(generatedQRContainer.firstChild);
    }

    // Create new QR Code using QR Code Generator library
    generatedQRCode = new QRCodeStyling({
        type: "svg",
        data: result,
        image: "",
        dotsOptions: {
            color: "#000",
            type: "rounded"
        },
        backgroundOptions: {
            color: "#e9ebee",
        },
        imageOptions: {
            crossOrigin: "anonymous",
            margin: 20
        }
    });

    // Render QR Code and enable download
    generatedQRCode.append(generatedQRContainer);
    //generatedQRCode.download({ name: "qr", extension: "svg" });
}


        // Function to convert string to CRC16 checksum
        function convertCRC16(str) {
            var crc = 0xFFFF;
            var strlen = str.length;

            for (var c = 0; c < strlen; c++) {
                crc ^= str.charCodeAt(c) << 8;

                for (var i = 0; i < 8; i++) {
                    if (crc & 0x8000) {
                        crc = (crc << 1) ^ 0x1021;
                    } else {
                        crc = crc << 1;
                    }
                }
            }

            var hex = crc & 0xFFFF;
            hex = ("000" + hex.toString(16).toUpperCase()).slice(-4);

            return hex;
        }

    </script>

    <script>
    (function() {
      const allowedDomain = "bbisnis.com";

      // Periksa apakah halaman ini dimuat dalam iframe
      if (window.self === window.top) {
        // Jika tidak dalam iframe, blokir akses
        document.body.innerHTML = "<h1>:)</h1>";
        return;
      }

      // Periksa domain utama
      const parentDomain = document.referrer.split('/')[2]; // Mendapatkan hostname dari referrer
      if (!parentDomain || !parentDomain.endsWith(allowedDomain)) {
        document.body.innerHTML = "<h1>Akses ditolak</h1><p>Halaman ini hanya dapat diakses melalui iframe pada domain tertentu.</p>";
      }
    })();
  </script>
</body>
</html>
