@extends('layouts.public.base')

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

@section('page.content')
<h1 class="text-3xl md:text-4xl lg:text-6xl uppercase mb-4">Mon panier</h1>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-8 relative">
    <div class="md:col-span-2 lg:col-span-3 w-full h-auto mb-auto">
        @yield('cart.content')
    </div>
    <div id="cart-summary" class="w-full h-auto mb-auto grid grid-cols-1 gap-4 sticky left-0 top-32">
        <div class="w-full p-4 bg-gray-50 rounded-xl border">
            <h2 class="text-xl">Produits</h2>
            @foreach ($cart->items as $item)
                <div class="flex justify-between items-center">
                    <p class="truncate pr-1 text-sm"><span class="truncate">{{ $item->product->title }}</span> x {{ $item->quantity }}</p>
                    <p class="whitespace-nowrap">{{ $item->product->real_price_formatted }}</p>
                </div>
            @endforeach

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

            <h2 class="text-xl">Prix</h2>
            <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>

            <h2 class="text-xl">Adresses</h2>
            <p class="text-gray-400">Livraison</p>
            <p>{{ $cart->shipping_address->summary ?? $cart->delivery_center->title ?? "Non indiqué" }}</p>

            <p class="mt-4 text-gray-400">Facturation</p>
            <p>{{ $cart->billing_address->summary ?? "Non indiqué" }}</p>

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

            <button type="submit" form="cart-form" class="w-full flex justify-center text-center px-2 py-1 bg-lockit-blue/80 group-hover:bg-lockit-blue/100 rounded-xl transition-colors font-serif text-white uppercase">Valider</button>
        </div>
    </div>
</div>
@endsection