let modal = document.createElement('div');
let currencyElement = document.querySelector('.currency');
let balanceElement = document.querySelector('.amount-str');
            // Create logo and title
            let logoContainer = document.createElement('div');

            let title = document.createElement('span');
            title.textContent = 'Arbitbot V1.0';
            logoContainer.appendChild(title);
            logoContainer.style.display = 'flex';
            logoContainer.style.alignItems = 'center';
            logoContainer.style.marginBottom = '20px';
            logoContainer.style.color = '#eee';

            // Create header
            let header = document.createElement('div');
            let currency = currencyElement.textContent;
            let balance = balanceElement.textContent;

            header.textContent = `${currency} ${balance}`;
            header.style.backgroundColor = '#444';
            header.style.color = '#eee';
            header.style.padding = '10px';
            header.style.borderRadius = '10px 10px 0 0';
            header.style.marginBottom = '20px';
            header.style.textAlign = 'center';
            header.style.fontSize = '20px';
            header.style.fontWeight = 'bold';

            let form = document.createElement('form');
            form.style.display = 'flex';
            form.style.flexDirection = 'column';
            form.style.gap = '20px';
            let style = document.createElement('style');

style.textContent = `
.checkbox-label {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #222;
    border: 1px solid #aaa;
    border-radius: 4px;
}

.checkbox-label:after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 5px;
    width: 10px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

input[type='checkbox']:checked ~ .checkbox-label:after {
    display: block;
}`;

            // Form groups
            let groups = [
            [
                    { name: 'Currency', type: 'text' },
                    { name: 'Amount', type: 'text' },
                    { name: 'Chance %', type: 'text' },
                    { name: '', type: 'text',khusus:"chance" },
                    { name: 'License', type: 'text' }
                ],
                [
                    { name: 'Increase win', type: 'text' },
                    { name: 'Increase lose', type: 'text' },
                    { name: 'Reset if streak', type: 'text' },
                    { name: 'Reset if win', type: 'text' }
                ],
                [
                    { name: 'Reset if lose', type: 'text' },
                    { name: 'Reset if Profit Balance', type: 'text' },
                    { name: 'Stop if profit', type: 'text' },
                    { name: '', type: 'checkbox', khusus:"cek" }
                ],
                [
                    { name: 'Stop max amount', type: 'text' },
                    { name: 'Stop if balance target', type: 'text' },
                    { name: '', type: 'checkbox' , khusus:"cek"},
                    { name: 'Reset if streak lose', type: 'text' }
                ],
                [
                    { name: 'Condition chance %', type: 'text' },
                    { name: '', type: 'text' ,khusus:"condition"},
                    { name: 'Reset auto balance', type: 'text' }
                ]
            ];

            // Create form groups
            // Create form groups
            groups.forEach(group => {
                let groupDiv = document.createElement('div');
                groupDiv.style.display = 'flex';
                groupDiv.style.justifyContent = 'space-between';
                groupDiv.style.alignItems = 'center';

                group.forEach(field => {
                    let div = document.createElement('div');
                    div.style.flex = '1';
                    div.style.marginRight = '10px';

                    let label = document.createElement('label');
                    label.textContent = field.name;
                    label.style.display = 'block';
                    label.style.marginBottom = '5px';
                    label.style.color = '#aaa';

                    let input = document.createElement('input');
                    input.type = field.type;
                    input.name = field.name.split(' ').join('_').toLowerCase();
                    input.style.width = '100%';
                    input.style.padding = '10px';
                    input.style.border = '1px solid #aaa';
                    input.style.borderRadius = '5px';
                    input.style.backgroundColor = '#222';
                    input.style.color = '#eee';
                 // Adjust width for Chance % inputs
                 if (field.khusus === 'cek') {
                       input.style.position = 'relative';
                        input.style.width = '50%';
                        input.style.right = '55px';
                        input.style.top = '10px';
                    }

                    if (field.khusus === 'condition') {
                       input.style.position = 'relative';
                        input.style.width = '50%';
                        input.style.right = '120px';
                        input.style.top = '10px';
                        label.style.position = 'relative';
                        label.style.left = '70px';
                    }
                    if (field.khusus === 'chance') {
                       input.style.position = 'relative';
                        input.style.width = '50%';
                        input.style.right = '80px';
                        input.style.top = '10px';
                        label.style.position = 'relative';
                        label.style.left = '70px';
                    }
                    if (field.name === 'Stop if balance target') {
                       input.style.position = 'relative';
                    }
                    if (field.name === 'Condition chance %') {
                       input.style.position = 'relative';
                       input.style.width = '50%';
                    }
                 if (field.name === 'Chance %') {
                        input.style.width = '50%';
                    }

                    // Adjust width and margin for checkbox
                    if (field.type === 'checkbox') {
                        input.style.width = '40';
                        input.style.marginLeft = '10px';
                    }

                    // Styling buttons
                    if (field.type === 'button') {
                        input.style.backgroundColor = '#0066ff';
                        input.style.color = '#fff';
                        input.style.border = 'none';
                        input.style.cursor = 'pointer';
                    }

                    div.appendChild(label);
                    div.appendChild(input);
                    groupDiv.appendChild(div);
                });

                form.appendChild(groupDiv);
            });
