@extends('themes.classic.layouts.app')

@section('title', 'Panier - '.($site_name ?? 'Mon Site'))

@section('content')
<div class="max-w-4xl mx-auto px-6 py-16">
    <h1 class="text-3xl font-bold text-slate-900 mb-8">Panier</h1>

    @if(session('success'))
    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-xl">{{ session('success') }}</div>
    @endif
    @if($errors->has('coupon'))
    <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-800 rounded-xl">{{ $errors->first('coupon') }}</div>
    @endif

    @if(empty($items))
    <div class="bg-white rounded-2xl border border-slate-200 p-12 text-center">
        <p class="text-xl text-slate-600 mb-6">Votre panier est vide.</p>
        <a href="{{ route('ecommerce.index') }}" class="inline-block px-6 py-3 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">Continuer mes achats</a>
    </div>
    @else
    <form method="POST" action="{{ route('ecommerce.update-cart') }}" id="cart-update-form">
        @csrf
        <div class="space-y-4 mb-8">
            @foreach($items as $item)
            <div class="flex items-center gap-6 p-6 bg-white rounded-2xl border border-slate-200">
                @if($item['product']->primaryImagePath())
                    <img src="{{ asset('storage/'.$item['product']->primaryImagePath()) }}" alt="" class="w-20 h-20 rounded-xl object-cover">
                @else
                    <div class="w-20 h-20 rounded-xl bg-slate-100 flex items-center justify-center text-2xl">📦</div>
                @endif
                <div class="flex-1">
                    <h3 class="font-semibold text-slate-900">{{ $item['product']->name }}</h3>
                    <p class="text-primary-500 font-bold">{{ number_format($item['product']->price, 2, ',', ' ') }} €</p>
                </div>
                <input type="hidden" name="items[{{ $loop->index }}][id]" value="{{ $item['product']->id }}">
                <input type="number" name="items[{{ $loop->index }}][qty]" value="{{ $item['qty'] }}" min="0" max="99" class="w-20 px-3 py-2 border border-slate-200 rounded-xl text-center">
                <span class="w-24 text-right font-semibold">{{ number_format($item['product']->price * $item['qty'], 2, ',', ' ') }} €</span>
            </div>
            @endforeach
        </div>
    </form>

    @if($appliedCoupon ?? null)
    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 rounded-xl flex items-center justify-between">
        <span class="text-emerald-800 font-medium">Code <strong>{{ $appliedCoupon['code'] }}</strong> appliqué (−{{ number_format($discount ?? 0, 2, ',', ' ') }} €)</span>
        <form method="POST" action="{{ route('ecommerce.remove-coupon') }}" class="inline">
            @csrf
            <button type="submit" class="text-sm text-emerald-700 hover:underline">Retirer</button>
        </form>
    </div>
    @else
    <div class="mb-6 flex gap-2">
        <form method="POST" action="{{ route('ecommerce.apply-coupon') }}" class="flex gap-2 flex-1 max-w-sm">
            @csrf
            <input type="text" name="code" placeholder="Code promo" class="flex-1 px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 uppercase" value="{{ old('code') }}">
            <button type="submit" class="px-4 py-2.5 border border-slate-200 rounded-xl hover:bg-slate-50 transition font-medium">Appliquer</button>
        </form>
    </div>
    @endif

    <div class="flex justify-between items-center">
        <button type="submit" form="cart-update-form" class="px-6 py-2 border border-slate-200 rounded-xl hover:bg-slate-50 transition">Mettre à jour le panier</button>
        <div class="text-right">
            @if(($discount ?? 0) > 0)
            <p class="text-slate-600">Sous-total : {{ number_format($subtotal ?? 0, 2, ',', ' ') }} €</p>
            <p class="text-emerald-600 font-medium">Réduction : −{{ number_format($discount ?? 0, 2, ',', ' ') }} €</p>
            @endif
            <p class="text-2xl font-bold text-slate-900">Total : {{ number_format($total ?? $subtotal ?? 0, 2, ',', ' ') }} €</p>
            <a href="{{ route('ecommerce.checkout') }}" class="inline-block mt-4 px-8 py-3 bg-primary-500 text-white rounded-xl font-semibold hover:bg-primary-600 transition">Commander</a>
        </div>
    </div>
    <p class="mt-6"><a href="{{ route('ecommerce.index') }}" class="text-slate-500 hover:text-slate-900">← Continuer mes achats</a></p>
    @endif
</div>
@endsection
