@extends('layouts.public.base')

@section('page.title', "Mon panier")

@section('page.content')
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:pt-20 md:pb-20">
        <div class="hidden md:flex flex-col items-center">
            <img src="{{ asset('images/visuals/illustration-3.svg') }}" alt="Illustration Lockit" class="w-full h-56 object-contain">
        </div>

        @if ($cart->items->count() > 0)
            <div class="flex flex-col">
                <h1 class="text-3xl md:text-4xl lg:text-6xl uppercase mb-4">Mon panier</h1>

                <div class="grid grid-cols-1 gap-4">
                    @each('components.public.cart.item', $cart->items, 'item')
                </div>

                <div class="my-4 border border-dashed"></div>

                <div class="flex justify-between">
                    <p class="truncate">TOTAL :</p>
                    <p class="whitespace-nowrap">{{ $cart->price_formatted }}</p>
                </div>
                <div class="flex justify-between text-sm text-gray-400">
                    <p class="truncate">TVA 20% :</p>
                    <p class="whitespace-nowrap">{{ $cart->tax_formatted }}</p>
                </div>

                <div class="my-4 border border-dashed"></div>

                <a class="h-full w-full flex flex-col justify-center text-center p-2 bg-lockit-orange/80 group-hover:bg-lockit-orange/100 rounded-xl transition-colors font-serif text-white uppercase" href="{{ route('cart.delivery') }}">
                    Passer à l'achat
                </a>
            </div>
        @else
            <div class="flex flex-col">
                <h1 class="text-3xl md:text-4xl lg:text-6xl uppercase mb-4">Mon panier</h1>
                <p>Votre panier est vide, n'hésitez pas à parcourir notre <a href="{{ route('boutique') }}" class="text-lockit-blue underline-offset-2 underline">boutique</a> !</p>
            </div>
        @endif
    </div>
@endsection