@extends('layouts.app')
@section('title', 'Mon Panier')

@section('content')

{{-- ═══ CART BANNER ═══ --}}
<div class="relative overflow-hidden min-h-[220px] md:min-h-[260px] flex items-center">
    <div class="absolute inset-0">
        <img src="{{ asset('images/banner-cart.jpg') }}"
             alt="Mon panier"
             class="w-full h-full object-cover object-center"
             onerror="this.src='{{ asset('images/banner-cart2.jpg') }}'">
        <div class="absolute inset-0 bg-gradient-to-b from-black/30 via-black/20 to-black/50"></div>
    </div>

    <div class="absolute right-0 top-0 w-64 h-64 bg-amber-400/10 rounded-full translate-x-1/3 -translate-y-1/3 blur-3xl pointer-events-none"></div>
    <div class="absolute left-1/3 bottom-0 w-48 h-48 bg-blue-300/10 rounded-full translate-y-1/2 blur-2xl pointer-events-none"></div>

    <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
        <nav class="flex items-center justify-center gap-2 text-blue-300 text-xs mb-4">
            <a href="{{ route('home') }}" class="hover:text-amber-400 transition-colors">Accueil</a>
            <i class="fas fa-chevron-right text-[10px]"></i>
            <span class="text-white font-medium">Mon Panier</span>
        </nav>
        <h1 class="text-3xl md:text-4xl font-extrabold text-white drop-shadow-lg">
            Mon <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-amber-500">Panier</span>
        </h1>
        @php $cartCount = collect($cart)->sum('quantity'); @endphp
        @if($cartCount > 0)
            <p class="text-blue-200 text-sm mt-2">
                <span class="font-bold text-white">{{ $cartCount }}</span> article(s) dans votre panier
            </p>
        @endif
    </div>
</div>

