@extends('layouts.admin')

@section('title', 'Commande '.$order->order_number)
@section('page-title', 'Détail commande')

@section('content')

<div class="max-w-3xl mx-auto">
    <div class="mb-6">
        <a href="{{ route('admin.orders.index') }}" class="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-primary transition-colors">
            <i class="fas fa-arrow-left"></i> Retour aux commandes
        </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-5">
        <!-- Statut commande -->
        <div class="md:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
            <div class="flex items-start justify-between mb-4">
                <div>
                    <h2 class="font-semibold text-gray-800 text-lg">{{ $order->order_number }}</h2>
                    <p class="text-xs text-gray-400 mt-0.5">Passée le {{ $order->created_at->format('d/m/Y à H:i') }}</p>
                </div>
                <span class="inline-block px-3 py-1 rounded-full text-sm font-medium
                    @if($order->status === 'pending') bg-yellow-100 text-yellow-700
                    @elseif($order->status === 'confirmed') bg-blue-100 text-blue-700
                    @elseif($order->status === 'processing') bg-indigo-100 text-indigo-700
                    @elseif($order->status === 'shipped') bg-purple-100 text-purple-700
                    @elseif($order->status === 'delivered') bg-green-100 text-green-700
                    @elseif($order->status === 'cancelled') bg-red-100 text-red-700
                    @else bg-gray-100 text-gray-700 @endif">
                    {{ $order->status_label }}
                </span>
            </div>

            <!-- Changer statut -->
            <form action="{{ route('admin.orders.status', $order) }}" method="POST" class="flex gap-3">
                @csrf @method('PATCH')
                <select name="status" class="flex-1 border border-gray-200 rounded-xl px-4 py-2.5 text-sm bg-white focus:ring-2 focus:ring-primary outline-none">
                    @foreach(['pending'=>'En attente','confirmed'=>'Confirmée','processing'=>'En traitement','shipped'=>'Expédiée','delivered'=>'Livrée','cancelled'=>'Annulée'] as $val => $lbl)
                    <option value="{{ $val }}" {{ $order->status === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                    @endforeach
                </select>
                <button type="submit" class="px-5 py-2.5 bg-primary text-white rounded-xl text-sm font-medium hover:bg-primary-dark transition-all">
                    Mettre à jour
                </button>
            </form>
        </div>

        <!-- Total -->
        <div class="bg-primary text-white rounded-2xl p-5 flex flex-col justify-center items-center text-center">
            <p class="text-white/70 text-sm mb-1">Montant total</p>
            <p class="font-serif text-3xl font-bold">{{ number_format($order->total_amount, 0, ',', ' ') }}</p>
            <p class="text-white/70 text-sm mt-0.5">FCFA</p>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
        <!-- Informations client -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
            <h3 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
                <i class="fas fa-user text-primary"></i> Informations client
            </h3>
            <div class="space-y-2 text-sm">
                <div class="flex items-start gap-2">
                    <i class="fas fa-user text-gray-400 mt-0.5 w-4"></i>
                    <span class="text-gray-700">{{ $order->customer_name }}</span>
                </div>
                <div class="flex items-start gap-2">
                    <i class="fas fa-envelope text-gray-400 mt-0.5 w-4"></i>
                    <span class="text-gray-700">{{ $order->customer_email }}</span>
                </div>
                <div class="flex items-start gap-2">
                    <i class="fas fa-phone text-gray-400 mt-0.5 w-4"></i>
                    <span class="text-gray-700">{{ $order->customer_phone }}</span>
                </div>
                <div class="flex items-start gap-2">
                    <i class="fas fa-map-marker-alt text-gray-400 mt-0.5 w-4"></i>
                    <span class="text-gray-700">{{ $order->customer_address }}</span>
                </div>
                @if($order->notes)
                <div class="flex items-start gap-2">
                    <i class="fas fa-comment text-gray-400 mt-0.5 w-4"></i>
                    <span class="text-gray-600 italic">{{ $order->notes }}</span>
                </div>
                @endif
            </div>
        </div>

        <!-- Articles commandés -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
            <h3 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
                <i class="fas fa-shopping-bag text-primary"></i> Articles commandés
            </h3>
            <div class="space-y-3">
                @foreach($order->items as $item)
                <div class="flex items-center justify-between py-2 border-b border-gray-50 last:border-0">
                    <div>
                        <p class="font-medium text-gray-800 text-sm">{{ $item->product_name }}</p>
                        <p class="text-xs text-gray-400">{{ $item->quantity }} × {{ number_format($item->unit_price, 0, ',', ' ') }} FCFA</p>
                    </div>
                    <span class="font-bold text-gray-800">{{ number_format($item->subtotal, 0, ',', ' ') }} FCFA</span>
                </div>
                @endforeach
                <div class="flex items-center justify-between pt-2 font-bold">
                    <span>Total</span>
                    <span class="text-primary">{{ number_format($order->total_amount, 0, ',', ' ') }} FCFA</span>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection