@extends('layouts.app')

@section('title', 'Đặt hàng thành công - XING NEW')

@section('content')
<div class="bg-slate-50 py-20 min-h-screen">
    <div class="container mx-auto px-4 text-center">
        <div class="max-w-2xl mx-auto bg-white rounded-3xl p-12 shadow-sm">
            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-8 text-green-600">
                <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
            </div>
            
            <h1 class="text-3xl font-bold text-slate-900 mb-4">Đặt hàng thành công!</h1>
            <p class="text-slate-600 text-lg mb-8">
                Cảm ơn <strong>{{ $order->customer_name }}</strong> đã tin tưởng XING NEW. <br>
                Đơn hàng <strong>#{{ $order->order_number }}</strong> của bạn đang được xử lý.
            </p>

            <div class="bg-slate-50 rounded-2xl p-6 mb-8 text-left space-y-3">
                <div class="flex justify-between text-sm">
                    <span class="text-slate-500">Người nhận:</span>
                    <span class="font-bold text-slate-900">{{ $order->customer_name }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-slate-500">Số điện thoại:</span>
                    <span class="font-bold text-slate-900">{{ $order->customer_phone }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-slate-500">Địa chỉ:</span>
                    <span class="font-bold text-slate-900">{{ $order->customer_address }}</span>
                </div>
                <div class="flex justify-between text-base pt-3 border-t border-slate-200">
                    <span class="font-bold text-slate-900">Tổng thanh toán:</span>
                    <span class="font-bold text-blue-600">{{ number_format($order->total_amount, 0, ',', '.') }}đ</span>
                </div>
            </div>

            <p class="text-slate-500 text-sm mb-10">Chúng tôi sẽ liên hệ với bạn trong vòng 24h để xác nhận đơn hàng.</p>
            
            <div class="flex flex-col md:flex-row gap-4 justify-center">
                @auth
                    <a href="{{ route('orders.index') }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-10 py-4 rounded-xl shadow-lg shadow-blue-500/30 transition-all transform hover:-translate-y-1">
                        Xem đơn hàng của tôi
                    </a>
                @else
                    <a href="{{ route('home') }}" class="bg-slate-900 hover:bg-slate-800 text-white font-bold px-10 py-4 rounded-xl shadow-lg transition-all transform hover:-translate-y-1">
                        Về trang chủ
                    </a>
                @endauth
                <a href="{{ route('products.index') }}" class="bg-white hover:bg-slate-50 text-slate-700 font-semibold px-10 py-4 rounded-xl border border-slate-200 transition-all">
                    Tiếp tục mua sắm
                </a>
            </div>
        </div>
    </div>
</div>
@endsection