@extends('layouts.app')

@section('title', 'Order Confirmed')

@section('content')
<div class="max-w-2xl mx-auto px-4 py-16 text-center">
    <div class="royal-card p-8">
        <div class="w-20 h-20 mx-auto mb-6 bg-green-100 rounded-full flex items-center justify-center">
            <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        </div>

        <h1 class="text-3xl font-bold mb-4">Order Confirmed!</h1>
        <p class="text-gray-600 mb-6">Thank you for your purchase, {{ auth()->user()->name }}.</p>

        <div class="bg-gray-50 rounded-lg p-6 mb-6">
            <p class="text-sm text-gray-500 mb-2">Order Number</p>
            <p class="text-2xl font-bold text-purple-600">{{ $order->order_number }}</p>
        </div>

        <div class="space-y-3 text-sm mb-8">
            <div class="flex justify-between"><span class="text-gray-500">Total Amount:</span><span class="font-semibold">{{ price($order->total) }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Payment Method:</span><span class="capitalize">{{ $order->payment_method }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Status:</span><span class="capitalize font-semibold">{{ $order->status }}</span></div>
        </div>

        <div class="flex gap-4">
            <a href="{{ route('customer.orders.show', $order->order_number) }}" class="flex-1 royal-btn px-6 py-3">View Order</a>
            <a href="{{ route('products.index') }}" class="flex-1 px-6 py-3 border rounded-lg hover:bg-gray-100">Continue Shopping</a>
        </div>
    </div>
</div>
@endsection