@extends('layouts.app')

@section('title', 'Keranjang Belanja - ' . setting('store_name'))

@section('content')
<div class="bg-slate-50 min-h-screen py-12 sm:py-20" x-data="cartHandler()">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-10 tracking-tight text-center sm:text-left">Keranjang Belanja</h1>

        <div class="flex flex-col lg:flex-row gap-12">
            <!-- Items List -->
            <div class="flex-grow space-y-4">
                @forelse($items as $item)
                    <div class="bg-white p-4 sm:p-6 rounded-2xl border border-slate-100 flex gap-4 sm:gap-6 items-center" id="item-{{ $item->id }}">
                        <div class="w-20 h-20 sm:w-32 sm:h-32 rounded-xl overflow-hidden bg-slate-50 flex-shrink-0">
                            <img src="{{ $item->product->images->first()?->image_path ? asset('storage/' . $item->product->images->first()->image_path) : 'https://placehold.co/300x300?text=Produk' }}" 
                                 class="w-full h-full object-cover">
                        </div>
                        <div class="flex-grow min-w-0">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-sm sm:text-lg font-bold text-slate-900 truncate pr-4">
                                        <a href="{{ url('/shop/' . $item->product->slug) }}" class="hover:text-primary transition-colors">{{ $item->product->name }}</a>
                                    </h3>
                                    @if($item->variant)
                                        <p class="text-xs text-slate-400 font-bold uppercase tracking-wider">{{ $item->variant->name }}</p>
                                    @endif
                                </div>
                                <button @click="removeItem({{ $item->id }})" class="text-slate-300 hover:text-red-500 transition-colors">
                                    <svg class="h-5 w-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"/></svg>
                                </button>
                            </div>
                            
                            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mt-4">
                                <p class="text-base sm:text-xl font-extrabold text-primary">Rp {{ number_format($item->price, 0, ',', '.') }}</p>
                                
                                <div class="flex items-center border border-slate-200 rounded-xl overflow-hidden bg-slate-50 w-max">
                                    <button @click="updateQty({{ $item->id }}, {{ $item->quantity }} - 1)" 
                                            class="p-2 sm:p-3 text-slate-400 hover:text-primary transition-colors disabled:opacity-30" 
                                            :disabled="loading == {{ $item->id }}">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
                                    </button>
                                    <span class="w-10 text-center font-bold text-slate-900 text-sm" x-text="{{ $item->quantity }}"></span>
                                    <button @click="updateQty({{ $item->id }}, {{ $item->quantity }} + 1)" 
                                            class="p-2 sm:p-3 text-slate-400 hover:text-primary transition-colors disabled:opacity-30" 
                                            :disabled="loading == {{ $item->id }}">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="bg-white py-20 rounded-3xl border border-slate-100 text-center">
                        <div class="inline-flex items-center justify-center w-20 h-20 bg-slate-100 rounded-full mb-6 text-slate-400">
                            <svg class="h-10 w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 11h14l1 12H4L5 11z"/></svg>
                        </div>
                        <h2 class="text-2xl font-bold text-slate-900 mb-2">Keranjang Kosong</h2>
                        <p class="text-slate-500 mb-8">Anda belum menambahkan produk apapun ke keranjang.</p>
                        <a href="{{ url('/shop') }}" class="px-8 py-3 bg-primary text-white font-bold rounded-xl shadow-lg">Mulai Belanja</a>
                    </div>
                @endforelse
            </div>

            <!-- Summary -->
            @if($items->isNotEmpty())
                <div class="w-full lg:w-96">
                    <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/50 sticky top-28">
                        <h3 class="text-xl font-bold text-slate-900 mb-8">Ringkasan Pesanan</h3>
                        
                        <div class="space-y-4 mb-8">
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-500">Total Produk</span>
                                <span class="font-bold text-slate-900">{{ $total_quantity }} Item</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-500">Total Berat</span>
                                <span class="font-bold text-slate-900">{{ number_format($total_weight / 1000, 2) }} kg</span>
                            </div>
                            <div class="border-t border-slate-100 pt-4 flex justify-between items-end">
                                <span class="text-slate-900 font-bold">Subtotal</span>
                                <span class="text-2xl font-black text-primary">Rp {{ number_format($subtotal, 0, ',', '.') }}</span>
                            </div>
                        </div>

                        <p class="text-[10px] text-slate-400 mb-8 leading-relaxed">
                            * Harga belum termasuk biaya pengiriman yang akan dikalkulasi pada halaman checkout.
                        </p>

                        <a href="{{ url('/checkout') }}" class="w-full flex justify-center items-center py-5 bg-primary text-white font-bold rounded-2xl shadow-xl shadow-primary/20 hover:scale-105 transition-all">
                            Lanjut ke Checkout
                            <svg class="ml-2 h-5 w-5" 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"/></svg>
                        </a>
                        
                        <a href="{{ url('/shop') }}" class="w-full flex justify-center items-center py-4 text-slate-500 font-bold text-sm mt-4 hover:text-primary transition-colors">
                            Kembali Belanja
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
    function cartHandler() {
        return {
            loading: null,
            
            async updateQty(itemId, quantity) {
                if (quantity < 1) {
                    if (!confirm('Hapus produk ini dari keranjang?')) return;
                    this.removeItem(itemId);
                    return;
                }

                this.loading = itemId;
                try {
                    const response = await axios.post(`/cart/update/${itemId}`, { quantity });
                    if (response.data.success) {
                        window.location.reload();
                    }
                } catch (e) {
                    alert('Gagal memperbarui keranjang.');
                } finally {
                    this.loading = null;
                }
            },

            async removeItem(itemId) {
                if (!confirm('Apakah Anda yakin ingin menghapus produk ini?')) return;
                
                this.loading = itemId;
                try {
                    const response = await axios.post(`/cart/remove/${itemId}`);
                    if (response.data.success) {
                        window.location.reload();
                    }
                } catch (e) {
                    alert('Gagal menghapus produk.');
                } finally {
                    this.loading = null;
                }
            }
        }
    }
</script>
@endpush
@endsection