@extends('layouts.guest-layouts.guest-payment', ['pageTitle' => $pageTitle ?? 'Validate Payment Code'])

@section('more-styles')
    <style>
        .header .heater-top .company-logo {
            height: auto;
            width: 180px;
            float: left;
        }
    </style>
@stop
@section('content')

    <div class="content">
        @if($wemaAcctNumber)
            <div class="content billing m-auto">
                <div class="search-bill">
                    <h2 class="text-center" style="text-decoration: underline">Transfer <span class="naira-prefix">{{ $wemaAcctNumber->transaction->amount_expected }}</span> to the details below</h2>
                    <table class="table table-borderless table-bordered-bottom">
                        <caption></caption>
                        <tbody>
                        <tr>
                            <th scope="row">Bank</th>
                            <td class="text-right">Wema Bank</td>
                        </tr>
                        <tr>
                            <th scope="row">Account Number</th>
                            <td class="text-right"><strong>{{ $wemaAcctNumber->account_number }}</strong></td>
                        </tr>
                        <tr>
                            <th scope="row">Account Name</th>
                            <td class="text-right"><strong>{{ $wemaAcctNumber->accountName() }}</strong></td>
                        </tr>
                        <tr>
                            <th scope="row">Transaction Reference</th>
                            <td class="text-right">{{ $wemaAcctNumber->transaction->transaction_reference_number }}</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="text-center">
                                @if($wemaAcctNumber->status_id === \App\Models\WemaBankAccountNumberStatus::IN_USE)
                                    <p style="background-color: #ccc; padding: 1em;">This account expires in <strong><span id="countdownTimer"></span></strong></p>
                                @else
                                    <span class="text-danger" style="color: #913730 !important; font-weight: bold;">Account Number Expired</span><br>
                                    <a href="{{ route('guest_payment.payee_form', ['paymentCode' => $invoice->payment_code] ) }}"
                                       class="btn btn-warning text-white font-weight-bold">Restart Transaction</a>
                                @endif
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    @if($wemaAcctNumber->status_id === \App\Models\WemaBankAccountNumberStatus::IN_USE)
                    <form action="{{ route('guest_payment.payment_result', ['webTransactionRef' => $wemaAcctNumber->transaction->transaction_reference_number]) }}" method="get" class="text-center">
                        @csrf
                        {{--<input type="hidden" name="account_number" value="{{ $wemaAcctNumber->account_number }}">--}}
                        {{--<input type="hidden" name="transaction_reference" value="{{ $wemaAcctNumber->transaction->transaction_reference_number }}">--}}
                        <a href="{{ route('guest_payment.payment_result', ['webTransactionRef' => $wemaAcctNumber->transaction->transaction_reference_number]) }}"
                           class="btn btn-lg btn-success pt-2 pb-2">Confirm Transfer</a>
                    </form>
                    @endif
                </div>
            </div>
        @else
            <h1>
                <span class="text-bold text-success">OGUN STATE</span><br>
                Billing & Payments Management System
            </h1>
            <p id="redirecting"> Redirecting to payment provider ...</p>
        @endif
    </div>
@stop

@section('more-scripts')
    @if(isProductionEnv())
        <script type="text/javascript" src="https://login.remita.net/payment/v1/remita-pay-inline.bundle.js"></script>
        <script type="text/javascript" src="https://plugins.xpresspayonline.com/js/plugin.js"></script>
    @else
        <script type="text/javascript" src="https://remitademo.net/payment/v1/remita-pay-inline.bundle.js"></script>
        <script src="https://xpresspayonlinepluginssandbox.xpresspayments.com/js/plugin.js"></script>
    @endif

    <script>
        function makePayment() {
            @if($paymentCollector->id === \App\Models\PaymentProvider::XPRESS_PAY)
                const paymentBody = {!! collect($paymentDetails) !!};
                console.log({paymentBody});
                xpressPayonlineSetup(paymentBody);
            @elseif($paymentCollector->id === \App\Models\PaymentProvider::REMITA)
                const form = document.querySelector("#payment-form");
                const paymentDetails = @json($paymentDetails);
                let responseDetails = null;
                const paymentEngine = RmPaymentEngine.init({
                    ...paymentDetails,
                    onSuccess: function (response) {
                        responseDetails = {success:true , data: response};
                    },
                    onError: function (response) {
                        responseDetails = {error:true , data: response};
                    },
                    onClose: function () {
                        if(responseDetails){
                            window.location.href = '{{ route('guest_payment.payment_result', ['webTransactionRef' => $transaction->transaction_reference_number]) }}';
                        } else {
                            window.location.href = '{{ route('guest_payment.payment_abandoned', ['webTransactionRef' => $transaction->transaction_reference_number]) }}';
                        }
                    },
                    config: {

                    }
                });
                paymentEngine.openIframe();
            @endif
        }

        $(document).ready(function (e) {
            makePayment();
            @if($paymentCollector->id === \App\Models\PaymentProvider::WEMA_BANK && $wemaAcctNumber->status_id === \App\Models\WemaBankAccountNumberStatus::IN_USE)
                let timeTillExpiry = parseInt("{{ now()->isBefore($wemaAcctNumber->expiry_date) ? now()->diffInMinutes($wemaAcctNumber->expiry_date) : 0 }}");
                const currentTime = "{{ now()->toDateTimeString() }}";
                const expiryDate = "{{ $wemaAcctNumber->expiry_date->toDateTimeString() }}";

                console.log({currentTime, expiryDate}, BaseHelper.timeDiffInHrsAndMinutesOrSecs(currentTime, expiryDate));
                $('#countdownTimer').html(
                    BaseHelper.timeDiffInHrsAndMinutesOrSecs(currentTime, expiryDate)
                );
                const timeIntervalFunc = setInterval(actionFunc, 60 * 1000);

                function actionFunc(){
                    $('#countdownTimer').html(
                        BaseHelper.timeDiffInHrsAndMinutesOrSecs(moment().format('YYYY-MM-DD HH:mm:ss'), expiryDate)
                    );
                    if(timeTillExpiry === 0){
                        clearInterval(timeIntervalFunc)
                    } else {
                        timeTillExpiry -= 1;
                    }
                }

            @endif
        })
    </script>
@endsection