@extends('layouts.app')

@section('title', 'Shopping Cart - ' . ($shopSettings['shop_name'] ?? 'Orange Groceries'))
@section('meta_robots', 'noindex, nofollow')
@section('canonical', route('cart.index'))

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    
    <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight mb-6">Shopping Cart</h1>

    @if(count($cartItems) > 0)
        <!-- Free Delivery Progress Bar -->
        <div class="bg-white rounded-3xl p-5 border border-slate-200/80 shadow-sm mb-8">
            <div class="flex items-center justify-between text-xs font-bold mb-2">
                @if($subtotal >= $freeThreshold)
                    <span class="text-emerald-700 flex items-center gap-1.5"><i class="fa-solid fa-circle-check text-emerald-500"></i> 🎉 Congratulations! You unlocked FREE Delivery!</span>
                @else
                    <span class="text-slate-700">Add <strong>₹{{ number_format($freeThreshold - $subtotal, 2) }}</strong> more items for <strong>FREE Delivery</strong></span>
                @endif
                <span class="text-slate-400 font-mono">Target: ₹{{ number_format($freeThreshold, 2) }}</span>
            </div>
            <div class="w-full bg-slate-100 h-2.5 rounded-full overflow-hidden">
                <div class="bg-gradient-to-r from-brand-500 to-emerald-400 h-full rounded-full transition-all duration-500" style="width: {{ min(100, ($subtotal / $freeThreshold) * 100) }}%"></div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            <!-- Cart Items List -->
            <div class="lg:col-span-2 space-y-4">
                @foreach($cartItems as $item)
                    <div class="bg-white rounded-3xl p-5 border border-slate-200/80 shadow-sm flex flex-col sm:flex-row items-center gap-5 justify-between">
                        
                        <div class="flex items-center gap-4 flex-1">
                            <img src="{{ $item->product->image }}" alt="{{ $item->product->name }}" class="w-20 h-20 object-contain rounded-2xl bg-slate-50 p-2 border border-slate-100">
                            <div>
                                <h3 class="font-extrabold text-slate-800 text-sm hover:text-brand-600">
                                    <a href="{{ route('products.show', $item->product->slug) }}">{{ $item->product->name }}</a>
                                </h3>
                                <div class="text-xs text-slate-400 font-semibold mt-1">
                                    {{ $item->variant ? $item->variant->variant_name : ($item->product->weight ?? 'Standard Pack') }}
                                </div>
                                <div class="text-sm font-extrabold text-brand-700 mt-1">
                                    ₹{{ number_format($item->unit_price, 2) }}
                                </div>
                            </div>
                        </div>

                        <!-- Quantity Selector -->
                        <div class="flex items-center gap-6 w-full sm:w-auto justify-between sm:justify-end">
                            <form action="{{ route('cart.update', $item->id) }}" method="POST" class="flex items-center bg-slate-100 rounded-xl p-1 border border-slate-200">
                                @csrf
                                <button type="submit" name="quantity" value="{{ max(1, $item->quantity - 1) }}" class="w-8 h-8 rounded-lg bg-white text-slate-700 font-bold flex items-center justify-center shadow-sm"><i class="fa-solid fa-minus text-xs"></i></button>
                                <span class="w-10 text-center font-extrabold text-sm text-slate-900">{{ $item->quantity }}</span>
                                <button type="submit" name="quantity" value="{{ $item->quantity + 1 }}" class="w-8 h-8 rounded-lg bg-white text-slate-700 font-bold flex items-center justify-center shadow-sm"><i class="fa-solid fa-plus text-xs"></i></button>
                            </form>

                            <div class="text-right min-w-[80px]">
                                <div class="text-base font-black text-slate-900">₹{{ number_format($item->total_price, 2) }}</div>
                            </div>

                            <form action="{{ route('cart.remove', $item->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="text-slate-400 hover:text-rose-600 p-2 transition"><i class="fa-solid fa-trash-can"></i></button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Summary & Coupon Sidebar -->
            <div class="space-y-6">
                
                <!-- Coupon Box -->
                <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm">
                    <h3 class="font-extrabold text-slate-900 text-sm mb-3 flex items-center gap-2">
                        <i class="fa-solid fa-ticket text-brand-600"></i> Apply Promo Coupon
                    </h3>

                    @if($coupon)
                        <div class="bg-emerald-50 border border-emerald-200 text-emerald-800 p-3 rounded-2xl flex items-center justify-between text-xs font-bold">
                            <div>
                                <span class="bg-emerald-600 text-white px-2 py-0.5 rounded text-[10px] uppercase font-mono mr-1.5">{{ $coupon->code }}</span>
                                <span>Saved ₹{{ number_format($discountAmount, 2) }}</span>
                            </div>
                            <form action="{{ route('cart.coupon.remove') }}" method="POST">
                                @csrf
                                <button type="submit" class="text-rose-600 hover:underline">Remove</button>
                            </form>
                        </div>
                    @else
                        <form action="{{ route('cart.coupon.apply') }}" method="POST" class="flex gap-2">
                            @csrf
                            <input type="text" name="coupon_code" placeholder="e.g. WELCOME100" required class="flex-1 uppercase px-4 py-2.5 rounded-xl border border-slate-200 text-xs font-mono font-bold focus:outline-none focus:ring-2 focus:ring-brand-500">
                            <button type="submit" class="bg-slate-900 hover:bg-slate-800 text-white font-bold text-xs px-4 py-2.5 rounded-xl transition">Apply</button>
                        </form>
                        <p class="text-[11px] text-slate-400 mt-2">Try coupon <code class="font-mono text-brand-600 font-bold">WELCOME100</code> (₹100 OFF on orders > ₹500)</p>
                    @endif
                </div>

                <!-- Order Calculation Summary -->
                <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
                    <h3 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3">Bill Summary</h3>

                    <div class="space-y-2.5 text-xs font-semibold text-slate-600">
                        <div class="flex justify-between">
                            <span>Item Subtotal</span>
                            <span class="text-slate-900">₹{{ number_format($subtotal, 2) }}</span>
                        </div>

                        @if($discountAmount > 0)
                        <div class="flex justify-between text-emerald-600 font-bold">
                            <span>Coupon Discount</span>
                            <span>- ₹{{ number_format($discountAmount, 2) }}</span>
                        </div>
                        @endif

                        <div class="flex justify-between">
                            <span>Delivery Charges</span>
                            @if($deliveryCharge == 0)
                                <span class="text-emerald-600 font-bold uppercase">FREE</span>
                            @else
                                <span class="text-slate-900">₹{{ number_format($deliveryCharge, 2) }}</span>
                            @endif
                        </div>
                    </div>

                    <div class="border-t border-slate-100 pt-4 flex justify-between items-baseline">
                        <div>
                            <span class="text-sm font-extrabold text-slate-900 block">Total Amount</span>
                            <span class="text-[10px] text-slate-400">Inclusive of all taxes</span>
                        </div>
                        <span class="text-2xl font-black text-brand-700">₹{{ number_format($totalAmount, 2) }}</span>
                    </div>

                    <a href="{{ route('checkout.index') }}" class="w-full bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-sm py-4 rounded-2xl transition shadow-xl shadow-brand-600/30 flex items-center justify-center gap-2">
                        <span>Proceed To Checkout</span>
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
    @else
        <div class="bg-white rounded-3xl p-16 text-center border border-slate-200/80 shadow-sm max-w-md mx-auto">
            <div class="w-20 h-20 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa-solid fa-cart-arrow-down text-3xl"></i>
            </div>
            <h2 class="text-xl font-extrabold text-slate-900 mb-1">Your Cart is Empty</h2>
            <p class="text-xs text-slate-500 mb-6">Explore our fresh grocery catalog and add items to your cart.</p>
            <a href="{{ route('products.index') }}" class="px-8 py-3.5 bg-brand-600 text-white font-extrabold text-xs rounded-2xl shadow-lg">Start Shopping</a>
        </div>
    @endif
</div>
@endsection