@extends('front::layouts.master')

@section('title', 'Thank You')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-7 col-lg-6">
            <div class="card shadow-lg border-0 text-center">
                <div class="card-body p-4">

                    <div class="mb-3">
                        <span class="display-4 text-success">✔</span>
                    </div>

                    <h2 class="fw-bold text-success">Order Confirmed</h2>
                    <p class="text-muted">Thank you! Your payment has been completed successfully.</p>

                    <hr>

                    <div class="text-start">
                        <p class="mb-2">
                            <strong>Order Number:</strong>
                            <span class="float-end">{{ $order->order_number }}</span>
                        </p>
                        <p class="mb-2">
                            <strong>Total Amount:</strong>
                            <span class="float-end text-success">
                                ${{ number_format($order->total_amount,2) }}
                            </span>
                        </p>
                        <p class="mb-2">
                            <strong>Payment Method:</strong>
                            <span class="float-end">
                                {{ ucfirst($order->payment_method) }}
                            </span>
                        </p>
                        <p class="mb-0">
                            <strong>Status:</strong>
                            <span class="float-end badge bg-success">
                                {{ ucfirst($order->payment_status) }}
                            </span>
                        </p>
                    </div>

                    <a href="{{ route('front.index') }}" class="btn btn-success w-100 mt-4" style="color:#fff;">
                        Back to Home
                    </a>

                </div>
            </div>
        </div>
    </div>
</div>

@endsection