<div x-data="{ items: [{ id: 1, name: 'Product', price: 79.99, qty: 1 }], get total() { return this.items.reduce((sum, item) => sum + item.price * item.qty, 0).toFixed(2); } }">
    <template x-for="item in items" :key="item.id">
        <div class="flex items-center py-4 gap-4">
            <div class="flex-1">
                <p class="font-medium" x-text="item.name"></p>
                <p class="text-blue-600 font-semibold" x-text="'$' + item.price"></p>
            </div>
            <div class="flex items-center gap-2">
                <button @click="item.qty = Math.max(1, item.qty - 1)">-</button>
                <span x-text="item.qty"></span>
                <button @click="item.qty++">+</button>
            </div>
        </div>
    </template>
    <div class="flex justify-between font-bold">
        <span>Total</span>
        <span x-text="'$' + total"></span>
    </div>
</div>