@extends('layouts.app')

@section('title', 'Order Confirmed - Saba Remedies')

@section('content')
<section class="py-16 bg-slate-50">
    <div class="max-w-2xl mx-auto px-4">
        <div class="bg-white rounded-3xl border border-slate-200 p-8 sm:p-12 text-center shadow-sm space-y-6">
            
            <div class="w-20 h-20 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center text-4xl mx-auto">
                <i class="fa-solid fa-circle-check"></i>
            </div>

            <div>
                <span class="text-xs font-bold uppercase tracking-wider text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full">Order Successful</span>
                <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">Thank You For Your Order!</h1>
                <p class="text-xs text-slate-500 mt-1">We have received your order and are preparing your authentic Unani remedies for shipment.</p>
            </div>

            <!-- Order Summary Card -->
            <div class="bg-slate-50 p-6 rounded-2xl border border-slate-200 text-left text-xs space-y-3">
                <div class="flex justify-between border-b border-slate-200 pb-2">
                    <span class="text-slate-500">Order ID:</span>
                    <span class="font-extrabold text-slate-900">{{ $order->order_id }}</span>
                </div>
                <div class="flex justify-between border-b border-slate-200 pb-2">
                    <span class="text-slate-500">Delivery To:</span>
                    <span class="font-bold text-slate-800">{{ $order->name }} ({{ $order->phone }})</span>
                </div>
                <div class="flex justify-between border-b border-slate-200 pb-2">
                    <span class="text-slate-500">Shipping Address:</span>
                    <span class="text-slate-800 text-right max-w-xs">{{ $order->address }}, {{ $order->city }}, {{ $order->state }} - {{ $order->pincode }}</span>
                </div>
                <div class="flex justify-between border-b border-slate-200 pb-2">
                    <span class="text-slate-500">Payment Method:</span>
                    <span class="font-bold text-slate-800 uppercase">{{ $order->payment_method }}</span>
                </div>
                <div class="flex justify-between pt-1 text-sm">
                    <span class="font-bold text-slate-900">Total Paid / Payable:</span>
                    <span class="font-extrabold text-emerald-700">₹{{ $order->total_price }}</span>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
                <a href="{{ route('payment.invoice', ['order_id' => $order->order_id]) }}" class="w-full sm:w-auto bg-slate-800 hover:bg-slate-900 text-white font-bold px-6 py-3 rounded-xl text-xs transition-colors flex items-center justify-center gap-2">
                    <i class="fa-solid fa-file-invoice"></i> View &amp; Print Invoice
                </a>
                <a href="{{ route('home') }}" class="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-3 rounded-xl text-xs transition-colors flex items-center justify-center gap-2">
                    <i class="fa-solid fa-house"></i> Continue Shopping
                </a>
            </div>

        </div>
    </div>
</section>
@endsection