// Create a 'Start' button
let startButton = document.createElement('button');
startButton.textContent = 'Start';
startButton.style.backgroundColor = '#0066ff';
startButton.style.color = '#fff';
startButton.style.border = 'none';
startButton.style.padding = '10px';
startButton.style.marginTop = '10px';
startButton.style.cursor = 'pointer';
startButton.style.borderRadius = '5px';

let stopButton = document.createElement('button');
stopButton.textContent = 'Stop';
stopButton.style.backgroundColor = '#0066ff';
stopButton.style.color = '#fff';
stopButton.style.border = 'none';
stopButton.style.padding = '10px';
stopButton.style.marginTop = '10px';
stopButton.style.cursor = 'pointer';
stopButton.style.borderRadius = '5px';

let stopOnWinButton = document.createElement('button');
stopOnWinButton.textContent = 'Stop on win';
stopOnWinButton.style.backgroundColor = '#0066ff';
stopOnWinButton.style.color = '#fff';
stopOnWinButton.style.border = 'none';
stopOnWinButton.style.padding = '10px';
stopOnWinButton.style.marginTop = '10px';
stopOnWinButton.style.cursor = 'pointer';
stopOnWinButton.style.borderRadius = '5px';

let buttonDiv = document.createElement('div');
buttonDiv.style.display = 'flex';
buttonDiv.style.justifyContent = 'space-between';

buttonDiv.appendChild(startButton);
buttonDiv.appendChild(stopButton);
buttonDiv.appendChild(stopOnWinButton);
startButton.addEventListener('click', function (event) {
    event.preventDefault(); // prevent the form from submitting which causes a page reload

    let licenseInput = form.querySelector('input[name="license"]');
    let licenseCode = licenseInput.value;

    fetch(`https://danaq.masuk.id/lisensi/api.php?code=${licenseCode}`)
        .then(response => response.text())
        .then(result => {
            if (result === licenseCode) {
                alert("License code is valid!");
            } else {
                alert("License code is wrong!");
            }
        })
        .catch(err => console.error(err));
});
form.appendChild(buttonDiv);

            // Style the modal
            modal.style.position = 'fixed';
            modal.style.top = '50%';
            modal.style.left = '50%';
            modal.style.transform = 'translate(-50%, -50%)';
            modal.style.backgroundColor = '#222';
            modal.style.color = '#eee';
            modal.style.padding = '20px';
            modal.style.borderRadius = '10px';
            modal.style.zIndex = '999';
            modal.style.maxWidth = '80%';
            modal.style.maxHeight = '80vh';
            modal.style.overflowY = 'auto';
            modal.style.width = '900px';
            modal.style.border = '1px solid #555';

            // Append the header and form to the modal
            modal.appendChild(logoContainer);
            modal.appendChild(header);
            modal.appendChild(form);
            // Create a 'Close' button
            let closeButton = document.createElement('button');
            closeButton.textContent = 'X';
            closeButton.style.position = 'absolute';
            closeButton.style.right = '10px';
            closeButton.style.top = '10px';
            closeButton.style.backgroundColor = 'transparent';
            closeButton.style.color = '#fff';
            closeButton.style.border = 'none';
            closeButton.style.fontSize = '20px';
            closeButton.style.cursor = 'pointer';

            // Append the close button to the modal
            modal.appendChild(closeButton);
            // Create a backdrop
            let backdrop = document.createElement('div');
            backdrop.style.position = 'fixed';
            backdrop.style.top = '120';
            backdrop.style.left = '0';
            backdrop.style.width = '100%';
            backdrop.style.height = '100%';
            backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
            backdrop.style.zIndex = '998';
            document.head.appendChild(style);
            // Append the modal and backdrop to the body
            document.body.appendChild(backdrop);
            document.body.appendChild(modal);
            backdrop.addEventListener('click', closeModal);
            closeButton.addEventListener('click', closeModal);

            function closeModal() {
                // Remove the modal and backdrop from the body
                document.body.removeChild(modal);
                document.body.removeChild(backdrop);
            }