@extends('layouts.app')

@section('title', 'Shopping Cart')

@section('content')

<!-- Header Breadcrumb & Title -->
<div class="mb-8">
    <div class="flex items-center gap-2 text-xs text-slate-400 mb-2">
        <a href="{{ route('home') }}" class="hover:text-brand-light">Home</a>
        <span>/</span>
        <span class="text-slate-200 font-semibold">Shopping Bag</span>
    </div>
    <h1 class="font-display font-black text-2xl sm:text-3xl text-white">Your Shopping Cart</h1>
</div>

@if(empty($cart['lines']))
    <!-- Empty Cart State -->
    <div class="bg-ink-card rounded-3xl border border-white/10 p-12 sm:p-16 text-center max-w-xl mx-auto shadow-2xl">
        <div class="w-20 h-20 rounded-3xl bg-brand/10 text-brand-light flex items-center justify-center text-4xl mx-auto mb-5 shadow-glow">
            🛍️
        </div>
        <h2 class="font-display font-bold text-xl text-white mb-2">Your Bag is Empty</h2>
        <p class="text-slate-400 text-xs sm:text-sm mb-6 leading-relaxed">
            Looks like you haven't added any fresh sneakers or footwear yet. Check out our newest drops!
        </p>
        <a href="{{ route('products.index') }}" class="inline-block bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white text-xs font-bold px-8 py-3.5 rounded-full shadow-glow transition">
            Explore Footwear Collection &rarr;
        </a>
    </div>
