@extends('layouts.app')
@section('title', 'Order Placed Successfully | Saree Store')

@section('content')
<div class="ul-container py-5">
    <div class="max-width-600 mx-auto text-center p-5 bg-white rounded-4 border shadow-sm" style="max-width: 650px;">
        <div class="rounded-circle bg-success text-white d-inline-flex align-items-center justify-content-center mb-3 shadow" style="width: 80px; height: 80px; background: #198754 !important;">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
        </div>

        <h2 class="fw-bold mb-2" style="color: #2B1820;">Payment Successful & Order Placed!</h2>
        <p class="text-muted mb-4">Thank you for your purchase. Your order has been placed successfully via Cashfree Payments.</p>

        <div class="p-3 bg-light rounded-3 text-start mb-4 border">
            <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">Order Number:</span>
                <strong class="text-dark">{{ $order->order_number }}</strong>
            </div>
            <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">Total Paid:</span>
                <strong class="text-danger">₹{{ number_format($order->total_amount, 2) }}</strong>
            </div>
            <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">Payment Status:</span>
                <span class="badge bg-success">{{ $order->payment_status }}</span>
            </div>
            <div class="d-flex justify-content-between">
                <span class="text-muted">Order Status:</span>
                <span class="badge bg-primary">{{ $order->status }}</span>
            </div>
        </div>

        <div class="d-flex justify-content-center gap-3">
            <a href="{{ route('profile') }}" class="btn btn-outline-danger px-4 py-2 rounded-3 fw-semibold">View Order History</a>
            <a href="{{ route('shop') }}" class="btn btn-danger px-4 py-2 rounded-3 fw-semibold">Continue Shopping</a>
        </div>
    </div>
</div>
@endsection