@extends('home.layouts.master')
@section('css')
    <style>
        .pl-0 {
            padding: 0;
        }
    </style>
@endsection
@section('main')
    <div class="container">
        <div class="row p-4">
            <div class="col-md-5 mx-auto p-0">
                @if($payment->method === 'pm')
                    <form action="https://perfectmoney.com/api/step1.asp" id="form" method="POST">
                        <input type="hidden" name="PAYEE_ACCOUNT" value="{{$pm->merchant_id}}">
                        <input type="hidden" name="PAYEE_NAME" value="{{Setting::get('title')}}">
                        <input type="hidden" name="PAYMENT_ID" value="{{$payment->id}}"><br>
                        <input type="hidden" name="PAYMENT_AMOUNT"
                               value="{{number_format( ($payment->amount * (100 + optional($payment->gateway)->percent) / 100) , 2 , '.' , '' )}}"><br>
                        <input type="hidden" name="PAYMENT_UNITS" value="USD">
                        <input type="hidden" name="STATUS_URL" value="">
                        <input type="hidden" name="PAYMENT_URL"
                               value="{{route('pm.callback',['value'=> \App\Helper\Helper::encrypt('success|'.$payment->id)])}}">
                        <input type="hidden" name="PAYMENT_URL_METHOD" value="LINK">
                        <input type="hidden" name="NOPAYMENT_URL"
                               value="{{route('pm.callback',['value'=> \App\Helper\Helper::encrypt('fail|'.$payment->id)])}}">
                        <input type="hidden" name="NOPAYMENT_URL_METHOD" value="LINK">
                        <input type="hidden" name="SUGGESTED_MEMO" value="">
                        <input type="hidden" name="orderid" value="{{$payment->id}}">
                        <input type="hidden" name="BAGGAGE_FIELDS" value="orderid">
                        <input type="submit" name="PAYMENT_METHOD" value="در حال انتقال....">
                    </form>
                @elseif ($payment->method === 'pmv')
                    <div class="card">
                        <div class="card-header bg-success text-center text-bold-900">
                            <div class="card-title">
                                <span class="card-title">{{Setting::get('title')}}</span>
                                <br>
                                <span class="">#{{$payment->token}}</span>
                            </div>
                            <hr>
                            @if ($payment->status == 'init')
                                <img height="30" src="/payment/loading.svg">
                                {{trans('in')}} <span class="timer text-bold-600"></span> {{trans('payment expires')}}
                            @endif
                        </div>
                        <div class="card-body" id="state4" style="">
                            <div class="content">
                                @if ($payment->status == 'init')
                                    <div class="invoice-content tab-border">
                                        <div class="tab-pane active">
                                            <div class="invoice-content">
                                                <div class="col-md-12 mb-4">
                                                    <div>
                                                        <p class="text-center">{{trans('please insert perfectmoney voucher')}}</p>
                                                    </div>
                                                    <hr>
                                                    <div class="text-center">
                                                        <div class="form-group">
                                                            <label
                                                                for="voucherCode">{{trans('voucher code')}}</label>
                                                            <input type="text" class="form-control" id="voucherCode"
                                                                   value="{{old('voucherCode')}}" required>
                                                        </div>
                                                        <div class="form-group">
                                                            <label
                                                                for="activationCode">{{trans('activation code')}}</label>
                                                            <input type="text" class="form-control"
                                                                   id="activationCode"
                                                                   value="{{old('activationCode')}}" required>
                                                        </div>
                                                        <div class="form-group">
                                                            <button onclick="activeVoucher()" class="btn btn-success">
                                                                <i class="fa fa-send"></i>
                                                                {{trans('payment')}}
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <div class="alert alert-warning text-center">
                                                        {{trans('please pay the exact amount in a single transaction')}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @elseif ($payment->status == 'done')
                                    <hr>
                                    <h2 class="text-center text-success">Payment Done</h2>
                                    <hr>
                                @endif

                                <div class="payment-description">
                                    <div class="col-md-12 des-label tab-label mb10 t-right">{{trans('merchant')}}:</div>
                                    <div style="display: flex; justify-content: center">
                                        <p style="font-size: medium; font-weight: bold">{{optional($payment->gateway)->title}}</p>
                                    </div>
                                    <div class="col-md-12 des-label tab-label mb10 t-right">{{trans('website')}}:</div>
                                    <div style="display: flex; justify-content: center">
                                        <a href="{{optional($payment->gateway)->site}}"
                                           target="_blank">{{optional($payment->gateway)->site}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if ($payment->status == 'init')
                            <div class="card-footer text-center">
                                <a href="javascript:void(0)" onclick="cancelPayment()"
                                   class="btn btn-danger">{{trans('cancel')}}</a>
                            </div>
                        @endif
                    </div>
                @else
                    <div class="card">
                        <div class="card-header bg-success text-center text-bold-900">
                            <div class="card-title">
                                <span class="card-title">{{Setting::get('title')}}</span>
                                <br>
                                <span class="">#{{$payment->token}}</span>
                            </div>
                            <hr>
                            @if ($payment->status == 'init')
                                <img height="30" src="/payment/loading.svg">
                                {{trans('in')}} <span class="timer text-bold-600"></span> {{trans('payment expires')}}
                            @endif
                        </div>
                        <div class="card-body" id="state4" style="">
                            <div class="content">
                                @if ($payment->status == 'init')
                                    <div class="invoice-content tab-border">
                                        <div class="tab-pane active">
                                            <div class="text-center" id="cntSelectedQrCode">
                                                <img
                                                    src="https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=http%3A%2F%2Fwww.google.com%2F&choe=UTF-8"
                                                    title="{{$payment->wallet}}"
                                                    width="170" height="170"
                                                    style="width: 170px; height: 170px;">
                                            </div>
                                            <div class="invoice-content">
                                                <div class="col-md-12 mb-4">
                                                    <div>
                                                        <p class="t-right">{{trans('wallet')}}:</p>
                                                    </div>
                                                    <div style="display: flex; justify-content: center">
                                                        <div>
                                                    <span style="font-size: medium; font-weight: bold"
                                                          onclick="copyToClipboard(`{{optional($payment->tronData)->address_base_58}}`)">
                                                        {{optional($payment->tronData)->address_base_58}}
                                                    </span>
                                                        </div>
                                                        <div class="ml-1">
                                                            <i class="fa fa-copy mr-1"
                                                               onclick="copyToClipboard(`{{optional($payment->tronData)->address_base_58}}`)"></i>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <div>
                                                        <p class="t-right">{{trans('amount')}}:</p>
                                                    </div>
                                                    <div style="display: flex; justify-content: center">
                                                        <div>
                                                            <p style="font-size: medium; font-weight: bold"
                                                               onclick="copyToClipboard(`{{($payment->amount * (100 + optional($payment->gateway)->percent) / 100)}}`)">{{$payment->amount}}
                                                                USDT</p>
                                                        </div>
                                                        <div class="ml-1">
                                                            <i class="fa fa-copy mr-1"
                                                               onclick="copyToClipboard(`{{($payment->amount * (100 + optional($payment->gateway)->percent) / 100)}}`)"></i>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <div class="alert alert-warning text-center">
                                                        {{trans('please pay the exact amount in a single transaction')}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @elseif ($payment->status == 'done')
                                    <hr>
                                    <h2 class="text-center text-success">Payment Done</h2>
                                    <hr>
                                @endif

                                <div class="payment-description">
                                    <div class="col-md-12 des-label tab-label mb10 t-right">{{trans('merchant')}}:</div>
                                    <div style="display: flex; justify-content: center">
                                        <p style="font-size: medium; font-weight: bold">{{optional($payment->gateway)->title}}</p>
                                    </div>
                                    <div class="col-md-12 des-label tab-label mb10 t-right">{{trans('website')}}:</div>
                                    <div style="display: flex; justify-content: center">
                                        <a href="{{optional($payment->gateway)->site}}"
                                           target="_blank">{{optional($payment->gateway)->site}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if ($payment->status == 'init')
                            <div class="card-footer text-center">
                                <a href="javascript:void(0)" onclick="cancelPayment()"
                                   class="btn btn-danger">{{trans('cancel')}}</a>
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    @if ($payment->status == 'init')
        <script>
            $(document).ready(function () {
                var time = `{{(44 - $time )* 60}}`
                setInterval(function () {
                        var minutes = (time % 3600) / 60
                        var seconds = time % 60
                        if (minutes <= 0 && seconds <= 0) {
                            cancelPayment()
                        }
                        $('.timer').text(parseInt(minutes) + ':' + parseInt(seconds))
                        time = time - 1
                    },
                    1000)
            });
            $(document).ready(function () {
                setInterval(function () {
                        checkStatus()
                    },
                    50000)
            });

            function checkStatus() {
                var apiToken = `{{$payment->gateway->api_token}}`
                var token = `{{$payment->token}}`
                axios.post(`/api/payment/status?api_token=${apiToken}`, {
                    'token': `{{$payment->token}}`
                })
                    .then(function (response) {
                        var callback = `{{$payment->callbackUrl}}`
                        if (response.data.code === 1 && response.data.data.status === 'done') {
                            redirectToCallback(callback, token, 'done', {{$payment->orderId}})
                        } else if (response.data.code === 1 && response.data.data.status === 'cancel') {
                            redirectToCallback(callback, token, 'cancel', {{$payment->orderId}})
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

            function redirectToCallback(url, token, status, orderId) {

                var form = $('<form action="' + url + '" method="post">' +
                    '<input type="text" name="token" value="' + token + '" />' +
                    '<input type="text" name="status" value="' + status + '" />' +
                    '<input type="text" name="orderId" value="' + orderId + '" />' +
                    '</form>');
                $('body').append(form);
                form.submit();
            }

            function cancelPayment() {
                var token = `{{$payment->token}}`
                var apiToken = `{{$payment->gateway->api_token}}`
                axios.post(`/api/payment/cancel/${token}?api_token=${apiToken}`)
                    .then(function (response) {
                        var callback = `{{$payment->callbackUrl}}`
                        if (response.data.code === 1 && response.data.data.status === 'cancel') {
                            redirectToCallback(callback, token, 'cancel', {{$payment->orderId}})
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

            function activeVoucher() {
                var token = `{{$payment->token}}`
                var apiToken = `{{$payment->gateway->api_token}}`
                axios.post(`/api/payment/form/${token}?api_token=${apiToken}`, {
                    'activationCode': $('#activationCode').val(),
                    'voucherCode': $('#voucherCode').val(),
                })
                    .then(function (response) {
                        console.log(response)
                        var callback = `{{$payment->callbackUrl}}`
                        if (response.data.code === 1 && response.data.data.status === 'done') {
                            redirectToCallback(callback, token, 'done', {{$payment->orderId}})
                        } else {
                            alert('active code failed!')
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        </script>
    @endif
    @if($payment->method === 'pm')
        <script>
            $('#form').submit()
        </script>
    @endif
@endsection