document.addEventListener('DOMContentLoaded', function () {
    const holesToggle = document.getElementById('holesToggle');
    const scoreTable = document.getElementById('scoreTable');
    const form = document.getElementById('scoreForm');

    if (!holesToggle || !scoreTable || !form) return;

    const updateTotal = () => {
        let totalScore = 0;
        let totalPutts = 0;
        let totalPenalties = 0;
        let totalSandLies = 0;

        const holes = holesToggle.checked ? 18 : 9;

        for (let i = 1; i <= holes; i++) {
            const score = parseInt(document.getElementById(`hole${i}_score`).value) || 0;
            const putts = parseInt(document.getElementById(`hole${i}_putts`).value) || 0;
            const penalties = parseInt(document.getElementById(`hole${i}_penalties`).value) || 0;
            const sandLie = document.getElementById(`hole${i}_sand`).checked;

            totalScore += score;
            totalPutts += putts;
            totalPenalties += penalties;
            if (sandLie) totalSandLies++;
        }

        document.getElementById('totalScore').textContent = totalScore;
        document.getElementById('totalPutts').textContent = totalPutts;
        document.getElementById('totalPenalties').textContent = totalPenalties;
        document.getElementById('totalSandLies').textContent = totalSandLies;
    };

    const renderTable = () => {
        const holes = holesToggle.checked ? 18 : 9;
        let html = '';
        for (let i = 1; i <= 18; i++) {
            const hidden = i > holes ? ' style="display: none;"' : '';
            html += `
                <tr id="hole_row_${i}" ${hidden}>
                    <th scope="row">${i}</th>
                    <td><input type="number" class="form-control" id="hole${i}_score" min="1"></td>
                    <td><input type="number" class="form-control" id="hole${i}_putts" min="0"></td>
                    <td><input type="number" class="form-control" id="hole${i}_penalties" min="0"></td>
                    <td><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="hole${i}_sand"></div></td>
                </tr>
            `;
        }
        scoreTable.innerHTML = html;
        attachInputListeners();
    };

    const attachInputListeners = () => {
        form.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', updateTotal);
        });
    };

    holesToggle.addEventListener('change', () => {
        const holes = holesToggle.checked ? 18 : 9;
        for (let i = 1; i <= 18; i++) {
            const row = document.getElementById(`hole_row_${i}`);
            if (row) {
                row.style.display = i > holes ? 'none' : 'table-row';
            }
        }
        updateTotal();
    });

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const successToast = document.getElementById('successToast');
        if (successToast) {
            const toast = new bootstrap.Toast(successToast);
            toast.show();
        }
        form.reset();
        renderTable();
        updateTotal();
    });

    renderTable();
    updateTotal();
});