@extends('layouts.app')

@section('content')
<div class="mx-auto max-w-7xl px-4 py-8">
    <h1 class="text-3xl font-black">Shopping Cart</h1>
    <div class="mt-6 grid gap-6 lg:grid-cols-[1fr_360px]">
        <div class="panel divide-y">
            @forelse ($cart->items as $item)
                <div class="grid gap-4 p-4 sm:grid-cols-[96px_1fr_auto]">
                    <img class="h-24 w-24 object-contain" src="{{ asset('storage/'.$item->product->main_image_path) }}" alt="{{ $item->product->name }}">
                    <div>
                        <div class="font-bold">{{ $item->product->name }}</div>
                        <div class="text-sm text-gray-500">{{ $item->variant?->name }} {{ $item->product->pack_size }}</div>
                        <form method="POST" action="{{ route('cart.items.update', $item) }}" class="mt-3 flex gap-2">
                            @csrf @method('PATCH')
                            <input class="field w-24" type="number" min="1" name="quantity" value="{{ $item->quantity }}">
                            <button class="btn-secondary">Update</button>
                        </form>
                    </div>
                    <form method="POST" action="{{ route('cart.items.destroy', $item) }}">
                        @csrf @method('DELETE')
                        <button class="text-sm font-bold text-pantry-tomato">Remove</button>
                    </form>
                </div>
            @empty
                <div class="p-6">Your cart is empty. <a class="font-bold text-pantry-leaf" href="{{ route('shop.index') }}">Start shopping</a>.</div>
            @endforelse
        </div>
        <aside class="panel h-fit p-5">
            <h2 class="text-xl font-black">Order Summary</h2>
            <dl class="mt-4 grid gap-2 text-sm">
                <div class="flex justify-between"><dt>Subtotal</dt><dd>R{{ $totals['subtotal'] }}</dd></div>
                <div class="flex justify-between"><dt>Product discounts</dt><dd>-R{{ $totals['productDiscount'] }}</dd></div>
                <div class="flex justify-between"><dt>Coupon</dt><dd>-R{{ $totals['couponDiscount'] }}</dd></div>
                <div class="flex justify-between"><dt>Delivery</dt><dd>R{{ $totals['delivery'] }}</dd></div>
                <div class="flex justify-between"><dt>VAT included</dt><dd>R{{ $totals['vat'] }}</dd></div>
                <div class="flex justify-between border-t pt-3 text-lg font-black"><dt>Total</dt><dd>R{{ $totals['grandTotal'] }}</dd></div>
            </dl>
            <form method="POST" action="{{ route('cart.coupon.apply') }}" class="mt-5 flex gap-2">
                @csrf
                <input class="field" name="code" placeholder="Coupon code">
                <button class="btn-secondary">Apply</button>
            </form>
            <a class="mt-5 btn-primary w-full" href="{{ route('checkout.show') }}">Checkout</a>
        </aside>
    </div>
</div>
@endsection