document.addEventListener('DOMContentLoaded', () => {
    const seatGrid = document.querySelector('[data-seat-grid]');
    const seatInput = document.querySelector('[data-seat-input]');
    const totalOutput = document.querySelector('[data-total]');
    const seatOutput = document.querySelector('[data-seat-output]');
    const price = parseFloat(document.body.dataset.price || '0');

    if (!seatGrid || !seatInput) {
        return;
    }

    const updateTotals = () => {
        const selectedSeats = Array.from(seatGrid.querySelectorAll('.seat.selected'))
            .map((seat) => seat.dataset.seat);
        seatInput.value = selectedSeats.join(', ');
        if (seatOutput) {
            seatOutput.textContent = selectedSeats.length ? selectedSeats.join(', ') : 'None yet';
        }
        if (totalOutput) {
            totalOutput.textContent = (selectedSeats.length * price).toFixed(2);
        }
    };

    seatGrid.addEventListener('click', (event) => {
        const seat = event.target.closest('.seat');
        if (!seat || seat.classList.contains('taken')) {
            return;
        }
        seat.classList.toggle('selected');
        updateTotals();
    });

    updateTotals();
});