@extends('layouts.app')
@section('title', __('cart.title'))

@section('content')
    <div class="shell py-stack-lg">
        <h1 class="text-headline-lg-mobile md:text-headline-lg">{{ __('cart.title') }}</h1>

        @if ($lines->isEmpty())
            <div class="py-stack-lg text-center">
                <p class="text-body-lg text-on-surface-variant">{{ __('cart.empty') }}</p>
                <a href="{{ route('catalogue') }}" class="btn-primary mt-stack-md">{{ __('cart.empty_action') }}</a>
            </div>
        @else
            <div class="mt-stack-md grid gap-stack-lg lg:grid-cols-[1fr_360px]">

                <div class="divide-y divide-outline-variant/60 border-y border-outline-variant/60">
                    @foreach ($lines as $line)
                        <div class="flex gap-4 py-4">
                            <a href="{{ route('product', $line['product']) }}"
                               class="h-24 w-24 shrink-0 overflow-hidden rounded border border-outline-variant/60">
                                @if ($line['product']->image_path)
                                    <img src="{{ media($line['product']->image_path) }}" alt="" class="h-full w-full object-cover">
                                @endif
                            </a>

                            <div class="flex flex-1 flex-col justify-between">
                                <div>
                                    <h2 class="font-headline text-body-lg text-primary">{{ $line['product']->name }}</h2>
                                    @if ($line['option'])
                                        <p class="u-label-sm text-on-surface-variant">{{ $line['option']->label }}</p>
                                    @endif
                                </div>

                                <div class="flex flex-wrap items-center gap-3">
                                    <form action="{{ route('cart.update', $line['key']) }}" method="post" class="flex items-center gap-2">
                                        @csrf @method('patch')
                                        <label class="sr-only" for="qty-{{ $loop->index }}">{{ __('cart.quantity') }}</label>
                                        <input id="qty-{{ $loop->index }}" name="quantity" type="number" min="0" max="99"
                                               value="{{ $line['quantity'] }}"
                                               class="w-16 rounded border border-outline-variant bg-transparent px-2 py-1.5 text-center num focus:border-secondary focus:ring-0">
                                        <button type="submit" class="u-label-sm text-secondary hover:text-primary">{{ __('cart.update') }}</button>
                                    </form>

                                    <form action="{{ route('cart.destroy', $line['key']) }}" method="post">
                                        @csrf @method('delete')
                                        <button type="submit" class="u-label-sm text-on-surface-variant hover:text-error">{{ __('cart.remove') }}</button>
                                    </form>
                                </div>
                            </div>

                            <p class="font-label text-label-lg text-secondary num">{{ money($line['line_total']) }}</p>
                        </div>
                    @endforeach
                </div>

                <aside class="h-fit rounded-lg border border-outline-variant/70 p-stack-md">
                    <h2 class="u-label text-secondary">{{ __('checkout.summary') }}</h2>

                    <dl class="mt-stack-sm space-y-2 text-body-md">
                        <div class="flex justify-between">
                            <dt class="text-on-surface-variant">{{ __('cart.subtotal') }}</dt>
                            <dd class="num">{{ money($subtotal) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-on-surface-variant">{{ __('cart.delivery_fee') }}</dt>
                            <dd class="text-label-sm text-outline">{{ __('cart.fee_at_checkout') }}</dd>
                        </div>
                    </dl>

                    @php $remaining = config('shop.free_delivery_over') - $subtotal; @endphp
                    @if ($remaining > 0)
                        <p class="mt-stack-sm border-t border-outline-variant/60 pt-stack-sm text-label-sm text-secondary">
                            {{ __('cart.free_delivery_progress', ['amount' => money($remaining)]) }}
                        </p>
                    @endif

                    <a href="{{ route('checkout.create') }}" class="btn-primary mt-stack-md w-full">{{ __('cart.checkout') }}</a>
                    <a href="{{ route('catalogue') }}" class="btn-ghost mt-2 w-full">{{ __('cart.continue') }}</a>
                </aside>
            </div>
        @endif
    </div>
@endsection