@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

    <h1 class="text-3xl font-bold text-neutral-900 mb-8 flex items-center">
        <i class="fas fa-shopping-cart text-primary mr-3"></i> Votre Panier
    </h1>

    @if(session('cart') && count(session('cart')) > 0)
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

            <div class="md:col-span-2 space-y-4">
                @foreach(session('cart') as $id => $details)
                    <x-card class="p-4 flex gap-4 items-center transition hover:shadow-xl">

                        <div class="w-24 h-24 flex-shrink-0 bg-gray-100 rounded-theme overflow-hidden border border-gray-200">
                            <img src="{{ $details['preview_image'] }}" class="w-full h-full object-contain">
                        </div>

                        <div class="flex-grow">
                            <h3 class="font-bold text-lg text-neutral-800">{{ $details['name'] }}</h3>
                            <div class="text-sm text-gray-500">Quantité : {{ $details['quantity'] }}</div>

                            <a href="{{ route('cart.remove', $id) }}" class="text-xs text-red-500 hover:text-red-700 underline mt-1 inline-block">
                                <i class="fas fa-trash"></i> Retirer du panier
                            </a>
                        </div>

                        <div class="text-right">
                            <div class="font-bold text-primary text-xl">{{ $details['price'] }} €</div>
                        </div>

                    </x-card>
                @endforeach
            </div>

            <div class="md:col-span-1">
                <x-card class="p-6 sticky top-24">
                    <h3 class="text-lg font-bold text-gray-700 mb-4 border-b pb-2">Récapitulatif</h3>

                    <div class="flex justify-between items-center mb-2">
                        <span class="text-gray-600">Sous-total</span>
                        <span class="font-bold">{{ array_sum(array_column(session('cart'), 'price')) }} €</span>
                    </div>
                    <div class="flex justify-between items-center mb-6 text-sm text-gray-500">
                        <span>Livraison</span>
                        <span>Calculé à l'étape suivante</span>
                    </div>

                    <div class="flex justify-between items-center mb-6 text-xl font-bold text-primary">
                        <span>Total</span>
                        <span>{{ array_sum(array_column(session('cart'), 'price')) }} €</span>
                    </div>

                    <a href="{{ route('cart.checkout') }}" class="block w-full text-center bg-secondary hover:bg-secondary-dark text-white font-bold py-4 rounded-theme shadow-lg transform transition hover:-translate-y-1">
                        PASSER À LA LIVRAISON <i class="fas fa-arrow-right ml-2"></i>
                    </a>

                    <div class="mt-4 text-center">
                        <a href="{{ route('product.show', 1) }}" class="text-sm text-gray-500 hover:text-primary underline">
                            Continuer mes achats
                        </a>
                    </div>
                </x-card>
            </div>

        </div>
    @else
        <div class="text-center py-20 bg-white rounded-theme shadow-sm">
            <div class="text-6xl text-gray-300 mb-4">
                <i class="fas fa-shopping-basket"></i>
            </div>
            <h2 class="text-2xl font-bold text-gray-700 mb-2">Votre panier est vide</h2>
            <p class="text-gray-500 mb-8">On dirait que vous n'avez pas encore trouvé votre bonheur.</p>
            <a href="{{ route('product.show', 1) }}" class="inline-block bg-primary hover:bg-primary-dark text-white font-bold py-3 px-8 rounded-theme transition">
                Commencer à personnaliser
            </a>
        </div>
    @endif

</div>
@endsection