@if(isset($manual_payout_message))
    <div class="manual_payout_message">
        <i class="fa fa-exclamation-triangle"></i>
        <h4> {{$manual_payout_message}}</h4>
    </div>
@else
    @foreach($styles as $style)
        <link href="{{ $style }}" rel="stylesheet" type="text/css"/>
    @endforeach
    <div class="portlet light col-md-12">
        <div class="portlet-title">
            <div class="caption"><i class="icon-speech"></i>
                <span class="caption-subject bold uppercase">{{ _mt($moduleId,'ManualPayout.Release_Payout') }}</span>
            </div>
            <div class="actions">
                <a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:" data-original-title=""
                   title=""> </a>
            </div>
        </div>
        <div class="portlet-body">
            <div class="userWrapper">
                <div class="securityPin" data-unit="securityPin"></div>
                <div class="payoutProgress">
                    <div class="innerBox">
                        <h3>
                            <i class="fa fa-spin fa-hourglass"></i> {{ _mt($moduleId,'ManualPayout.please_wait_we_are_processing') }}
                        </h3>
                    </div>
                </div>
                <div class="successPayout">
                    <h2><i class="fa fa-check"></i>{{ _mt($moduleId,'ManualPayout.Done') }}</h2>
                    <p>{{ _mt($moduleId,'ManualPayout.You_have_successfully_processed_the_payout') }}</p>
                    <div class="statement"></div>
                </div>
                <div class="allUsers">
                    <form class="filterForm">
                        <div class="filters row">
                            <div class="eachFilter col-md-3">
                                <label>{{ _mt($moduleId,'ManualPayout.Pick_wallet') }}</label>
                                <select class="walletId select2" name="filters[wallet]">
                                    @foreach($filters['wallet']['values'] as $wallet)
                                        @if($wallet->moduleId != $businessWallet)
                                            <option
                                                {{ ($filters['wallet']['default'] == $wallet->moduleId) ? 'selected' : '' }} value="{{$wallet->moduleId }}">{{ $wallet->registry['name'] }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="eachFilter col-md-3">
                                <label>{{ _mt($moduleId,'ManualPayout.Select_user') }}</label>
                                <input type="text" value="" class="userFiller"
                                       placeholder="{{ _mt($moduleId,'ManualPayout.enter_username') }}">
                                <input type="hidden" name="filters[userId]" value="">
                            </div>
                            <div class="eachFilter col-md-3">
                                <label>{{ _mt($moduleId,'ManualPayout.min_balance') }}</label>
                                <input type="number" value="" class="form-control" name="filters[min_balance]"
                                       placeholder="{{ _mt($moduleId,'ManualPayout.enter_min_balance') }}">
                            </div>
                            <div class="eachFilter col-md-3">
                                <button type="button" class="btn dark payoutFilter ladda-button" data-style="contract">
                                    <i class="fa fa-filter"></i>{{ _mt($moduleId,'ManualPayout.Filter') }}
                                </button>
                            </div>
                            <div class="eachFilter col-md-3">
                                <button type="button"
                                        class="btn dark proceedPayout ladda-button">{{ _mt($moduleId, 'ManualPayout.proceed') }}</button>
                            </div>
                        </div>
                    </form>
                    <div class="loadHere manualPayoutWrapper"></div>
                </div>
            </div>
        </div>
    </div>
@endif


<script type="text/javascript">
    window.securityPinCallback_403 = function (response) {
        setTimeout(function () {
            refreshSecurityPin();
        }, 2000);
    };

    window.securityPinSuccessCallback = function (response) {
        $('.securityPin').hide().siblings('.payoutProgress').slideDown();
        releasePayout().done(function () {
            $('.payoutProgress').hide().siblings('.successPayout').slideDown();
        }).fail(function (response) {
            console.log(response);
        });
    };

    function refreshSecurityPin() {
        simulateLoading('.payoutPanel .securityPin');
        return $.post('{{ scopeRoute('manualPayout.generateSecurityPin') }}', function (response) {
            $('.payoutPanel .securityPin').html(response).promise().done(function () {
                $('.securityPinWrapper').slideDown();
            });
        });
    }

    function releasePayout() {
        var formData = formValues('.selectedPayoutsNew');
        var selectedUsers = [];
        // Collect selected users' data
        $('input[class="icheck"]:checked').each(function () {
            var userId = this.value;
            if (userId && userId !== 'on') {
                var amount = $('.payoutUser_' + userId).val();
                selectedUsers.push({
                    id: userId,
                    amount: amount
                });
            }
        });

        var options = {
            wallet: $('#wallet').val(),
            context: 'manualPayout',
            gateway: $('input[name="gateway"]').val(),
            payout: selectedUsers
        };

        return $.post('{{ scopeRoute('payment.handler') }}', options, function (response) {
            $('.payoutPanel .successPayout').html(response.responseJSON).promise().done(function () {
                $('.securityPinWrapper').slideDown();
            });
        });
    }

    function getUserList(params = null) {
        simulateLoading($('.loadHere'));
        let url = "{{ scopeRoute('manualPayout.users') }}";
        let filters = formValues('.filterForm');
        params = $.extend(filters, params);

        return $.post(url, params, function (response) {
            $('.loadHere').html(response);
            Ladda.stopAll();
        }).fail(function (response) {
            Ladda.stopAll();
        });
    }

    //Document ready functions
    $(function () {
        getUserList();
        //init Ladda
        Ladda.bind('.ladda-button');
        //Select2
        $('.select2').select2({
            width: '100%'
        });

        //Filter user
        $('.payoutFilter').click(function () {
            //getUserList();
            loadUnit('users', $('.allUsers .loadHere'), false, [], formValues('.filterForm')).done(function () {
                Ladda.stopAll();
            });
        });
        //Ajax fetch init
        var selectedCallback = function (target, id, name) {
            target.val(name).siblings('input[name="filters[userId]"]').val(id);
        };
        var clearCallback = function (target) {
            target.siblings('input[type="hidden"]').val('');
        };
        var options = {
            target: '.userFiller',
            route: '{{ route("user.api") }}',
            action: 'getUsers',
            name: 'username',
            selectedCallback: selectedCallback,
            clearCallback: clearCallback
        };
        $('.userFiller').ajaxFetch(options);
    });
</script>

<style>
    .manual_payout_message {
        text-align: center;
        padding: 25px 15px;
        margin: 10px;
        font-weight: 500;
        color: #7e1a1a;
        border: 1px solid #edc7c7dd;
        background-color: #fbefef;

    }
    .manual_payout_message i {
        font-size: 30px;
    }

    .manual_payout_message h4 {
        margin: 0px;
        padding: 15px 0px;
        font-size: 19px;
        font-weight: 500;
        text-transform: capitalize;
    }
    button.btn.dark.payoutFilter.ladda-button {
        top: 23px;
        position: relative;
    }

    .accountNote {
        padding: 20px;
        border: 1px solid #979a9d;
        font-size: 13px;
        color: red;
        font-weight: 500;

    }

    button.btn.dark.proceedPayout.ladda-button {
        float: right;
        /*margin: 0px;*/
        padding: 6px;
        right: 16px;
        top: 23px;
        position: relative;
    }
</style>