@extends('site.layout')

@section('content')
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="bg-white border border-gray-200 rounded-xl p-8">
            <div class="text-2xl font-semibold text-gray-900">Thank you</div>
            <div class="mt-2 text-sm text-gray-600">Your order has been placed successfully.</div>

            <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                <div>
                    <div class="text-gray-500">Order number</div>
                    <div class="font-semibold">{{ $order->order_number }}</div>
                </div>
                <div>
                    <div class="text-gray-500">Status</div>
                    <div class="font-semibold">{{ ucfirst($order->status) }}</div>
                </div>
                <div>
                    <div class="text-gray-500">Schedule</div>
                    <div class="font-semibold">{{ $order->scheduled_date->format('d M Y') }} • {{ $order->timeSlot?->label }}</div>
                </div>
                <div>
                    <div class="text-gray-500">Total</div>
                    <div class="font-semibold">৳{{ number_format((float) $order->total, 2) }}</div>
                </div>
            </div>

            <div class="mt-8 border-t border-gray-200 pt-6">
                <div class="text-sm font-semibold">Items</div>
                <div class="mt-4 space-y-2 text-sm">
                    @foreach ($order->items as $item)
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                {{ $item->service_name }}
                                <div class="text-xs text-gray-500">x{{ $item->quantity }}</div>
                            </div>
                            <div class="font-semibold">৳{{ number_format((float) $item->line_total, 2) }}</div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="mt-8 flex flex-col sm:flex-row gap-3">
                <a href="{{ route('home') }}" class="inline-flex items-center justify-center rounded-md bg-red-700 px-4 py-3 text-white text-sm font-semibold hover:bg-red-800">Back to home</a>
                <a href="{{ route('services.index') }}" class="inline-flex items-center justify-center rounded-md border border-gray-200 px-4 py-3 text-sm font-semibold hover:bg-gray-50">Browse services</a>
            </div>
        </div>
    </div>
@endsection