@php
    $cartItems = [
        [
            'id' => 1,
            'name' => 'Oud Royal Premium',
            'category' => 'Luxury Collection',
            'size' => '50ml',
            'price' => 1200000,
            'image' => 'https://placehold.co/200x200/png?text=Oud+Royal',
            'quantity' => 1,
        ],
        [
            'name' => 'Rose Velvet',
            'category' => 'Floral Series',
            'size' => '30ml',
            'price' => 450000,
            'image' => 'https://placehold.co/200x200/png?text=Rose+Velvet',
            'quantity' => 2,
        ],
        [
            'name' => 'Ocean Breeze',
            'category' => 'Fresh Collection',
            'size' => '100ml',
            'price' => 320000,
            'image' => 'https://placehold.co/200x200/png?text=Ocean+Breeze',
            'quantity' => 1,
        ],
    ];
@endphp

<div class="flex flex-col min-h-screen bg-white font-sans text-home-foreground">

    <main class="flex-grow px-6 lg:px-32 xl:px-48 pb-24 pt-32">

        <div class="flex items-center justify-center mb-16">
            <div class="flex items-center">
                <div class="flex flex-col items-center gap-2">
                    <div
                        class="w-10 h-10 rounded-full bg-home-primary text-white flex items-center justify-center font-bold shadow-lg shadow-home-primary/30">
                        1</div>
                    <span class="text-sm font-bold text-home-primary">Keranjang</span>
                </div>
                <div class="w-16 h-1 bg-home-foreground/10 mx-2"></div>
                <div class="flex flex-col items-center gap-2 opacity-50">
                    <div
                        class="w-10 h-10 rounded-full bg-white border-2 border-home-foreground/20 text-home-foreground flex items-center justify-center font-bold">
                        2</div>
                    <span class="text-sm font-medium">Pengiriman</span>
                </div>
                <div class="w-16 h-1 bg-home-foreground/10 mx-2"></div>
                <div class="flex flex-col items-center gap-2 opacity-50">
                    <div
                        class="w-10 h-10 rounded-full bg-white border-2 border-home-foreground/20 text-home-foreground flex items-center justify-center font-bold">
                        3</div>
                    <span class="text-sm font-medium">Pembayaran</span>
                </div>
            </div>
        </div>

        <h1 class="text-3xl font-bold text-home-primary mb-8">Keranjang Belanja <span
                class="text-lg font-normal text-home-foreground/50 ml-2">(3 Item)</span></h1>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">

            <section class="lg:col-span-8 space-y-6">

                <div
                    class="bg-home-foreground/5 rounded-xl p-4 flex items-center gap-3 text-sm text-home-foreground/80 border border-home-foreground/10">
                    <svg class="w-5 h-5 text-home-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p>Pembelian di atas <strong>Rp 500.000</strong> berhak mendapatkan <span
                            class="font-bold text-home-primary">Gratis Ongkir</span>.</p>
                </div>

                <div class="space-y-6">
                    @foreach ($cartItems as $index => $item)
                        <article
                            class="cart-item bg-white rounded-2xl border border-home-foreground/10 p-6 flex flex-col sm:flex-row gap-6 hover:shadow-lg transition-shadow duration-300"
                            data-price="{{ $item['price'] }}">
                            <div class="w-full sm:w-32 h-32 bg-home-primary/5 rounded-xl overflow-hidden flex-shrink-0">
                                <img src="{{ $item['image'] }}" alt="{{ $item['name'] }}"
                                    class="w-full h-full object-cover">
                            </div>

                            <div class="flex-1 flex flex-col justify-between">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <p class="text-xs font-bold text-home-primary uppercase tracking-wider mb-1">
                                            {{ $item['category'] }}</p>
                                        <h3 class="text-xl font-bold text-home-foreground mb-1">{{ $item['name'] }}</h3>
                                        <p class="text-sm text-home-foreground/50">Ukuran: {{ $item['size'] }}</p>
                                    </div>
                                    <button class="text-home-foreground/40 hover:text-red-500 transition-colors p-2"
                                        aria-label="Hapus item">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                            </path>
                                        </svg>
                                    </button>
                                </div>

                                <div
                                    class="flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4 mt-4">
                                    <div class="flex items-center border border-home-foreground/20 rounded-lg">
                                        <button
                                            class="qty-btn w-8 h-8 flex items-center justify-center text-home-foreground hover:bg-home-foreground/5 transition-colors"
                                            data-action="decrease">-</button>
                                        <input type="text" value="{{ $item['quantity'] }}" readonly
                                            class="qty-input w-10 text-center text-sm font-bold border-none focus:ring-0 text-home-foreground p-0">
                                        <button
                                            class="qty-btn w-8 h-8 flex items-center justify-center text-home-foreground hover:bg-home-foreground/5 transition-colors"
                                            data-action="increase">+</button>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-lg font-bold text-home-primary item-total">Rp
                                            {{ number_format($item['price'] * $item['quantity'], 0, ',', '.') }}</p>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                <div class="mt-8 pt-8 border-t border-home-foreground/10">
                    <h3 class="text-xl font-bold text-home-foreground mb-6">Mungkin Anda Suka</h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        @for ($i = 1; $i <= 4; $i++)
                            <div class="group cursor-pointer">
                                <div class="aspect-[4/5] bg-home-primary/5 rounded-xl overflow-hidden mb-3 relative">
                                    <img src="https://placehold.co/300x400/png?text=Produk+{{ $i }}"
                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                    <button
                                        class="absolute bottom-2 right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-sm text-home-primary hover:bg-home-primary hover:text-white transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 4v16m8-8H4"></path>
                                        </svg>
                                    </button>
                                </div>
                                <h4 class="font-bold text-sm text-home-foreground line-clamp-1">Parfum Rekomendasi
                                    {{ $i }}</h4>
                                <p class="text-xs text-home-primary font-bold">Rp 299.000</p>
                            </div>
                        @endfor
                    </div>
                </div>
            </section>

            <aside class="lg:col-span-4 relative">
                <div
                    class="sticky top-32 bg-white rounded-3xl border border-home-foreground/10 p-8 shadow-xl shadow-home-foreground/5">
                    <h2 class="text-xl font-bold text-home-foreground mb-6">Ringkasan Pesanan</h2>

                    <div class="space-y-4 mb-6">
                        <div class="flex justify-between text-home-foreground/70">
                            <span>Subtotal</span>
                            <span id="summary-subtotal" class="font-medium text-home-foreground">Rp 0</span>
                        </div>
                        <div class="flex justify-between text-home-foreground/70">
                            <span>Estimasi Pajak (11%)</span>
                            <span id="summary-tax" class="font-medium text-home-foreground">Rp 0</span>
                        </div>
                        <div class="flex justify-between text-green-600">
                            <span>Diskon</span>
                            <span class="font-medium">- Rp 0</span>
                        </div>
                    </div>

                    <div class="mb-6">
                        <label
                            class="block text-xs font-bold text-home-foreground/50 uppercase tracking-wider mb-2">Kode
                            Voucher</label>
                        <div class="flex gap-2">
                            <input type="text" placeholder="Masukkan kode"
                                class="flex-1 px-4 py-2 rounded-lg border border-home-foreground/20 text-sm focus:outline-none focus:border-home-primary transition-colors">
                            <button
                                class="bg-home-foreground text-white px-4 py-2 rounded-lg text-sm font-bold hover:opacity-90 transition-opacity">Gunakan</button>
                        </div>
                    </div>

                    <div class="border-t border-home-foreground/10 pt-4 mb-8">
                        <div class="flex justify-between items-end">
                            <span class="text-lg font-bold text-home-foreground">Total</span>
                            <span id="summary-total" class="text-2xl font-bold text-home-primary">Rp 0</span>
                        </div>
                        <p class="text-xs text-home-foreground/40 mt-1 text-right">Belum termasuk ongkos kirim</p>
                    </div>

                    <button
                        class="w-full bg-home-primary text-white font-bold py-4 rounded-xl hover:bg-home-secondary hover:text-home-primary transition-all duration-300 shadow-lg shadow-home-primary/20 flex items-center justify-center gap-2 group">
                        Checkout Sekarang
                        <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none"
                            stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </button>
                </div>
            </aside>

        </div>

    </main>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const cartItems = document.querySelectorAll('.cart-item');
        const subtotalEl = document.getElementById('summary-subtotal');
        const taxEl = document.getElementById('summary-tax');
        const totalEl = document.getElementById('summary-total');

        const formatRupiah = (number) => {
            return 'Rp ' + number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        };

        const updateSummary = () => {
            let subtotal = 0;
            document.querySelectorAll('.cart-item').forEach(item => {
                const price = parseFloat(item.dataset.price);
                const qty = parseInt(item.querySelector('.qty-input').value);
                subtotal += price * qty;
            });

            const tax = subtotal * 0.11;
            const total = subtotal + tax;

            if (subtotalEl) subtotalEl.textContent = formatRupiah(subtotal);
            if (taxEl) taxEl.textContent = formatRupiah(Math.round(tax));
            if (totalEl) totalEl.textContent = formatRupiah(Math.round(total));
        };

        cartItems.forEach(item => {
            const price = parseFloat(item.dataset.price);
            const input = item.querySelector('.qty-input');
            const totalDisplay = item.querySelector('.item-total');
            const btns = item.querySelectorAll('.qty-btn');

            btns.forEach(btn => {
                btn.addEventListener('click', () => {
                    let val = parseInt(input.value);
                    if (btn.dataset.action === 'increase') {
                        val++;
                    } else if (btn.dataset.action === 'decrease' && val > 1) {
                        val--;
                    }
                    input.value = val;
                    totalDisplay.textContent = formatRupiah(price * val);
                    updateSummary();
                });
            });
        });

        updateSummary();
    });
</script>