e-ticket/assets/modules/cart.js

function formatEur(value) {
    return value.toFixed(2).replace('.', ',') + ' \u20AC'
}

function buildCart(items) {
    const cart = []
    for (const item of items) {
        const qty = Number.parseInt(item.querySelector('[data-cart-qty]').value, 10) || 0
        if (qty > 0) {
            cart.push({ billetId: item.dataset.billetId, qty })
        }
    }

    return cart
}

function handleCheckout(checkoutBtn, items, errorEl, errorText) {
    const cart = buildCart(items)
    if (cart.length === 0) return

    const orderUrl = checkoutBtn.dataset.orderUrl
    if (!orderUrl) return

    checkoutBtn.disabled = true
    checkoutBtn.textContent = 'Chargement...'
    if (errorEl) errorEl.classList.add('hidden')

    globalThis.fetch(orderUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(cart),
    })
        .then(r => {
            if (!r.ok) throw new Error(r.status)
            return r.json()
        })
        .then(data => {
            if (data.redirect) {
                globalThis.location.href = data.redirect
            }
        })
        .catch(() => {
            checkoutBtn.disabled = false
            checkoutBtn.textContent = 'Commander'
            if (errorEl && errorText) {
                errorText.textContent = 'Une erreur est survenue. Veuillez reessayer.'
                errorEl.classList.remove('hidden')
            }
        })
}

function updateStockLabel(label, max) {
    if (max === 0) {
        label.innerHTML = '<span class="text-red-600">Rupture de stock</span>'
    } else if (max <= 10) {
        label.innerHTML = '<span class="text-orange-500">Plus que ' + max + ' place' + (max > 1 ? 's' : '') + ' !</span>'
    } else {
        label.innerHTML = '<span class="text-gray-400">' + max + ' places disponibles</span>'
    }
}

function updateItemStock(item) {
    const qtyInput = item.querySelector('[data-cart-qty]')
    const max = Number.parseInt(item.dataset.max, 10) || 0
    const current = Number.parseInt(qtyInput.value, 10) || 0

    if (max > 0 && current > max) {
        qtyInput.value = max
    }

    const label = item.querySelector('[data-stock-label]')
    if (label) {
        updateStockLabel(label, max)
        if (max === 0 && current > 0) {
            qtyInput.value = 0
        }
    }
}

function startStockPolling(stockUrl, items, updateTotals) {
    setInterval(() => {
        globalThis.fetch(stockUrl)
            .then(r => r.json())
            .then(stock => {
                for (const item of items) {
                    const qty = stock[item.dataset.billetId]
                    if (qty === undefined || qty === null) continue

                    item.dataset.max = String(qty)
                    item.querySelector('[data-cart-qty]').max = qty
                    updateItemStock(item)
                }
                updateTotals()
            })
            .catch(() => {})
    }, 30000)
}

export function initCart() {
    const billetterie = document.getElementById('billetterie')
    if (!billetterie) return

    const items = billetterie.querySelectorAll('[data-cart-item]')
    const totalEl = document.getElementById('cart-total')
    const countEl = document.getElementById('cart-count')
    const checkoutBtn = document.getElementById('cart-checkout')
    const errorEl = document.getElementById('cart-error')
    const errorText = document.getElementById('cart-error-text')
    if (!totalEl || !countEl) return

    function updateTotals() {
        let total = 0
        let count = 0

        for (const item of items) {
            const price = Number.parseFloat(item.dataset.price) || 0
            const qtyInput = item.querySelector('[data-cart-qty]')
            const lineTotalEl = item.querySelector('[data-cart-line-total]')
            const qty = Number.parseInt(qtyInput.value, 10) || 0

            const lineTotal = price * qty
            total += lineTotal
            count += qty

            lineTotalEl.textContent = formatEur(lineTotal)
        }

        totalEl.textContent = formatEur(total)
        countEl.textContent = String(count)

        if (checkoutBtn) {
            checkoutBtn.disabled = count === 0
        }
    }

    for (const item of items) {
        const qtyInput = item.querySelector('[data-cart-qty]')
        const minusBtn = item.querySelector('[data-cart-minus]')
        const plusBtn = item.querySelector('[data-cart-plus]')
        const max = Number.parseInt(item.dataset.max, 10) || 0

        minusBtn.addEventListener('click', () => {
            const current = Number.parseInt(qtyInput.value, 10) || 0
            if (current > 0) {
                qtyInput.value = current - 1
                updateTotals()
            }
        })

        plusBtn.addEventListener('click', () => {
            const current = Number.parseInt(qtyInput.value, 10) || 0
            if (max === 0 || current < max) {
                qtyInput.value = current + 1
                updateTotals()
            }
        })
    }

    if (checkoutBtn) {
        checkoutBtn.addEventListener('click', () => handleCheckout(checkoutBtn, items, errorEl, errorText))
    }

    updateTotals()

    const stockUrl = billetterie.dataset.stockUrl
    if (stockUrl) {
        startStockPolling(stockUrl, items, updateTotals)
    }
}