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

@section('content')

<div class="max-w-4xl">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('admin.orders.index') }}" class="text-gray-400 hover:text-gray-600"><i class="fas fa-arrow-left"></i></a>
        <h2 class="text-lg font-bold text-gray-900">Commande <span class="text-blue-600">{{ $order->order_number }}</span></h2>
        <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $order->status_badge }}">{{ $order->status_label }}</span>
    </div>

    <div class="grid lg:grid-cols-3 gap-5">

        {{-- Customer Info --}}
        <div class="lg:col-span-2 space-y-5">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
                <h3 class="font-bold text-gray-900 mb-4 flex items-center gap-2"><i class="fas fa-user text-blue-500 text-sm"></i> Informations client</h3>
                <div class="grid sm:grid-cols-2 gap-4 text-sm">
                    <div><p class="text-gray-400 text-xs mb-0.5">Nom</p><p class="font-semibold text-gray-800">{{ $order->customer_name }}</p></div>
                    <div><p class="text-gray-400 text-xs mb-0.5">Email</p><p class="font-semibold text-gray-800">{{ $order->email }}</p></div>
                    <div><p class="text-gray-400 text-xs mb-0.5">Téléphone</p><p class="font-semibold text-gray-800">{{ $order->phone }}</p></div>
                    <div><p class="text-gray-400 text-xs mb-0.5">Ville</p><p class="font-semibold text-gray-800">{{ $order->city }}{{ $order->wilaya ? ', ' . $order->wilaya : '' }}</p></div>
                    <div class="sm:col-span-2"><p class="text-gray-400 text-xs mb-0.5">Adresse</p><p class="font-semibold text-gray-800">{{ $order->address }}</p></div>
                    @if($order->notes)
                    <div class="sm:col-span-2"><p class="text-gray-400 text-xs mb-0.5">Notes</p><p class="text-gray-700">{{ $order->notes }}</p></div>
                    @endif
                </div>
            </div>

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

        {{-- Status Update --}}
        <div class="space-y-5">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
                <h3 class="font-bold text-gray-900 mb-4 flex items-center gap-2"><i class="fas fa-edit text-amber-500 text-sm"></i> Changer le statut</h3>
                <form action="{{ route('admin.orders.update', $order) }}" method="POST" class="space-y-3">
                    @csrf @method('PATCH')
                    <select name="status" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                        <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>
                    <button type="submit" class="w-full bg-blue-600 text-white font-semibold py-2.5 rounded-xl text-sm hover:bg-blue-700 transition-colors">
                        <i class="fas fa-save mr-1"></i> Mettre à jour
                    </button>
                </form>
            </div>

            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 text-sm space-y-3">
                <h3 class="font-bold text-gray-900">Infos commande</h3>
                <div><p class="text-gray-400 text-xs">Créée le</p><p class="font-medium">{{ $order->created_at->format('d/m/Y à H:i') }}</p></div>
                <div><p class="text-gray-400 text-xs">Mise à jour</p><p class="font-medium">{{ $order->updated_at->format('d/m/Y à H:i') }}</p></div>
                <div><p class="text-gray-400 text-xs">Articles</p><p class="font-medium">{{ $order->items->count() }} article(s)</p></div>
            </div>
        </div>
    </div>
</div>

@endsection