@extends('layouts.app')

@section('content')
<div class="w-full max-w-2xl xl:w-1/2 mx-auto my-8 p-4 sm:p-6 border-2 border-green-300 rounded-xl bg-white shadow-lg min-w-[220px]">
    <h1 class="text-3xl font-bold mb-8 text-green-700">Thank You!</h1>
    <div class="mb-6 text-lg text-gray-800">
        <p>Your payment was received successfully.</p>
        <p><strong>Payment Status:</strong> 
            @if(isset($stripeInfo['status']))
                {{ str_replace('_', ' ', ucfirst($stripeInfo['status'])) }}
            @else
                Success
            @endif
        </p>
        <p class="mt-4"><strong>Order Number:</strong> 
            @if(isset($stripeInfo['order_number']))
                <span class="font-bold text-blue-700">#{{ $stripeInfo['order_number'] }}</span>
            @else
                <span class="text-gray-400 italic">Not available</span>
            @endif
        </p>
        <p class="mt-2"><strong>Payment Method (Stripe ID):</strong> 
            @if(isset($stripeInfo['payment_method']))
                <span class="font-mono text-xs bg-gray-100 px-2 py-1 rounded select-all">{{ $stripeInfo['payment_method'] }}</span>
            @else
                <span class="text-gray-400 italic">Not available</span>
            @endif
        </p>
        @if(isset($stripeInfo['latest_invoice']) && $stripeInfo['latest_invoice'])
        <p class="mt-2 text-sm text-gray-700">
            <strong>Stripe TX_id:</strong> <span class="font-mono text-xs">{{ $stripeInfo['latest_invoice'] }}</span>
        </p>
        @endif
    </div>
    <a href="/" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg shadow transition text-lg">Back to Home</a>
</div>
@endsection