@extends('admin.layout')

@section('title', 'Commande ' . $order->number)
@section('header', 'Commande ' . $order->number)

@section('content')
<div class="max-w-3xl w-full space-y-6">
    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h3 class="font-semibold text-slate-800 mb-4">Client</h3>
        <p><strong>{{ $order->customer_name }}</strong></p>
        <p class="text-slate-600">{{ $order->customer_email }}</p>
        @if($order->customer_phone)<p class="text-slate-600">{{ $order->customer_phone }}</p>@endif
        @if($order->customer_address)<p class="text-slate-600 mt-2">{{ $order->customer_address }}</p>@endif
        @if($order->customer_postal_code || $order->customer_city)<p class="text-slate-600">{{ $order->customer_postal_code }} {{ $order->customer_city }}</p>@endif
        @if($order->shippingMethod)
        <p class="text-slate-600 mt-2"><strong>Livraison :</strong> {{ $order->shippingMethod->name }} ({{ number_format($order->shipping_cost, 2, ',', ' ') }} €)</p>
        @if($order->shipping_relay_label)<p class="text-slate-600 text-sm">Point relais : {{ $order->shipping_relay_label }}</p>@endif
        @endif
    </div>

    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h3 class="font-semibold text-slate-800 mb-4">Articles</h3>
        <div class="overflow-x-auto">
        <table class="w-full min-w-[320px]">
            <thead class="text-left text-sm text-slate-500 border-b">
                <tr>
                    <th class="pb-2">Produit</th>
                    <th class="pb-2 text-right">Qté</th>
                    <th class="pb-2 text-right">Prix unit.</th>
                    <th class="pb-2 text-right">Total</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @foreach($order->items ?? [] as $item)
                <tr>
                    <td class="py-3">{{ $item['name'] ?? '—' }}</td>
                    <td class="py-3 text-right">{{ $item['qty'] ?? 0 }}</td>
                    <td class="py-3 text-right">{{ number_format($item['price'] ?? 0, 2, ',', ' ') }} €</td>
                    <td class="py-3 text-right font-medium">{{ number_format(($item['price'] ?? 0) * ($item['qty'] ?? 0), 2, ',', ' ') }} €</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>
        @if($order->discount_amount > 0)
        <p class="mt-4 text-right text-emerald-600">Réduction @if($order->coupon_code)({{ $order->coupon_code }})@endif : −{{ number_format($order->discount_amount, 2, ',', ' ') }} €</p>
        @endif
        <p class="mt-4 text-right text-lg font-bold">{{ number_format($order->total, 2, ',', ' ') }} €</p>
    </div>

    @if($order->notes)
    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h3 class="font-semibold text-slate-800 mb-2">Notes</h3>
        <p class="text-slate-600">{{ $order->notes }}</p>
    </div>
    @endif

    <div class="bg-white rounded-2xl border border-slate-200 p-4 sm:p-6">
        <h3 class="font-semibold text-slate-800 mb-4">Changer le statut</h3>
        <form method="POST" action="{{ route('admin.ecommerce.orders.status', $order) }}" class="flex flex-wrap gap-2 items-center">
            @csrf
            <select name="status" class="px-4 py-2 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500">
                <option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>En attente</option>
                <option value="paid" {{ $order->status === 'paid' ? 'selected' : '' }}>Payée</option>
                <option value="shipped" {{ $order->status === 'shipped' ? 'selected' : '' }}>Expédiée</option>
                <option value="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Annulée</option>
            </select>
            <button type="submit" class="px-6 py-2 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">Mettre à jour</button>
        </form>
    </div>

    <a href="{{ route('admin.ecommerce.orders') }}" class="inline-block text-slate-600 hover:text-slate-900">← Retour aux commandes</a>
</div>
@endsection
