@foreach($scripts as $script)
    <script type="text/javascript" src="{{ $script }}"></script>
@endforeach
@foreach($styles as $style)
    {!! $style !!}
@endforeach
<div class="epinWrap">
    <div class="epinAdderWrap col-md-6">
        <div class="epinDue">
            {{ _mt('Payment-Epin','Epin.Total_due') }} : <span class="dueAmount">{{ $due }}</span>
        </div>
        <div class="adderWrap">
            <div class="fieldHolder">
                <i class="fa fa-key"></i>
                <input type="text" name="epin" placeholder="Enter E-pin">
            </div>
            <button type="button" class="btn blue addEpin ladda-button" data-style="contract">
                <i class="fa fa-paper-plane"></i> {{ _mt('Payment-Epin','Epin.send') }}
            </button>
        </div>
        <div class="epinUsed" @if($storedEpins->count()) style="display: block" @endif>
            @foreach($storedEpins as $epin)
                <button data-id="{{ $epin->id }}" type="button" class="eachEpin btn ladda-button"
                        data-spinner-color="#666" data-style="contract">
                    <span class="ladda-label">
                        <i class="fa fa-close"></i>{{ $epin->key }}
                    </span><span class="ladda-spinner"></span>
                </button>
            @endforeach
        </div>
    </div>
    <div class="epinResultWrap col-md-6">
        <div class="epinGraph" id="epinGraph"></div>
    </div>
</div>

<input type="hidden" name="moduleId" value="{{ $id }}">

<script type="text/javascript">
    $(function () {
        Ladda.bind('.ladda-button');
        var circle = new ProgressBar.Circle('#epinGraph', {
            strokeWidth: 2,
            trailWidth: 3,
            text: {
                value: "{{ $epinCollected }} </br><span>{{ _mt('Payment-Epin','Epin.collected') }}</span>"
            },
            from: {color: '#e75159'},
            to: {color: '#37d0e4'},
            step: function (state, circle, attachment) {
                circle.path.setAttribute('stroke', state.color);
            },
        });
        circle.animate('{{ $epinCollectedPercentage }}', {duration: 800});
        //Update due amount
        $('.paymentNavTab[data-id="{{ $slug }}"]').click(function () {
            $.post('{{ scopeRoute("epin.api") }}', {action: 'getDueAmount'}, function (response) {
                $('.dueAmount').text(response.amount);
            });
        });
        //Send registration
        $('.addEpin').click(function () {
            $('.epinWrap .error').slideUp();
            var options = {actionUrl: '{{ scopeRoute("payment.handler") }}'};
            options.successCallBack = function (response) {
                Ladda.stopAll();
                circle.animate(1, {duration: 800});
                circle.setText('success <span class="success"><i class="fa fa-check"></i></span>');
                setTimeout(function () {
                    if (window.hasOwnProperty('paymentSuccessCallback')) {
                        window.paymentSuccessCallback(response, 'ewallet');
                    }
                }, 1000);
            };
            options.failCallBack = function (response) {
                Ladda.stopAll();
                var status = response.status;
                response = response.responseJSON.message;

                /*  if (window.hasOwnProperty('paymentFailureCallback')) {
                          window.paymentFailureCallback(response);
                  }*/

                switch (status) {
                    case 402:
                        circle.animate(response.params['epinPercentage'], {duration: 800});
                        circle.setText('{{ currencySymbol() }}' + response.params['epinTotal'] + '.00' + '<br> <span>collected</span>');
                        var lastEpin = response.params['lastEpin'];
                        var lastEpinHtml = '<button data-id="' + lastEpin.id + '" type="button" class="eachEpin btn ladda-button" data-spinner-color="#666" data-style="contract"><span class="ladda-label">\n' +
                            '                <i class="fa fa-close"></i>' + lastEpin.key +
                            '            </span><span class="ladda-spinner"></span></button>';
                        $('.epinUsed').append(lastEpinHtml).slideDown();
                        if (response.epinErrormessage) {
                            let errElem = $('.epinAdderWrap').find('.error');
                            if (errElem.length) {
                                errElem.text(response.epinErrormessage).slideDown();
                            } else {
                                errElem = '<div class="error">' + response.epinErrormessage + '</div>';
                                $('.epinUsed').before(errElem);
                            }
                        }
                        break;
                    case 422:
                        if (window.hasOwnProperty('paymentFailureCallback') && !response.epinErrormessage) {
                            window.paymentFailureCallback(response);
                        } else {
                            var errElem = $('.epinAdderWrap').find('.error');
                            if (errElem.length) {
                                errElem.text(response.epinErrormessage).slideDown();
                            } else {
                                errElem = '<div class="error">' + response.epinErrormessage + '</div>';
                                $('.epinUsed').before(errElem);
                            }
                        }
                        break;
                    default:
                        console.log('default');
                        break;
                }
            };

            sendForm(options);
        });
    });

    //Unset E-pin
    $('body')
        .off('click', '.eachEpin')
        .on('click', '.eachEpin', function () {
            var me = $(this);
            var data = {action: 'unsetEpin', data: {id: me.attr('data-id')}};
            $.post('{{ scopeRoute("epin.api") }}', data, function () {
                me.remove();
                if (!$('.eachEpin').length) $('.epinUsed').slideUp();
            }).fail(function (response) {
                Ladda.stopAll();
            });
        });
</script>