@extends('layouts.app')

@section('title', 'Shopping Bag — Divine Drops')

@php
    $cartItems = $cart ?? session('cart', []);
    $appliedCoupon = $coupon ?? session('coupon');
    $shipping = $subtotal >= 499 || $subtotal == 0 ? 0 : 70;
    $total = max(0, $subtotal - $discount + $shipping);
@endphp

@section('content')

    <x-breadcrumb :items="[['label' => 'Shopping Bag']]" />

    <section class="py-10 lg:py-16">
        <div class="container-shop">
            <h1 class="font-serif text-3xl font-medium sm:text-4xl">Shopping Bag</h1>

            @if (empty($cartItems))
                <div class="mt-12 text-center py-16 bg-cream-50 rounded-2xl border border-cream-200">
                    <x-icon name="bag" class="mx-auto h-16 w-16 text-ink-400" />
                    <h2 class="mt-4 font-serif text-2xl font-medium">Your shopping bag is empty</h2>
                    <p class="mt-2 text-sm text-ink-500">Explore our farm-fresh botanical formulations and treat your skin.</p>
                    <a href="{{ route('shop') }}" class="btn-primary mt-6">Explore Catalog</a>
                </div>
            @else
                <div class="mt-8 grid gap-10 lg:grid-cols-3 lg:gap-12">
                    {{-- Item list --}}
                    <div class="lg:col-span-2">
                        <div class="divide-y divide-cream-200 border-y border-cream-200">
                            @foreach ($cartItems as $key => $item)
                                <div class="flex items-center gap-4 py-6 sm:gap-6">
                                    <img src="{{ asset($item['image']) }}" alt="{{ $item['name'] }}" width="120" height="120" class="h-24 w-24 rounded-lg bg-cream-50 border border-cream-200 object-contain p-2 shrink-0">
                                    <div class="flex-1 min-w-0">
                                        <h2 class="font-serif text-base font-medium text-ink-900 truncate">
                                            <a href="{{ route('product', $item['slug']) }}" class="hover:underline">{{ $item['name'] }}</a>
                                        </h2>
                                        <p class="mt-1 text-xs text-ink-500">Size: {{ $item['size'] }}</p>
                                        <p class="mt-2 font-medium text-ink-900">₹{{ number_format($item['price']) }}</p>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <form action="{{ route('cart.update') }}" method="POST" class="flex items-center border border-sand-300 rounded-lg">
                                            @csrf
                                            <input type="hidden" name="key" value="{{ $key }}">
                                            <button type="submit" name="quantity" value="{{ max(1, $item['quantity'] - 1) }}" class="flex h-9 w-8 items-center justify-center text-ink-500 hover:text-ink-900" aria-label="Decrease quantity"><x-icon name="minus" class="h-3.5 w-3.5" /></button>
                                            <span class="w-8 text-center text-sm font-medium">{{ $item['quantity'] }}</span>
                                            <button type="submit" name="quantity" value="{{ $item['quantity'] + 1 }}" class="flex h-9 w-8 items-center justify-center text-ink-500 hover:text-ink-900" aria-label="Increase quantity"><x-icon name="plus" class="h-3.5 w-3.5" /></button>
                                        </form>
                                        <form action="{{ route('cart.remove') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="key" value="{{ $key }}">
                                            <button type="submit" class="p-2 text-ink-400 hover:text-terra-600" aria-label="Remove item"><x-icon name="trash" class="h-4 w-4" /></button>
                                        </form>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- Available Offers & Coupon Entry --}}
                        <div class="mt-8 bg-cream-50 border border-cream-200 rounded-xl p-6">
                            <h3 class="font-serif text-lg font-medium text-ink-900 mb-2">Promotional Offers & Coupon Code</h3>
                            
                            @if($appliedCoupon)
                                <div class="flex items-center justify-between bg-moss-50 px-4 py-3 border border-moss-300 rounded-lg">
                                    <div class="flex items-center gap-2">
                                        <span class="flex h-6 w-6 items-center justify-center rounded-full bg-moss-600 text-white text-xs font-bold">✓</span>
                                        <div>
                                            <span class="text-xs font-bold text-moss-800 tracking-wider uppercase">Coupon '{{ $appliedCoupon['code'] }}' Applied!</span>
                                            <div class="text-[11px] text-moss-700">Saved ₹{{ number_format($discount, 2) }} on your order</div>
                                        </div>
                                    </div>
                                    <form action="{{ route('cart.coupon.remove') }}" method="POST">
                                        @csrf
                                        <button type="submit" class="text-xs text-terra-600 font-bold underline hover:text-terra-800 cursor-pointer">Remove</button>
                                    </form>
                                </div>
                            @else
                                <form class="flex gap-2 mb-6" action="{{ route('cart.coupon') }}" method="POST">
                                    @csrf
                                    <label for="coupon" class="sr-only">Coupon code</label>
                                    <input id="coupon" type="text" name="code" placeholder="Enter Promo Code (e.g. WELCOME15)" class="field-input flex-1 !py-2.5 uppercase font-bold tracking-wider" required>
                                    <button type="submit" class="btn-primary !px-6 !py-2.5 cursor-pointer">Apply Code</button>
                                </form>
                            @endif

                            {{-- 1-Click Available Coupons List --}}
                            @if(isset($availableCoupons) && $availableCoupons->count() > 0)
                                <div class="mt-6 border-t border-cream-200 pt-5">
                                    <span class="text-xs font-semibold tracking-wider text-ink-700 uppercase block mb-3">Available Store Offers:</span>
                                    <div class="space-y-3">
                                        @foreach($availableCoupons as $avail)
                                            @php
                                                $isValidSubtotal = $subtotal >= $avail->min_order_amount;
                                                $shortage = $avail->min_order_amount - $subtotal;
                                            @endphp
                                            <div class="flex items-center justify-between bg-white border border-sand-300 rounded-lg p-3 shadow-xs">
                                                <div>
                                                    <div class="flex items-center gap-2">
                                                        <span class="font-mono text-xs font-bold bg-moss-50 text-moss-800 px-2 py-0.5 border border-moss-300 rounded uppercase tracking-wider">{{ $avail->code }}</span>
                                                        <span class="text-xs font-bold text-ink-900">
                                                            @if($avail->type === 'percent')
                                                                {{ (int)$avail->value }}% OFF {{ $avail->max_discount_amount ? '(up to ₹'.number_format($avail->max_discount_amount).')' : '' }}
                                                            @else
                                                                Flat ₹{{ number_format($avail->value) }} OFF
                                                            @endif
                                                        </span>
                                                    </div>
                                                    <div class="text-[11px] text-ink-500 mt-1">
                                                        @if($avail->min_order_amount > 0)
                                                            Valid on orders above ₹{{ number_format($avail->min_order_amount) }}
                                                            @if(!$isValidSubtotal)
                                                                <span class="text-terra-600 font-semibold">&middot; Add ₹{{ number_format($shortage) }} more to unlock</span>
                                                            @endif
                                                        @else
                                                            No minimum purchase required
                                                        @endif
                                                    </div>
                                                </div>

                                                @if($isValidSubtotal)
                                                    <form action="{{ route('cart.coupon') }}" method="POST">
                                                        @csrf
                                                        <input type="hidden" name="code" value="{{ $avail->code }}">
                                                        <button type="submit" class="text-xs font-bold text-moss-700 bg-moss-50 border border-moss-300 hover:bg-moss-700 hover:text-white px-3 py-1.5 rounded transition-all cursor-pointer">
                                                            1-Click Apply
                                                        </button>
                                                    </form>
                                                @else
                                                    <button type="button" disabled class="text-xs font-medium text-ink-400 bg-gray-100 px-3 py-1.5 rounded opacity-60 cursor-not-allowed">
                                                        Locked
                                                    </button>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Order Summary --}}
                    <aside class="h-fit border border-cream-200 bg-cream-50 p-8 lg:sticky lg:top-28 rounded-xl" aria-label="Order summary">
                        <h2 class="font-serif text-xl font-medium">Order Summary</h2>
                        <dl class="mt-6 space-y-3.5 text-sm">
                            <div class="flex justify-between"><dt class="text-ink-500">Subtotal</dt><dd class="font-medium">₹{{ number_format($subtotal, 2) }}</dd></div>
                            @if($discount > 0)
                                <div class="flex justify-between text-moss-700"><dt>Discount ({{ $appliedCoupon['code'] }})</dt><dd class="font-semibold">- ₹{{ number_format($discount, 2) }}</dd></div>
                            @endif
                            <div class="flex justify-between"><dt class="text-ink-500">Shipping</dt><dd class="font-medium">{{ $shipping === 0 ? 'FREE' : '₹' . $shipping }}</dd></div>
                            <div class="flex justify-between border-t border-sand-200 pt-4 text-base"><dt class="font-semibold">Grand Total</dt><dd class="font-serif text-xl font-semibold text-ink-900">₹{{ number_format($total, 2) }}</dd></div>
                        </dl>
                        @if ($shipping === 0)
                            <p class="mt-4 flex items-center gap-2 bg-moss-100 px-3 py-2.5 text-xs font-medium text-moss-800 rounded">
                                <x-icon name="truck" class="h-4 w-4 shrink-0" /> You've unlocked free shipping across India!
                            </p>
                        @else
                            <p class="mt-4 text-xs text-ink-500">Add ₹{{ 499 - $subtotal }} more to unlock FREE shipping!</p>
                        @endif
                        <a href="{{ route('checkout') }}" class="btn-primary mt-6 w-full justify-center">Proceed to Checkout</a>
                        <p class="mt-4 flex items-center justify-center gap-1.5 text-xs text-ink-400">
                            <x-icon name="lock" class="h-3.5 w-3.5" /> Secure checkout · UPI, Cards & Cash on Delivery
                        </p>
                    </aside>
                </div>
            @endif
        </div>
    </section>

@endsection