@extends('layouts.app')
@section('title', 'Commande confirmée')

@section('content')

<div class="max-w-3xl mx-auto px-4 sm:px-6 py-16">

    {{-- Success Header --}}
    <div class="text-center mb-10">
        <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-5">
            <i class="fas fa-check-circle text-5xl text-green-500"></i>
        </div>
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">Commande Confirmée !</h1>
        <p class="text-gray-500 text-lg">Merci pour votre commande. Notre équipe vous contactera bientôt.</p>
    </div>

    {{-- Order Details --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8 mb-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-3">
            <div>
                <p class="text-sm text-gray-500">Numéro de commande</p>
                <p class="text-xl font-extrabold text-blue-700">{{ $order->order_number }}</p>
            </div>
            <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold {{ $order->status_badge }}">
                <i class="fas fa-clock mr-1.5"></i> {{ $order->status_label }}
            </span>
        </div>

        <div class="grid sm:grid-cols-2 gap-5 mb-6 text-sm">
            <div>
                <p class="text-gray-500 mb-0.5">Client</p>
                <p class="font-semibold text-gray-800">{{ $order->customer_name }}</p>
            </div>
            <div>
                <p class="text-gray-500 mb-0.5">Email</p>
                <p class="font-semibold text-gray-800">{{ $order->email }}</p>
            </div>
            <div>
                <p class="text-gray-500 mb-0.5">Téléphone</p>
                <p class="font-semibold text-gray-800">{{ $order->phone }}</p>
            </div>
            <div>
                <p class="text-gray-500 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-500 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-500 mb-0.5">Notes</p>
                <p class="text-gray-700">{{ $order->notes }}</p>
            </div>
            @endif
        </div>

        <div class="border-t border-gray-100 pt-5">
            <h3 class="font-bold text-gray-900 mb-3">Articles commandés</h3>
            <div class="space-y-2">
                @foreach($order->items as $item)
                <div class="flex justify-between text-sm">
                    <span class="text-gray-700">{{ $item->product_name }} <span class="text-gray-400">× {{ $item->quantity }}</span></span>
                    <span class="font-semibold text-gray-800">{{ number_format($item->subtotal, 2) }} FCFA</span>
                </div>
                @endforeach
            </div>
            <div class="border-t border-gray-100 mt-4 pt-4 flex justify-between font-extrabold text-lg">
                <span>Total</span>
                <span class="text-blue-700">{{ number_format($order->total_amount, 2) }} FCFA</span>
            </div>
        </div>
    </div>

    {{-- Info Box --}}
    <div class="bg-amber-50 border border-amber-200 rounded-2xl p-5 mb-8 text-sm text-amber-800">
        <div class="flex items-start gap-3">
            <i class="fas fa-info-circle mt-0.5 flex-shrink-0 text-amber-500"></i>
            <div>
                <p class="font-semibold mb-1">Prochaines étapes</p>
                <ul class="space-y-1 list-disc ml-4 text-amber-700">
                    <li>Notre équipe examinera votre commande</li>
                    <li>Vous serez contacté(e) par téléphone pour la confirmation</li>
                    <li>Livraison estimée : 24 à 72 heures</li>
                    <li>Paiement à la livraison</li>
                </ul>
            </div>
        </div>
    </div>

    {{-- Actions --}}
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="{{ route('home') }}" class="btn-primary text-white font-semibold px-8 py-3 rounded-full inline-flex items-center justify-center gap-2">
            <i class="fas fa-home"></i> Retour à l'accueil
        </a>
        <a href="{{ route('products') }}" class="bg-white border border-gray-200 text-gray-700 font-semibold px-8 py-3 rounded-full inline-flex items-center justify-center gap-2 hover:bg-gray-50 transition-colors">
            <i class="fas fa-shopping-bag"></i> Continuer les achats
        </a>
    </div>
</div>

@endsection