@extends('layouts.app')
@section('title', 'Keranjang Belanja')

@php
    $cartData = $cart->items->map(fn ($item) => [
        'id' => $item->id,
        'name' => $item->product->name,
        'slug' => $item->product->slug,
        'variant_name' => $item->variant?->name,
        'type' => $item->product->type,
        'image_url' => $item->product->thumbnail
            ? Storage::url($item->product->thumbnail)
            : ($item->product->images->first() ? Storage::url($item->product->images->first()->image) : null),
        'price' => (float) $item->price,
        'quantity' => (int) $item->quantity,
    ])->values()->toArray();
@endphp

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <h1 class="text-2xl font-bold text-gray-900 mb-6">Keranjang Belanja</h1>

    @if($cart->items->isEmpty())
        <div class="text-center py-20 bg-white rounded-2xl border border-gray-100">
            <svg class="w-16 h-16 text-gray-200 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
            <p class="text-gray-500 mb-3">Keranjang kamu kosong.</p>
            <a href="{{ route('products.index') }}" class="inline-block px-5 py-2.5 bg-teal-600 text-white text-sm font-semibold rounded-xl hover:bg-teal-700 transition">Mulai Belanja</a>
        </div>
    @else
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6" x-data="cartPage()">

            {{-- Empty state shown after all items removed --}}
            <div x-show="items.length === 0" x-cloak class="lg:col-span-3 text-center py-20 bg-white rounded-2xl border border-gray-100">
                <svg class="w-16 h-16 text-gray-200 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                <p class="text-gray-500 mb-3">Keranjang kamu kosong.</p>
                <a href="{{ route('products.index') }}" class="inline-block px-5 py-2.5 bg-teal-600 text-white text-sm font-semibold rounded-xl hover:bg-teal-700 transition">Mulai Belanja</a>
            </div>

            <div x-show="items.length > 0" class="lg:col-span-2 space-y-3">
                <template x-for="item in items" :key="item.id">
                    <div class="bg-white rounded-2xl border border-gray-100 p-4 flex gap-4">
                        <div class="w-20 h-20 rounded-xl bg-gray-100 overflow-hidden shrink-0">
                            <template x-if="item.image_url">
                                <img :src="item.image_url" :alt="item.name" class="w-full h-full object-cover">
                            </template>
                        </div>
                        <div class="flex-1 min-w-0">
                            <a :href="`/produk/${item.slug}`" class="font-medium text-gray-800 hover:text-teal-600 line-clamp-2 text-sm" x-text="item.name"></a>
                            <p x-show="item.variant_name" x-text="item.variant_name" class="text-xs text-gray-400 mt-0.5"></p>
                            <span x-show="item.type === 'digital'" class="inline-block mt-1 px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">Digital</span>
                            <p class="text-sm font-semibold text-teal-600 mt-1" x-text="formatPrice(item.price)"></p>
                        </div>
                        <div class="flex flex-col items-end justify-between shrink-0">
                            {{-- Remove button --}}
                            <button type="button" @click="removeItem(item.id)"
                                class="text-gray-300 hover:text-red-400 transition">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                            {{-- Quantity controls --}}
                            <div class="flex items-center gap-2">
                                <button type="button"
                                    @click="updateQuantity(item.id, item.quantity - 1)"
                                    :disabled="item.quantity <= 1"
                                    class="w-7 h-7 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50 text-sm font-medium flex items-center justify-center disabled:opacity-40">−</button>
                                <span class="text-sm font-semibold text-gray-800 w-6 text-center" x-text="item.quantity"></span>
                                <button type="button"
                                    @click="updateQuantity(item.id, item.quantity + 1)"
                                    class="w-7 h-7 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50 text-sm font-medium flex items-center justify-center">+</button>
                            </div>
                            {{-- Subtotal --}}
                            <p class="text-sm font-bold text-gray-800" x-text="formatPrice(item.price * item.quantity)"></p>
                        </div>
                    </div>
                </template>
            </div>

            <div x-show="items.length > 0" class="lg:col-span-1">
                <div class="bg-white rounded-2xl border border-gray-100 p-6 sticky top-24">
                    <h2 class="font-semibold text-gray-800 mb-4">Ringkasan</h2>
                    <div class="space-y-2 mb-4">
                        <template x-for="item in items" :key="item.id">
                            <div class="flex justify-between text-sm text-gray-500">
                                <span class="truncate max-w-[150px]" x-text="`${item.name} ×${item.quantity}`"></span>
                                <span x-text="formatPrice(item.price * item.quantity)"></span>
                            </div>
                        </template>
                    </div>
                    <div class="border-t border-gray-100 pt-4 flex justify-between font-bold text-gray-800">
                        <span>Total</span>
                        <span x-text="formatPrice(total)"></span>
                    </div>
                    <a href="{{ route('checkout.index') }}" class="mt-5 block w-full text-center px-4 py-3 bg-teal-600 text-white font-semibold rounded-xl hover:bg-teal-700 transition text-sm">
                        Lanjut ke Checkout
                    </a>
                    <a href="{{ route('products.index') }}" class="mt-2 block w-full text-center px-4 py-2 text-sm text-gray-500 hover:text-gray-700">
                        Lanjut Belanja
                    </a>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('cartPage', () => ({
        items: @json($cartData),

        get total() {
            return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
        },

        formatPrice(amount) {
            return 'Rp ' + new Intl.NumberFormat('id-ID').format(Math.round(amount));
        },

        async updateQuantity(itemId, quantity) {
            if (quantity < 1) return;
            const item = this.items.find(i => i.id === itemId);
            if (!item) return;
            const prev = item.quantity;
            item.quantity = quantity;
            try {
                const res = await fetch(`/keranjang/${itemId}`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({ quantity }),
                });
                const data = await res.json();
                if (data.success && window.Alpine?.store('cart')) {
                    Alpine.store('cart').count = data.cart_count;
                } else if (!data.success) {
                    item.quantity = prev;
                }
            } catch {
                item.quantity = prev;
            }
        },

        async removeItem(itemId) {
            const index = this.items.findIndex(i => i.id === itemId);
            if (index === -1) return;
            const removed = this.items.splice(index, 1)[0];
            try {
                const res = await fetch(`/keranjang/${itemId}`, {
                    method: 'DELETE',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                });
                const data = await res.json();
                if (data.success && window.Alpine?.store('cart')) {
                    Alpine.store('cart').count = data.cart_count;
                } else if (!data.success) {
                    this.items.splice(index, 0, removed);
                }
            } catch {
                this.items.splice(index, 0, removed);
            }
        },
    }));
});
</script>
@endpush