<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    @if(empty($cart))
        {{-- ─── Panier vide ─── --}}
        <div class="bg-white rounded-2xl p-10 sm:p-16 text-center shadow-sm border border-gray-100">
            <div class="w-24 h-24 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-5">
                <i class="fas fa-shopping-cart text-5xl text-gray-200"></i>
            </div>
            <h2 class="text-xl font-bold text-gray-700 mb-2">Votre panier est vide</h2>
            <p class="text-gray-400 text-sm mb-6">Ajoutez des produits à votre panier pour commencer.</p>
            <a href="{{ route('products') }}"
               class="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold px-8 py-3 rounded-full hover:from-blue-700 hover:to-blue-800 transition-all shadow-md">
                <i class="fas fa-shopping-bag"></i> Parcourir les produits
            </a>
        </div>

    @else
        <div class="flex flex-col lg:flex-row gap-6 lg:gap-8 items-start">

            {{-- ─── Liste des articles ─── --}}
            <div class="w-full lg:flex-1 space-y-3">

                @foreach($cart as $id => $item)
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-5">

                    {{-- Ligne principale : image + infos + actions --}}
                    <div class="flex gap-4">

                        {{-- Image produit --}}
                        <a href="#" class="flex-shrink-0">
                            <div class="w-20 h-20 sm:w-24 sm:h-24 bg-gray-50 rounded-xl overflow-hidden">
                                @if($item['image'])
                                    <img src="{{ asset('storage/' . $item['image']) }}"
                                         alt="{{ $item['name'] }}"
                                         class="w-full h-full object-cover"
                                         onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-blue-50\'><i class=\'fas fa-mobile-alt text-2xl text-blue-200\'></i></div>'">
                                @else
                                    <div class="w-full h-full flex items-center justify-center bg-blue-50">
                                        <i class="fas fa-mobile-alt text-2xl text-blue-200"></i>
                                    </div>
                                @endif
                            </div>
                        </a>

                        {{-- Infos + contrôles --}}
                        <div class="flex-1 min-w-0 flex flex-col justify-between gap-3">

                            {{-- Nom + prix unitaire + bouton supprimer --}}
                            <div class="flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <h3 class="font-semibold text-gray-800 text-sm sm:text-base leading-tight line-clamp-2">{{ $item['name'] }}</h3>
                                    <p class="text-blue-600 font-bold text-sm mt-1">
                                        {{ number_format($item['price'], 0, ',', ' ') }} FCFA
                                        <span class="text-gray-400 font-normal text-xs"> / unité</span>
                                    </p>
                                </div>
                                {{-- Supprimer --}}
                                <form action="{{ route('cart.remove', $id) }}" method="POST" class="flex-shrink-0">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            title="Supprimer"
                                            class="w-8 h-8 flex items-center justify-center text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors">
                                        <i class="fas fa-times text-sm"></i>
                                    </button>
                                </form>
                            </div>

                            {{-- Quantité + sous-total --}}
                            <div class="flex items-center justify-between gap-3 flex-wrap">

                                {{-- Contrôle quantité --}}
                                <form action="{{ route('cart.update', $id) }}" method="POST" class="flex items-center">
                                    @csrf
                                    @method('PATCH')
                                    <div class="flex items-center border border-gray-200 rounded-xl overflow-hidden shadow-sm">
                                        <button type="button"
                                                onclick="let i=this.nextElementSibling; if(i.value>1){i.value--; i.closest('form').submit();}"
                                                class="w-9 h-9 flex items-center justify-center bg-gray-50 hover:bg-gray-100 text-gray-600 font-bold text-lg transition-colors">
                                            −
                                        </button>
                                        <input type="number"
                                               name="quantity"
                                               value="{{ $item['quantity'] }}"
                                               min="1" max="99"
                                               onchange="this.closest('form').submit()"
                                               class="w-10 h-9 text-center text-sm font-bold border-x border-gray-200 focus:outline-none bg-white">
                                        <button type="button"
                                                onclick="let i=this.previousElementSibling; i.value++; i.closest('form').submit();"
                                                class="w-9 h-9 flex items-center justify-center bg-gray-50 hover:bg-gray-100 text-gray-600 font-bold text-lg transition-colors">
                                            +
                                        </button>
                                    </div>
                                </form>

                                {{-- Sous-total --}}
                                <div class="text-right">
                                    <p class="text-xs text-gray-400">Sous-total</p>
                                    <p class="font-extrabold text-gray-900 text-base">
                                        {{ number_format($item['price'] * $item['quantity'], 0, ',', ' ') }} FCFA
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach

                {{-- Actions bas de liste --}}
                <div class="flex flex-col sm:flex-row justify-between items-center gap-3 pt-2 px-1">
                    <a href="{{ route('products') }}"
                       class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 text-sm font-semibold transition-colors">
                        <i class="fas fa-arrow-left text-xs"></i> Continuer les achats
                    </a>
                    <form action="{{ route('cart.clear') }}" method="POST"
                          onsubmit="return confirm('Vider le panier ?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                                class="inline-flex items-center gap-2 text-red-400 hover:text-red-600 text-sm font-semibold transition-colors">
                            <i class="fas fa-trash text-xs"></i> Vider le panier
                        </button>
                    </form>
                </div>
            </div>

            {{-- ─── Récapitulatif ─── --}}
            <div class="w-full lg:w-80 xl:w-96 flex-shrink-0">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6 lg:sticky lg:top-20">

                    <h2 class="text-lg font-extrabold text-gray-900 mb-5 flex items-center gap-2">
                        <!--<i class="fas fa-receipt text-blue-600 text-base"></i> -->
                        Récapitulatif
                    </h2>

                    {{-- Détail lignes --}}
                    <div class="space-y-2.5 mb-5">
                        @foreach($cart as $item)
                        <div class="flex justify-between items-start gap-2 text-sm">
                            <span class="text-gray-600 line-clamp-2 flex-1">
                                {{ $item['name'] }}
                                <span class="text-gray-400 text-xs"> ×{{ $item['quantity'] }}</span>
                            </span>
                            <span class="font-semibold text-gray-800 flex-shrink-0 ml-2">
                                {{ number_format($item['price'] * $item['quantity'], 0, ',', ' ') }} FCFA
                            </span>
                        </div>
                        @endforeach
                    </div>

                    {{-- Total --}}
                    <div class="border-t border-gray-100 pt-4 mb-5">
                        <div class="flex justify-between items-center">
                            <span class="font-bold text-gray-700">Total</span>
                            <span class="text-xl font-extrabold text-blue-700">
                                {{ number_format($total, 0, ',', ' ') }} FCFA
                            </span>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">
                            <i class="fas fa-info-circle mr-1"></i> Frais de livraison confirmés à la commande
                        </p>
                    </div>

                    {{-- CTA Commander --}}
                    <a href="{{ route('checkout') }}"
                       class="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-amber-400 to-amber-500 hover:from-amber-500 hover:to-amber-600 text-amber-950 font-extrabold py-3.5 rounded-xl text-base transition-all hover:-translate-y-0.5 shadow-md shadow-amber-200">
                          Passer la commande
                    </a>

                    {{-- Garanties --}}
                    <div class="mt-4 pt-4 border-t border-gray-50 grid grid-cols-3 gap-2 text-center">
                        @foreach([
                            ['icon' => 'lock',      'color' => 'text-green-500',  'label' => 'Sécurisé'],
                            ['icon' => 'truck',     'color' => 'text-blue-500',   'label' => 'Livraison'],
                            ['icon' => 'money-bill','color' => 'text-amber-500',  'label' => 'Paiement livraison'],
                        ] as $g)
                        <div>
                            <i class="fas fa-{{ $g['icon'] }} {{ $g['color'] }} text-sm mb-1 block"></i>
                            <p class="text-gray-400 text-[10px] leading-tight">{{ $g['label'] }}</p>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    @endif
</div>

@endsection