@extends('layouts.public')

@section('title', 'Your Cart | Shop')
@section('meta_robots', 'noindex')

@section('content')
<section class="container mx-auto px-4 py-10 md:px-8">
    <div class="flex items-center justify-between gap-4"><div><a href="{{ route('shop.index') }}" class="text-sm font-bold text-zinc-500 hover:text-primary">← Continue shopping</a><h1 class="mt-2 text-3xl font-extrabold text-zinc-950">Your cart</h1></div></div>
    @include('shop.partials.flash')
    @if($lines->isEmpty())
        <div class="shop-empty mt-6"><h2>Your cart is empty</h2><p>Browse available parts to get started.</p><a class="shop-button mt-5" href="{{ route('shop.index') }}">Browse parts</a></div>
    @else
        <div class="mt-7 grid gap-8 lg:grid-cols-3">
            <div class="space-y-4 lg:col-span-2">
                @foreach($lines as $line)
                    <article class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
                        <div class="flex flex-col justify-between gap-4 sm:flex-row">
                            <div><a class="font-extrabold text-zinc-900 hover:text-primary" href="{{ route('shop.show', $line->id) }}">{{ $line->name }}</a>@if($line->cart_variant)<p class="mt-1 text-sm text-zinc-500">{{ trim(implode(' / ', array_filter([$line->cart_variant->color, $line->cart_variant->quality]))) ?: 'Standard' }}</p>@endif<p class="mt-2 font-bold text-emerald-700">${{ number_format($line->cart_unit_price, 2) }} each</p></div>
                            <div class="flex items-center gap-3">
                                <form method="POST" action="{{ route('shop.cart.update') }}" class="flex items-center gap-2">@csrf @method('PATCH')<input type="hidden" name="line" value="{{ $line->cart_key }}"><input class="shop-quantity" name="quantity" type="number" min="0" max="100" value="{{ $line->cart_quantity }}"><button class="text-sm font-bold text-primary hover:underline">Update</button></form>
                                <form method="POST" action="{{ route('shop.cart.remove') }}">@csrf @method('DELETE')<input type="hidden" name="line" value="{{ $line->cart_key }}"><button class="text-sm font-bold text-red-600 hover:underline">Remove</button></form>
                            </div>
                        </div>
                        @if(! $line->cart_available_for_sale)<p class="mt-4 rounded-lg bg-red-50 p-3 text-sm font-bold text-red-700">This item changed or is no longer available in the requested quantity. Update your cart before checkout.</p>@endif
                    </article>
                @endforeach
            </div>
            <aside class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
                <h2 class="text-xl font-extrabold text-zinc-900">Checkout</h2>
                <p class="mt-3 text-sm text-zinc-600">Your total is calculated again from current server-side prices when you place the order. No payment is collected here.</p>
                <dl class="mt-5 border-y border-zinc-100 py-4"><div class="flex justify-between text-lg font-extrabold"><dt>Order total</dt><dd>${{ number_format($total, 2) }}</dd></div></dl>
                <form method="POST" action="{{ route('shop.checkout') }}" class="mt-5 space-y-3">@csrf
                    <label class="block text-sm font-bold">Full name<input required class="shop-input mt-1" name="customer_name" value="{{ old('customer_name', auth()->user()->name ?? '') }}"></label>
                    <label class="block text-sm font-bold">Email<input required type="email" class="shop-input mt-1" name="customer_email" value="{{ old('customer_email', auth()->user()->email ?? '') }}"></label>
                    <label class="block text-sm font-bold">Phone <span class="font-normal text-zinc-400">(optional)</span><input class="shop-input mt-1" name="customer_phone" value="{{ old('customer_phone', auth()->user()->phone ?? '') }}"></label>
                    <button class="shop-button w-full">Place unpaid order</button>
                </form>
            </aside>
        </div>
    @endif
</section>
@endsection