@extends('layouts.app')

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

@section('content')
<div class="max-w-3xl mx-auto px-4 py-16 text-center">
    <div class="bg-white rounded-2xl shadow-sm p-10">
        <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <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"/>
            </svg>
        </div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Order Confirmed!</h1>
        <p class="text-gray-500 mb-6">Thank you for your purchase. Your order has been placed successfully.</p>

        <div class="bg-gray-50 rounded-xl p-4 mb-6 text-left">
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <p class="text-gray-500">Order Number</p>
                    <p class="font-bold text-gray-800">#{{ $order->order_number }}</p>
                </div>
                <div>
                    <p class="text-gray-500">Payment Status</p>
                    <p class="font-bold {{ $order->payment_status === 'paid' ? 'text-green-600' : 'text-yellow-600' }}">
                        {{ ucfirst($order->payment_status) }}
                    </p>
                </div>
                <div>
                    <p class="text-gray-500">Total Amount</p>
                    <p class="font-bold text-red-600">${{ number_format($order->total, 2) }}</p>
                </div>
                <div>
                    <p class="text-gray-500">Shipping To</p>
                    <p class="font-bold text-gray-800">{{ $order->shipping_city }}, {{ $order->shipping_country }}</p>
                </div>
            </div>
        </div>

        <div class="mb-6">
            <h3 class="font-semibold text-gray-700 mb-3">Items Ordered</h3>
            @foreach($order->items as $item)
            <div class="flex items-center gap-3 py-2 border-b last:border-0">
                <div class="flex-1 text-left">
                    <p class="text-sm font-medium">{{ $item->product_name }}</p>
                    <p class="text-xs text-gray-500">Qty: {{ $item->quantity }} × ${{ number_format($item->price, 2) }}</p>
                </div>
                <p class="font-bold text-sm">${{ number_format($item->subtotal, 2) }}</p>
            </div>
            @endforeach
        </div>

        <div class="flex gap-4 justify-center">
            <a href="{{ route('orders.show', $order->order_number) }}" class="bg-red-600 text-white px-6 py-3 rounded-lg hover:bg-red-700 font-semibold">
                View Order Details
            </a>
            <a href="{{ route('shop.index') }}" class="bg-gray-100 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-200 font-semibold">
                Continue Shopping
            </a>
        </div>
    </div>
</div>
@endsection