@else
    <!-- Free Shipping Progress Bar -->
    <div class="bg-ink-card border border-white/10 rounded-2xl p-4 mb-8">
        <div class="flex items-center justify-between text-xs mb-2">
            <span class="text-slate-300 font-medium">
                @if($cart['free_shipping_gap'] > 0)
                    Add <strong class="text-brand-light">₹{{ number_format($cart['free_shipping_gap'], 2) }}</strong> more to unlock <strong class="text-white">FREE Express Delivery</strong>!
                @else
                    🎉 <strong class="text-emerald-400">Congratulations!</strong> You have unlocked <strong>FREE Express Delivery</strong>.
                @endif
            </span>
            <span class="text-brand-light font-bold">{{ $cart['free_shipping_progress'] }}%</span>
        </div>
        <div class="w-full bg-ink rounded-full h-2 overflow-hidden border border-white/5">
            <div class="bg-gradient-to-r from-brand to-brand-light h-2 rounded-full transition-all duration-500" style="width: {{ $cart['free_shipping_progress'] }}%"></div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Cart Items List (2 Cols) -->
        <div class="lg:col-span-2 space-y-4">
            @foreach($cart['lines'] as $line)
                @php($img = $line['product']->primaryImage())
                <div class="bg-ink-card rounded-3xl border border-white/10 p-5 flex flex-col sm:flex-row items-start sm:items-center gap-5 hover:border-brand-light/30 transition shadow-lg">
                    
                    <!-- Thumbnail -->
                    <a href="{{ route('products.show', $line['product']) }}" class="w-24 h-24 rounded-2xl bg-slate-900 overflow-hidden shrink-0 border border-white/10">
                        @if($img)
                            <img src="{{ $img->url }}" class="w-full h-full object-cover">
                        @else
                            <div class="w-full h-full flex items-center justify-center text-xl">👟</div>
                        @endif
                    </a>

                    <!-- Item Details -->
                    <div class="flex-1 min-w-0">
                        <span class="text-[10px] font-bold text-brand-light uppercase tracking-wider">{{ $line['product']->category->name ?? 'Footwear' }}</span>
                        <h3 class="font-heading font-bold text-sm text-white truncate">
                            <a href="{{ route('products.show', $line['product']) }}" class="hover:text-brand-light">{{ $line['product']->name }}</a>
                        </h3>
                        
                        <!-- Size & Color Badges -->
                        <div class="flex items-center gap-2 mt-1 text-xs text-slate-400">
                            @if($line['size'])
                                <span class="px-2 py-0.5 rounded bg-white/5 border border-white/10 text-[11px] font-semibold text-slate-300">Size: {{ $line['size'] }}</span>
                            @endif
                            @if($line['color'])
                                <span class="px-2 py-0.5 rounded bg-white/5 border border-white/10 text-[11px] font-semibold text-slate-300">Color: {{ $line['color'] }}</span>
                            @endif
                        </div>

                        <!-- Price -->
                        <div class="flex items-baseline gap-2 mt-2">
                            <span class="font-heading font-extrabold text-sm text-white">₹{{ number_format($line['product']->price, 2) }}</span>
                            @if($line['product']->original_price > $line['product']->price)
                                <span class="price-strike text-slate-400 text-xs">₹{{ number_format($line['product']->original_price, 2) }}</span>
                            @endif
                        </div>
                    </div>

                    <!-- Quantity Stepper -->
                    <form action="{{ route('cart.update', $line['key']) }}" method="POST" class="flex items-center gap-2">
                        @csrf
                        @method('PATCH')
                        <div class="flex items-center bg-ink border border-white/15 rounded-xl p-1">
                            <button type="button" onclick="const i = this.nextElementSibling; if(i.value > 1){ i.value--; this.form.submit(); }" class="w-7 h-7 text-slate-300 hover:text-white font-bold text-sm flex items-center justify-center">-</button>
                            <input type="number" name="quantity" value="{{ $line['quantity'] }}" min="1" max="10" 
                                   class="w-10 bg-transparent text-center text-xs font-bold text-white focus:outline-none border-0 p-0" onchange="this.form.submit()">
                            <button type="button" onclick="const i = this.previousElementSibling; if(i.value < 10){ i.value++; this.form.submit(); }" class="w-7 h-7 text-slate-300 hover:text-white font-bold text-sm flex items-center justify-center">+</button>
                        </div>
                    </form>

                    <!-- Line Total -->
                    <div class="text-right shrink-0">
                        <p class="font-heading font-black text-sm text-brand-light">₹{{ number_format($line['line_total'], 2) }}</p>
                        <form action="{{ route('cart.remove', $line['key']) }}" method="POST" class="mt-1">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-rose-400 hover:text-rose-300 text-[11px] font-semibold">Remove</button>
                        </form>
                    </div>

                </div>
            @endforeach

            <!-- Coupon Box -->
            <div class="bg-ink-card rounded-3xl border border-white/10 p-5 mt-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-heading font-bold text-xs text-white flex items-center gap-2">
                        <span>🏷️ Apply Promo Voucher</span>
                    </h3>
                    <span class="text-[11px] text-slate-400">Available: <code class="text-brand-light font-bold">STEP10</code>, <code class="text-brand-light font-bold">FREESHIP</code></span>
                </div>

                @if(!empty($cart['coupon']))
                    <div class="flex items-center justify-between bg-emerald-950/80 border border-emerald-500/30 text-emerald-300 p-3 rounded-2xl text-xs">
                        <div class="flex items-center gap-2">
                            <span class="font-bold">✓ {{ $cart['coupon']['code'] }}:</span>
                            <span>{{ $cart['coupon']['label'] }}</span>
                        </div>
                        <form action="{{ route('cart.coupon.remove') }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-rose-400 hover:underline font-bold text-xs">Remove</button>
                        </form>
                    </div>
                @else
                    <form action="{{ route('cart.coupon.apply') }}" method="POST" class="flex gap-2">
                        @csrf
                        <input type="text" name="code" placeholder="Enter coupon code (e.g. STEP10)" required
                               class="bg-ink border border-white/15 rounded-xl px-4 py-2 text-xs text-slate-100 placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none uppercase flex-1 font-mono font-bold">
                        <button type="submit" class="bg-brand hover:bg-brand-hover text-white text-xs font-bold px-5 py-2 rounded-xl transition shadow-glow">
                            Apply
                        </button>
                    </form>
                @endif
            </div>

        </div>

        <!-- Order Summary (1 Col) -->
        <div class="bg-ink-card rounded-3xl border border-white/10 p-6 h-fit sticky top-24 shadow-2xl space-y-5">
            <h2 class="font-heading font-bold text-base text-white border-b border-white/10 pb-3">Order Summary</h2>
            
            <div class="space-y-2.5 text-xs">
                <div class="flex justify-between text-slate-300">
                    <span>Bag Subtotal</span>
                    <span class="font-semibold text-white">₹{{ number_format($cart['subtotal'], 2) }}</span>
                </div>
                
                @if($cart['discount_total'] > 0)
                    <div class="flex justify-between text-emerald-400">
                        <span>Original Price Discount</span>
                        <span class="font-semibold">-₹{{ number_format($cart['discount_total'], 2) }}</span>
                    </div>
                @endif

                @if(!empty($cart['coupon_discount']) && $cart['coupon_discount'] > 0)
                    <div class="flex justify-between text-brand-light font-bold">
                        <span>Coupon Savings ({{ $cart['coupon']['code'] }})</span>
                        <span>-₹{{ number_format($cart['coupon_discount'], 2) }}</span>
                    </div>
                @endif

                <div class="flex justify-between text-slate-300">
                    <span>Estimated GST (18%)</span>
                    <span class="font-semibold text-white">₹{{ number_format($cart['tax_total'], 2) }}</span>
                </div>

                <div class="flex justify-between text-slate-300">
                    <span>Shipping Fee</span>
                    @if($cart['shipping_fee'] == 0)
                        <span class="font-bold text-emerald-400 uppercase tracking-wider text-[11px]">FREE</span>
                    @else
                        <span class="font-semibold text-white">₹{{ number_format($cart['shipping_fee'], 2) }}</span>
                    @endif
                </div>

                <div class="border-t border-white/10 pt-3 flex justify-between items-baseline font-heading font-black text-base text-white">
                    <span>Grand Total</span>
                    <span class="text-xl text-brand-light">₹{{ number_format($cart['grand_total'], 2) }}</span>
                </div>
            </div>

            <!-- Checkout Action -->
            @auth
                <a href="{{ route('checkout.index') }}" class="block w-full text-center bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white font-bold py-3.5 rounded-full text-xs shadow-glow hover:shadow-glow-lg transition">
                    Proceed to Checkout &rarr;
                </a>
            @else
                <a href="{{ route('login') }}" class="block w-full text-center bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white font-bold py-3.5 rounded-full text-xs shadow-glow hover:shadow-glow-lg transition">
                    Login to Complete Order &rarr;
                </a>
            @endauth

            <div class="pt-2 text-center text-[10px] text-slate-400 space-y-1">
                <p>🔒 256-Bit SSL Encrypted Simulated Checkout</p>
                <p>⚡ 7-Day Hassle-Free Size Replacement</p>
            </div>
        </div>

    </div>
@endif

@endsection