@php
    $ip = isset($walletSettings->ip) ? $walletSettings->ip : null;
    $ipStatus = isset($walletSettings->ip_status) ? $walletSettings->ip_status : 0;
@endphp
<style>
    .errorInput{
        border: 1px solid red!important;
    }
</style>
<div class="whiteListIp">
    <h2>{{ _mt($moduleId,'Ewallet.IP_Restriction') }}</h2>
    <div class="errorNotice">
        <h3>{{ _mt($moduleId,'Ewallet.something_went_wrong') }}</h3>
        <div class="errorWrapper"></div>
    </div>
    <div class="tabHolder">
            <span>
                <label>IP address</label>
                <span style="color:red">*</span>
            </span>
        <div class="tab">

            <div class="buttonBase {{ $ipStatus ? 'on' : 'off' }}">
                <span class="on">{{ _mt($moduleId,'Ewallet.on') }}</span>
                <span class="off">{{ _mt($moduleId,'Ewallet.off') }}</span>
                <span class="switch"></span>
            </div>
            <div class="inputHolder">
                <input type="text" name="ipAddress" id="ipAddress"
                       placeholder={{ _mt($moduleId,'Ewallet.ip_address') }}""
                       value="{{ $ip }}" {{ $ipStatus ? '' : 'disabled' }}>
                <input type="hidden" name="ipStatus" value="{{ $ipStatus }}">
            </div>
            <button class="btn gray getSystemIp ladda-button" data-style="contract" type="button">
                <i class="fa fa-refresh"></i>
            </button>
            <button class="btn green updateIp ladda-button" data-style="contract" type="button">
                <i class="fa fa-check"></i>
            </button>
        </div>
    </div>
    <div class="transactionPassLoader"></div>
</div>
<script type="text/javascript">
    //Document ready
    $(function () {
        Ladda.bind('.ladda-button');
        window.transactionPassSuccessCallback = function (response) {
            $('.transactionPassLoader').slideUp().siblings('.tabHolder').slideDown();

            var clone = $('.updateIp').clone();

            $('.updateIp').html('saved !');

            setTimeout(function () {
                $('.updateIp').html(clone.html());
            }, 1000);
        };
    });

    $('.buttonBase').click(function () {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
            $('.whiteListIp .tab input[type="text"]').attr('disabled', 'disabled');
            $('.tab input[name="ipStatus"]').val(0);
            $('.errorNotice').hide();
        } else {
            $(this).removeClass('off').addClass('on');
            $('.whiteListIp .tab input[type="text"]').removeAttr('disabled');
            $('.tab input[name="ipStatus"]').val(1);
        }
    });

    $('.updateIp').click(function () {
        var me = $(this);
        $('.walletWrapper .errorNotice').slideUp();

        if (!validateIp() && $('.whiteListIp .buttonBase').hasClass('on')) {
            addValidationError({requiredIp: "{{ _mt($moduleId,'Ewallet.IP_is_required') }}"});
            $('#ipAddress').addClass('errorInput');
            Ladda.stopAll();
            return false;
        }
        else{
            $('#ipAddress').removeClass('errorInput');
        }

        var ipaddress =
            /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
        var content = $('.whiteListIp .tab input[type="text"]').val();
        if (!ipaddress.test(content) && $('.whiteListIp .buttonBase').hasClass('on')) {
            addValidationError({invalidIp: "{{ _mt($moduleId,'Ewallet.IP_is_invalid') }}"});
            $('#ipAddress').addClass('errorInput');
            Ladda.stopAll();
            return false;
        }
        else{
            $('#ipAddress').removeClass('errorInput');
        }

        var post = $.post('{{ scopeRoute("eWallet.validate.ip.whitelist") }}', {
            ip: $('input[name="ipAddress"]').val(),
            ipStatus: $('input[name="ipStatus"]').val()
        }, function (response) {
            $('.tabHolder').slideUp();
            refreshAjaxData($('.transactionPassLoader'), '{!! scopeRoute("eWallet.tran.password.view") !!}');
            $('.transactionPassLoader').show();
            // postPayment();
        }).fail(function (response) {
            Ladda.stopAll();

            switch (response.status) {
                case 422:
                    var errors = response.responseJSON;
                    for(let key in errors)
                        addValidationError(errors[key]);
                    break;
            }
        });
    });

    function validateIp() {
        return $('.whiteListIp .tab input[type="text"]').val().length > 0;
    }

    //Reset all payment errors
    function resetValidationtErrors() {
        $('.errorNotice').slideUp().find('.errorWrapper').empty().slideUp();
    }

    //Add payment errors
    function addValidationError(errors) {
        //console.log(errors);
        $('.errorNotice').slideDown().find('.errorWrapper').empty().slideDown();

        for (var key in errors) {
            var message = $.isArray(errors[key]) ? errors[key][0] : errors[key];
            var outPut = '<div class="eachError">';
            // outPut += '<span class="key">' + key + '</span><i>-</i>';
            outPut += '<span class="message">' + message + '</span>';
            outPut += '</div>';

            $('.errorNotice .errorWrapper').append(outPut);
        }
    }

    $('.getSystemIp').click(function () {
        $('#ipAddress').val('{!! request()->ip() !!}');
        Ladda.stopAll();
    });
</script>