@extends('layouts.app')

@section('title', 'Order Confirmation #' . $order->order_number)

@section('content')
<section class="py-16 bg-cream-50">
    <div class="container-shop max-w-3xl">
        <div class="bg-white border border-cream-200 rounded-2xl p-8 sm:p-12 text-center shadow-sm">
            <div class="w-16 h-16 bg-moss-100 text-moss-700 rounded-full flex items-center justify-center mx-auto mb-6">
                <x-icon name="check" class="h-8 w-8" />
            </div>

            <h1 class="font-serif text-3xl sm:text-4xl font-semibold text-ink-900">Thank You For Your Order!</h1>
            <p class="mt-2 text-ink-600 text-sm sm:text-base">We've received your order and are preparing your farm-fresh skincare items.</p>

            <div class="mt-6 inline-block bg-cream-100 border border-cream-300 px-5 py-2.5 rounded-lg text-sm">
                Order Reference: <strong class="text-moss-800 font-mono tracking-wider">{{ $order->order_number }}</strong>
            </div>

            <div class="mt-10 text-left border-t border-cream-200 pt-8 space-y-6">
                <h2 class="font-serif text-xl font-medium">Order Details</h2>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 text-sm">
                    <div>
                        <strong class="text-xs uppercase tracking-wider text-ink-400 block mb-1">Customer Contact</strong>
                        <p class="font-semibold text-ink-900">{{ $order->customer_name }}</p>
                        <p class="text-ink-600">{{ $order->customer_email }}</p>
                        <p class="text-ink-600">{{ $order->customer_phone }}</p>
                    </div>
                    <div>
                        <strong class="text-xs uppercase tracking-wider text-ink-400 block mb-1">Shipping Destination</strong>
                        <p class="text-ink-700">{{ $order->shipping_address }}</p>
                        <p class="text-ink-700">{{ $order->city }}, {{ $order->state }} - {{ $order->pincode }}</p>
                    </div>
                </div>

                <div class="border-t border-cream-200 pt-6">
                    <strong class="text-xs uppercase tracking-wider text-ink-400 block mb-3">Order Items</strong>
                    <div class="divide-y divide-cream-200">
                        @foreach($order->items as $item)
                            <div class="py-3 flex justify-between items-center text-sm">
                                <div>
                                    <p class="font-medium text-ink-900">{{ $item->product_name }}</p>
                                    <p class="text-xs text-ink-500">Size: {{ $item->size }} &middot; Qty: {{ $item->quantity }}</p>
                                </div>
                                <span class="font-semibold text-ink-900">₹{{ number_format($item->subtotal, 2) }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="border-t border-cream-200 pt-4 flex justify-between items-center text-base">
                    <span class="font-semibold text-ink-900">Total Amount Payable ({{ strtoupper($order->payment_method) }})</span>
                    <span class="font-serif text-2xl font-bold text-moss-800">₹{{ number_format($order->total_amount, 2) }}</span>
                </div>
            </div>

            <div class="mt-10 flex flex-wrap gap-4 justify-center">
                <a href="{{ route('order.track', ['order_number' => $order->order_number]) }}" class="btn-primary flex items-center gap-2">
                    <x-icon name="truck" class="h-4 w-4" /> Track Order Progress
                </a>
                <a href="{{ route('shop') }}" class="btn-outline">Continue Shopping</a>
            </div>
        </div>
    </div>
</section>
@endsection