@extends('layouts.app')

@section('title', 'Processing Payment')

@section('content')
<div class="container mt-5 mb-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-lg">
                <div class="card-header bg-warning text-dark">
                    <h4 class="mb-0">
                        <i class="fas fa-credit-card"></i> Processing Payment
                    </h4>
                </div>

                <div class="card-body text-center p-5">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h5>Redirecting to PayU Money...</h5>
                    <p class="text-muted">
                        Please wait while we redirect you to the payment gateway.<br>
                        <small>Do not close this page or refresh your browser.</small>
                    </p>

                    <!-- Hidden PayU Form -->
                    <form id="paymentForm" action="{{ $gatewayUrl }}" method="POST" class="d-none">
                        @csrf
                        <input type="hidden" name="key" value="{{ $paymentData['key'] }}">
                        <input type="hidden" name="txnid" value="{{ $paymentData['txnid'] }}">
                        <input type="hidden" name="amount" value="{{ $paymentData['amount'] }}">
                        <input type="hidden" name="productinfo" value="{{ $paymentData['productinfo'] }}">
                        <input type="hidden" name="firstname" value="{{ $paymentData['firstname'] }}">
                        <input type="hidden" name="email" value="{{ $paymentData['email'] }}">
                        <input type="hidden" name="phone" value="{{ $paymentData['phone'] }}">
                        <input type="hidden" name="surl" value="{{ $paymentData['surl'] }}">
                        <input type="hidden" name="furl" value="{{ $paymentData['furl'] }}">
                        <input type="hidden" name="hash" value="{{ $paymentData['hash'] }}">
                        <input type="hidden" name="udf1" value="{{ $paymentData['udf1'] }}">
                        <input type="hidden" name="udf2" value="{{ $paymentData['udf2'] }}">
                        <input type="hidden" name="udf3" value="{{ $paymentData['udf3'] }}">
                        <input type="hidden" name="udf4" value="{{ $paymentData['udf4'] }}">
                        <input type="hidden" name="udf5" value="{{ $paymentData['udf5'] }}">
                    </form>

                    <!-- Fallback Button -->
                    <button type="button" class="btn btn-primary mt-3" onclick="submitPaymentForm()">
                        Click here if you are not redirected automatically
                    </button>
                </div>
            </div>

            <!-- Registration Details -->
            <div class="card mt-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0">Registration Details</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Registration ID:</strong> {{ $registration->reg_id }}</p>
                            <p><strong>Student Name:</strong> {{ $registration->name }}</p>
                            <p><strong>Email:</strong> {{ $registration->email }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Event:</strong> {{ $registration->event->Name }}</p>
                            <p><strong>Amount:</strong> <strong class="text-primary">₹{{ number_format($registration->amount, 2) }}</strong></p>
                            <p><strong>Date Created:</strong> {{ $registration->datecreated->format('d M Y H:i:s') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Auto-submit form on page load
    document.addEventListener('DOMContentLoaded', function() {
        submitPaymentForm();
    });

    function submitPaymentForm() {
        document.getElementById('paymentForm').submit();
    }
</script>
@endpush
