@extends('layouts.app')

@section('content')
<style>
    /* Define the blinking animation */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
.blinking-text {
    animation: blink 1s infinite;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    color:yellow;
}
</style>
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-primary text-white text-center">
                    <h3 class="mb-0">Complete Your Payment</h3>
                    <p class="blinking-text mb-0">Please, copy and save your RRR.</p>
                </div>

                <div class="card-body p-4">
                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <div class="mb-4">
                        <h5 class="text-secondary">Payment Details</h5>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><strong>Amount:</strong> ₦{{ number_format($paymentDetails['amount'], 2) }}</li>
                            <li class="list-group-item"><strong>Description:</strong> {{ $paymentDetails['description'] }}</li>
                            <li class="list-group-item"><strong>Payer Name:</strong> {{ $paymentDetails['payerName'] }}</li>
                            <li class="list-group-item"><strong>Payer Email:</strong> {{ $paymentDetails['payerEmail'] }}</li>
                            <li class="list-group-item"><strong>Payer Phone:</strong> {{ $paymentDetails['payerPhone'] }}</li>
                            <li class="list-group-item"><strong>RRR Number:</strong> {{ $paymentDetails['RRR'] }}</li>
                        </ul>
                    </div>

                    <div class="mb-4">
                        <p><strong>Note:</strong> To verify an RRR, in case there is a payment error:</p>
                        <ol class="text-secondary">
                            <li>
                                <a href="{{ route('payments.index') }}" target="_blank" class="text-decoration-none">Verify RRR</a> in your dashboard, click on Verify RRR, and input your RRR...
                            </li>
                        </ol>
                    </div>

                    <div class="text-center">
                        <button class="btn btn-success btn-lg w-100" onclick="makePayment()">Proceed to Payment</button>
                    </div>

                    <!-- Remita Inline Payment Script -->
                    <script type="text/javascript" src="https://login.remita.net/payment/v1/remita-pay-inline.bundle.js"></script>

                    <script>
              function makePayment() {
    var paymentEngine = RmPaymentEngine.init({
        key: "TkFEREN8MTU5NjM0NzMxNzl8NDg2YTNhZDVkMjFlMzZkMzk4OWM2ZmIyMDVhZTM5NTU0ZDNhMDJiMDZjNTQ4OWFlOWNhMGE4OGYxZTYxOTE3ZWE4YTVjMjBjMmE5NDVkYmEyODQwYjYzMTUxYTZjMTNiOTE3ZDU4MDQ0ZmUyODA5MDkyNzU4YTE1YTgyNGJkYzM=",
        processRrr: true,
        transactionId: '{{ $paymentDetails["RRR"] }}',
        extendedData: {
            customFields: [
                {
                    name: "rrr",
                    value: "{{ $paymentDetails['RRR'] }}"
                }
            ]
        },
        onSuccess: function(response) {
            console.log('Successful Response', response);
            alert('Payment Successful! Transaction ID: ' + response.transactionId);

            // Send AJAX request to update the database
            fetch('/payments/update_payment_status', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' // CSRF Token for security
                },
                body: JSON.stringify({
                    payment_id: '{{ $paymentDetails["paymentId"] }}', // Payment ID from backend
                    rrr: response.transactionId, // Get RRR from response
                    status: 'paid'
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    window.location.href = '/payments'; // Redirect to success page
                } else {
                    alert('Error updating payment status.');
                }
            })
            .catch(err => console.log(err));
        },
        onError: function(response) {
            console.log('Error Response', response);
            alert('Payment failed. Please try again.');
        },
        onClose: function() {
            console.log("Payment modal closed.");
        }
    });

    paymentEngine.showPaymentWidget();
}

                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection