34352-vm/assets/js/main.js

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

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

    let coursePars = null;

    const updateTotal = () => {
        let totalScore = 0;
        let totalPutts = 0;
        let totalPenalties = 0;
        let totalSandLies = 0;
        let totalToPar = 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++;

            if (coursePars && score > 0) {
                const par = coursePars[`par_hole_${i}`];
                totalToPar += score - par;
            }
        }

        document.getElementById('totalScore').textContent = totalScore;
        document.getElementById('totalPutts').textContent = totalPutts;
        document.getElementById('totalPenalties').textContent = totalPenalties;
        document.getElementById('totalSandLies').textContent = totalSandLies;
        
        const toParElement = document.getElementById('totalToPar');
        if (totalToPar > 0) {
            toParElement.textContent = `+${totalToPar}`;
            toParElement.classList.add('text-danger');
            toParElement.classList.remove('text-success');
        } else if (totalToPar < 0) {
            toParElement.textContent = totalToPar;
            toParElement.classList.add('text-success');
            toParElement.classList.remove('text-danger');
        } else {
            toParElement.textContent = 'E';
            toParElement.classList.remove('text-danger', 'text-success');
        }
    };

    const updateVsPar = (holeNumber) => {
        if (!coursePars) return;
        const scoreInput = document.getElementById(`hole${holeNumber}_score`);
        const score = parseInt(scoreInput.value) || 0;
        const vsParCell = document.getElementById(`hole${holeNumber}_vs_par`);
        
        if (score > 0) {
            const par = coursePars[`par_hole_${holeNumber}`];
            const diff = score - par;
            if (diff > 0) {
                vsParCell.textContent = `+${diff}`;
                vsParCell.className = 'text-danger fw-bold';
            } else if (diff < 0) {
                vsParCell.textContent = diff;
                vsParCell.className = 'text-success fw-bold';
            } else {
                vsParCell.textContent = 'E';
                vsParCell.className = 'text-muted';
            }
        } else {
            vsParCell.textContent = '-';
            vsParCell.className = '';
        }
    };

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

    const attachInputListeners = () => {
        form.querySelectorAll('input[type="number"]').forEach(input => {
            input.addEventListener('input', () => {
                const holeNumber = input.id.match(/\d+/)[0];
                updateVsPar(holeNumber);
                updateTotal();
            });
        });
         form.querySelectorAll('input[type="checkbox"]').forEach(input => {
            input.addEventListener('input', updateTotal);
        });
    };

    const toggleInputs = (disabled) => {
        form.querySelectorAll('input').forEach(input => {
            if(input.id !== 'holesToggle') {
                input.disabled = disabled;
            }
        });
    };

    courseSelect.addEventListener('change', async () => {
        const courseId = courseSelect.value;
        if (courseId) {
            try {
                const response = await fetch(`api/get_course_pars.php?course_id=${courseId}`);
                if(response.ok) {
                    coursePars = await response.json();
                    if(coursePars.error) {
                        console.error(coursePars.error);
                        coursePars = null;
                        toggleInputs(true);
                    } else {
                        renderTable();
                        toggleInputs(false);
                    }
                } else {
                     console.error('Failed to fetch par data');
                     coursePars = null;
                     toggleInputs(true);
                }
            } catch (error) {
                console.error('Error fetching par data:', error);
                coursePars = null;
                toggleInputs(true);
            }
        } else {
            coursePars = null;
            renderTable();
            toggleInputs(true);
        }
        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', async function(e) {
        e.preventDefault();

        const playerSelect = document.getElementById('playerSelect');
        const playerId = playerSelect.value;
        if (!playerId) {
            alert('Please select a player.');
            return;
        }

        const holes = holesToggle.checked ? 18 : 9;
        const scores = {};
        for (let i = 1; i <= holes; i++) {
            scores[`hole${i}_score`] = parseInt(document.getElementById(`hole${i}_score`).value) || 0;
        }

        const selectedOption = playerSelect.options[playerSelect.selectedIndex];
        const teamId = selectedOption.dataset.teamId;

        const data = {
            playerId: playerId,
            teamId: teamId,
            courseId: courseSelect.value,
            holes: holes,
            scores: scores,
            totalScore: parseInt(document.getElementById('totalScore').textContent) || 0,
            totalToPar: document.getElementById('totalToPar').textContent || 'E',
        };

        try {
            const response = await fetch('submit_score.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (response.ok) {
                const successToast = document.getElementById('successToast');
                if (successToast) {
                    const playerName = selectedOption.text;
                    const toastBody = successToast.querySelector('.toast-body');
                    if (toastBody) {
                        toastBody.textContent = `Score submitted successfully for ${playerName}.`;
                    }
                    const toast = new bootstrap.Toast(successToast);
                    toast.show();
                }
                form.reset();
                courseSelect.value = '';
                playerSelect.value = '';
                coursePars = null;
                renderTable();
                toggleInputs(true);
                updateTotal();
            } else {
                alert(`Error: ${result.error}`);
            }
        } catch (error) {
            console.error('Submission error:', error);
            alert('An error occurred while submitting the score.');
        }
    });

    renderTable();
    updateTotal();
});