window.onload = function () {
    document.getElementById('physicalAttackForm').addEventListener('submit', function (event) {
        event.preventDefault();  // Prevent the form from submitting the normal way

        const dac = parseInt(document.getElementById('dac').value, 10);
        const awc = parseInt(document.getElementById('awc').value, 10);
        const ahd = parseInt(document.getElementById('ahd').value, 10);
        const modifier = parseInt(document.getElementById('modifier').value, 10);
        const weapon_attack = document.getElementById('weapon_attack').checked;

        fetch('https://gammaworld.gmgauthier.com/roll/attack/physical', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                weapon_attack: weapon_attack,
                modifier: modifier,
                dac: dac,
                awc: awc,
                ahd: ahd
            }),
        })
            .then(response => response.json())
            .then(data => {
                const resultsDiv = document.getElementById('results');
                let html = '';

                if (data['needed']) {
                    html += `<p><b>Needed: </b>${data['needed']} &emsp;&emsp;&emsp;&emsp;&emsp;`;
                }

                if (data['original-roll']) {
                    html += `<b>Original Roll: </b>${data['original-roll']}</p>`;
                }

                if (data['modifier']) {
                    html += `<p><b>Modifier: </b>${data['modifier']} &emsp;&emsp;&emsp;&emsp;&emsp;`;
                }

                if (data['adjusted-roll']) {
                    html += `<b>Adjusted Roll: </b> ${data['adjusted-roll']}</p>`;
                }

                html += `<br/>`;

                if (data['outcome']) {
                    let outcomeText = data['outcome'];
                    html += `<p><h2>${outcomeText}</h2></p>`;
                    // adding img tag
                    let outcomeImage = 'img/' + outcomeText.replace(' ', '%20') + '.png';
                    html += `<img src="${outcomeImage}" width="350px" height="350px"/>`

                    resultsDiv.innerHTML = html;
                }
            })
    });
}