document.addEventListener("DOMContentLoaded", () => {
	const cartItemsContainer = document.getElementById("checkout-items");
	const subtotalEl = document.getElementById("checkout-subtotal");
	const totalEl = document.getElementById("checkout-total");

	const qrWrapper = document.getElementById("qr-wrapper");
	const form = document.getElementById("checkout-form");

	const cart = Cart.getCart();

	if (cart.length === 0) {
		cartItemsContainer.innerHTML = "<p>Your cart is empty.</p>";
		return;
	}

	let subtotal = 0;

	cart.forEach((item) => {
		subtotal += item.price * item.quantity;

		const row = document.createElement("div");
		row.className = "summary-row";
		row.innerHTML = `
			<span>${item.name} × ${item.quantity}</span>
			<span>₹${(item.price * item.quantity).toFixed(2)}</span>
		`;
		cartItemsContainer.appendChild(row);
	});

	const total = subtotal;

	subtotalEl.textContent = `₹${subtotal.toFixed(2)}`;
	totalEl.textContent = `₹${total.toFixed(2)}`;

	// Unlock QR on valid form submit
	form.addEventListener("submit", (e) => {
		e.preventDefault();

		if (!form.checkValidity()) return;

		qrWrapper.classList.remove("blurred");
	});
});