@extends('layout.base')

@section('layout.base.header')
<div>
    <h3 class="text-3xl text-gray-800 font-bold">
        {{ __( 'Payment Successful' ) }}
    </h3>
    <p class="text-gray-600">
        {{ __( 'Your payment has been processed successfully.' ) }}
    </p>
</div>
@endsection

@section('layout.base.body')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Success Message -->
        <div class="bg-white rounded-lg shadow-md p-8 text-center">
            <!-- Success Icon -->
            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-6">
                <svg class="h-8 w-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
            </div>
            
            <h2 class="text-2xl font-bold text-gray-900 mb-4">
                {{ __( 'Payment Completed!' ) }}
            </h2>
            
            <div class="text-gray-600 mb-6">
                <p class="mb-2">{{ __( 'Thank you for your payment.' ) }}</p>
                <p class="text-sm">
                    {{ __( 'Order: :order', ['order' => $order->code] ) }}<br>
                    {{ __( 'Transaction: :ref', ['ref' => $transaction_ref]) }}
                </p>
            </div>
            
            <!-- Payment Details -->
            @if( isset($order->gastro_table) )
                <div class="bg-gray-50 rounded-lg p-4 mb-6">
                    <h3 class="font-semibold text-gray-900 mb-2">{{ __( 'Order Details' ) }}</h3>
                    <div class="text-sm text-gray-600">
                        <p>{{ __( 'Table: :table', ['table' => $order->gastro_table->name]) }}</p>
                        @if( $order->gastro_table->area )
                            <p>{{ __( 'Area: :area', ['area' => $order->gastro_table->area->name]) }}</p>
                        @endif
                        <p>{{ __( 'Order Code: :code', ['code' => $order->code]) }}</p>
                        <p>{{ __( 'Amount Paid: :amount', ['amount' => ns()->currency->define($order->total)]) }}</p>
                    </div>
                </div>
            @endif
            
            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                @if( isset($return_url) )
                    <a 
                        href="{{ $return_url }}"
                        class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                    >
                        <svg class="-ml-1 mr-3 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        {{ __( 'Back to Table Bill' ) }}
                    </a>
                @endif
                
                <button 
                    onclick="window.print()"
                    class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                >
                    <svg class="-ml-1 mr-3 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a1 1 0 001-1v-4a1 1 0 00-1-1H9a1 1 0 00-1 1v4a1 1 0 001 1z"></path>
                    </svg>
                    {{ __( 'Print Receipt' ) }}
                </button>
            </div>
            
            <!-- Additional Information -->
            <div class="mt-6 text-xs text-gray-500">
                <p>{{ __( 'Payment processed on :date', ['date' => now()->format('M d, Y \a\t H:i')]) }}</p>
                <p class="mt-1">{{ __( 'Keep this confirmation for your records.' ) }}</p>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-redirect after 10 seconds if return URL is available
@if( isset($return_url) )
    setTimeout(function() {
        if (confirm('{{ __( "Would you like to return to the table bill?" ) }}')) {
            window.location.href = '{{ $return_url }}';
        }
    }, 10000);
@endif
</script>

@endsection