@extends('layouts.app')

@section('title', 'Your Cart | Furnitec')

@section('content')

<div class="max-w-5xl mx-auto px-4 sm:px-8 py-12 sm:py-20">
    <p class="eyebrow text-brand mb-4">Your Selection</p>
    <h1 class="font-display text-4xl sm:text-6xl font-light mb-10">Cart</h1>

    @if($items->isEmpty())
        <div class="text-center py-24 border border-line">
            <h2 class="font-display text-3xl font-light">Your cart is empty</h2>
            <p class="text-stone-warm mt-3 font-light">Discover pieces your home will love.</p>
            <a href="{{ route('shop') }}" class="btn btn-dark mt-8">Start Shopping</a>
        </div>
    @else
        <form id="cart-form" action="{{ route('cart.update') }}" method="POST" class="grid lg:grid-cols-3 gap-10">
            @csrf
            <div class="lg:col-span-2 divide-y divide-line border-y border-line">
                @foreach($items as $item)
                    <div class="flex gap-5 py-6">
                        <a href="{{ route('product', $item->product) }}" class="stage shrink-0 w-24 h-24 sm:w-32 sm:h-32 overflow-hidden">
                            @if($item->product->mainImage())
                                <img src="{{ $item->product->mainImage() }}" alt="{{ $item->product->name }}" class="w-full h-full object-contain p-2">
                            @endif
                        </a>
                        <div class="flex-1 min-w-0 flex flex-col">
                            <div class="flex justify-between gap-3">
                                <a href="{{ route('product', $item->product) }}" class="leading-snug hover:text-brand line-clamp-2">{{ ucwords(strtolower($item->product->name)) }}</a>
                                <button form="remove-{{ $item->product->id }}" class="text-stone-warm hover:text-brand shrink-0 text-[11px] tracking-[0.15em] uppercase underline underline-offset-4" aria-label="Remove {{ $item->product->name }}">
                                    Remove
                                </button>
                            </div>
                            <p class="text-sm text-stone-warm mt-1 font-light">৳{{ number_format($item->product->currentPrice()) }} each</p>
                            <div class="mt-auto pt-3 flex items-center justify-between">
                                <div data-qty-wrap class="flex items-center border border-line">
                                    <button type="button" data-qty-minus class="w-9 h-10 hover:bg-cream" aria-label="Decrease">−</button>
                                    <input type="number" name="quantities[{{ $item->product->id }}]" value="{{ $item->quantity }}" min="1" max="99"
                                           class="w-10 text-center text-sm font-medium focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none">
                                    <button type="button" data-qty-plus class="w-9 h-10 hover:bg-cream" aria-label="Increase">+</button>
                                </div>
                                <p class="font-medium">৳{{ number_format($item->lineTotal) }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <aside class="bg-cream p-7 sm:p-9 h-fit lg:sticky lg:top-32">
                <h2 class="eyebrow mb-7">Order Summary</h2>
                <dl class="space-y-4 text-sm">
                    <div class="flex justify-between"><dt class="text-stone-warm font-light">Subtotal</dt><dd class="font-medium">৳{{ number_format($subtotal) }}</dd></div>
                    <div class="flex justify-between"><dt class="text-stone-warm font-light">Delivery</dt><dd class="text-stone-warm font-light">Confirmed by phone</dd></div>
                    <div class="flex justify-between border-t border-line pt-4"><dt class="font-medium">Total</dt><dd class="font-display text-2xl">৳{{ number_format($subtotal) }}</dd></div>
                </dl>
                <a href="{{ route('checkout.show') }}" class="btn btn-red w-full mt-8">Proceed to Checkout</a>
                <p class="mt-4 text-center text-[11px] tracking-[0.15em] uppercase text-stone-warm">Cash on Delivery available nationwide</p>
                <a href="{{ route('shop') }}" class="mt-5 block text-center text-[11px] tracking-[0.15em] uppercase underline underline-offset-4 hover:text-brand">Continue Shopping</a>
            </aside>
        </form>

        @foreach($items as $item)
            <form id="remove-{{ $item->product->id }}" action="{{ route('cart.remove', $item->product) }}" method="POST">@csrf</form>
        @endforeach
    @endif
</div>

@endsection