@extends('layouts.admin')
@section('title', 'Commande ' . $order->order_number)

@section('content')

<div class="mx-auto max-w-6xl space-y-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div class="flex items-start gap-3">
            <a href="{{ route('admin.orders.index') }}" class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-200 bg-white text-gray-500 shadow-sm transition-colors hover:border-gray-300 hover:text-gray-800 hover:bg-gray-50" title="Retour aux commandes">
                <i class="fas fa-arrow-left text-sm"></i>
            </a>
            <div>
                <div class="flex flex-wrap items-center gap-2 sm:gap-3">
                    <h2 class="text-xl font-bold tracking-tight text-gray-900">Commande</h2>
                    <span class="text-xl font-bold text-blue-600">{{ $order->order_number }}</span>
                    <span class="inline-flex rounded-full px-3 py-1 text-xs font-semibold {{ $order->status_badge }}">{{ $order->status_label }}</span>
                </div>
                <p class="mt-1 text-sm text-gray-500">Passée le {{ $order->created_at->format('d/m/Y à H:i') }}</p>
            </div>
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
                <div class="border-b border-gray-100 bg-gray-50/80 px-5 py-4 sm:px-6">
                    <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-blue-600"><i class="fas fa-user text-xs"></i></span>
                        Informations client
                    </h3>
                </div>
                <div class="p-5 sm:p-6">
                    <dl class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500">Nom</dt>
                            <dd class="mt-1 text-sm font-semibold text-gray-900">{{ $order->customer_name }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500">Email</dt>
                            <dd class="mt-1 text-sm font-semibold text-gray-900 break-all">{{ $order->email }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500">Téléphone</dt>
                            <dd class="mt-1 text-sm font-semibold text-gray-900">{{ $order->phone }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500">Ville</dt>
                            <dd class="mt-1 text-sm font-semibold text-gray-900">{{ $order->city }}{{ $order->wilaya ? ', ' . $order->wilaya : '' }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500">Adresse</dt>
                            <dd class="mt-1 text-sm font-medium text-gray-800">{{ $order->address }}</dd>
                        </div>
                        @if($order->notes)
                        <div class="sm:col-span-2 rounded-xl bg-amber-50/80 border border-amber-100 px-4 py-3">
                            <dt class="text-xs font-semibold uppercase tracking-wide text-amber-800">Notes client</dt>
                            <dd class="mt-1 text-sm text-amber-950">{{ $order->notes }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>
            </div>

            <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
                <div class="border-b border-gray-100 bg-gray-50/80 px-5 py-4 sm:px-6">
                    <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600"><i class="fas fa-list text-xs"></i></span>
                        Articles commandés
                    </h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-100 bg-gray-50/50 text-xs font-semibold uppercase tracking-wide text-gray-500">
                                <th class="px-5 py-3 text-left">Produit</th>
                                <th class="px-5 py-3 text-center">Qté</th>
                                <th class="px-5 py-3 text-right">Prix unit.</th>
                                <th class="px-5 py-3 text-right">Sous-total</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($order->items as $item)
                            <tr class="hover:bg-gray-50/50">
                                <td class="px-5 py-4">
                                    <div class="flex items-center gap-3">
                                        @if($item->product && $item->product->image)
                                            <img src="{{ $item->product->image_url }}" alt="" class="h-11 w-11 shrink-0 rounded-lg object-cover ring-1 ring-gray-100">
                                        @else
                                            <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-400">
                                                <i class="fas fa-mobile-alt text-sm"></i>
                                            </div>
                                        @endif
                                        <span class="font-medium text-gray-900">{{ $item->product_name }}</span>
                                    </div>
                                </td>
                                <td class="px-5 py-4 text-center font-semibold text-gray-800">{{ $item->quantity }}</td>
                                <td class="px-5 py-4 text-right text-gray-600">{{ number_format($item->price, 2) }} FCFA</td>
                                <td class="px-5 py-4 text-right font-bold text-gray-900">{{ number_format($item->subtotal, 2) }} FCFA</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="border-t-2 border-gray-100 bg-gray-50/90">
                                <td colspan="3" class="px-5 py-4 text-right text-sm font-extrabold text-gray-900">Total</td>
                                <td class="px-5 py-4 text-right text-base font-extrabold text-blue-700">{{ number_format($order->total_amount, 2) }} FCFA</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
                <div class="border-b border-gray-100 bg-gray-50/80 px-5 py-4">
                    <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-50 text-amber-600"><i class="fas fa-edit text-xs"></i></span>
                        Mettre à jour le statut
                    </h3>
                </div>
                <form action="{{ route('admin.orders.update', $order) }}" method="POST" class="space-y-4 p-5 sm:p-6">
                    @csrf
                    @method('PATCH')
                    <div>
                        <label for="order-status-field" class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-500">Nouveau statut</label>
                        <select id="order-status-field" name="status" class="w-full rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500">
                            <option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>En attente</option>
                            <option value="confirmed" {{ $order->status === 'confirmed' ? 'selected' : '' }}>Confirmée</option>
                            <option value="shipped" {{ $order->status === 'shipped' ? 'selected' : '' }}>Expédiée</option>
                            <option value="delivered" {{ $order->status === 'delivered' ? 'selected' : '' }}>Livrée</option>
                            <option value="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Annulée</option>
                        </select>
                        <p class="mt-2 text-xs text-gray-500">Le client peut être informé selon vos processus (email, SMS, etc.).</p>
                    </div>
                    <button type="submit" class="flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-700">
                        <i class="fas fa-save"></i> Enregistrer le statut
                    </button>
                </form>
            </div>

            <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm p-5 sm:p-6">
                <h3 class="text-sm font-bold text-gray-900 mb-4">Récapitulatif</h3>
                <dl class="space-y-3 text-sm">
                    <div class="flex justify-between gap-4 border-b border-gray-100 pb-3">
                        <dt class="text-gray-500">Créée le</dt>
                        <dd class="font-medium text-gray-900 text-right">{{ $order->created_at->format('d/m/Y à H:i') }}</dd>
                    </div>
                    <div class="flex justify-between gap-4 border-b border-gray-100 pb-3">
                        <dt class="text-gray-500">Dernière mise à jour</dt>
                        <dd class="font-medium text-gray-900 text-right">{{ $order->updated_at->format('d/m/Y à H:i') }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-gray-500">Nombre d’articles</dt>
                        <dd class="font-semibold text-gray-900">{{ $order->items->count() }} référence(s)</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</div>

@endsection