@extends('layout.admin.main')
@push('css')
<style>
    .errors{
        width: 100%;
        height: 30px;
        padding: 5px;
        margin-top:5px;
    }
    .td-fee{
        max-width: 200px;
    }

</style>
@endpush
@section('content')
    <main>
        <article class="sub">
            <section class="aff_setting">
                <h2>アフィリエイト設定</h2>

                <h3>個別報酬設定【{{($fee->view_name)}}】</h3>
                <ul class="feelist">
                    <li><span>一般報酬:</span>{{is_null($fee->general_money)?0:$fee->general_money}}(¥)</li>
                    <li><span>VIP報酬:</span>{{is_null($fee->vip_money)?0:$fee->vip_money}}(¥)</li>
                    <li><span>SVIP報酬:</span>{{is_null($fee->svip_money)?0:$fee->svip_money}}(¥)</li>
                    <li><span>SSVIP報酬:</span>{{is_null($fee->ssvip_money)?0:$fee->ssvip_money}}(¥)</li>
                </ul>
                <table id="body-content" data-bot="{{Hashids::encode($fee->id)}}">
                    <tr >
                        <th>ID</th>
                        <th>アフィリター名</th>
                        <th>メールアドレス</th>
                        <th>ランク</th>
                        <th>報酬</th>
                        <th class="hasbtn"></th>
                    </tr>
                    <form id="setting_fee">
                    @foreach($data as $k=>$v)
                    <tr class="main-content">
                        <td>{{$k+1}}</td>
                        <td>{{$v->username}}</td>
                        <td>{{$v->email}}</td>
                        <td>{{\Illuminate\Support\Facades\Config::get('sns-line.ranks.'.$v->rank)}}</td>
                        <td class="td-fee">

                            <input type="text" name="fee" value="{{($v->fee==0)?'':$v->fee}}" data-id="{{$v->id}}" onkeydown="validateInput(this)" data-parsley-min="6">
                            <span class="errors"></span>
                        </td>
                        <td>
                            <div class="hasbtn">
                                <a href="javascript:void(0)" data-id="{{$v->fee_id}}" onclick="clearIndividual(this)" class="red">削除</a>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    </form>
                </table>
                <div class="text-center">
                                        @include('layout.pagination')
                </div>
                <div class="hasbtn"><a href="javascript:void(0)" onclick="updateIndividual()" class="grn right">設定する</a></div>
            </section>
        </article>

    </main>
@endsection
@push('script')
<script>
var changeData=false;

    $(document).ready(function(){
        $('.main-content').find('input[name="fee"]').click(function(){
            $(this).parent().find('span.errors').text('');
        });
        $('#body-content').on('change keyup keydown', 'input, textarea, select', function (e) {
             changeData=true;

        });
        $('.hasbtn a.red').on('click',function(e){
            changeData=true;
        });
        $(window).on('beforeunload', function (e) {
            e.preventDefault();

            if (changeData) {
                return '更新していません。他のベージへ遷移しましか。';
            }
        });
    });
    function clearIndividual(obj){
       message='個別報酬設定を削除します。宜しいですか？';
        bot_id=$('#body-content').data('bot');
        id_aff=$(obj).attr('data-id');

        bootbox.confirm(message, function(result){
            if(result){
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '/admin/save-aff-setting-fee',
                    method: 'post',
                    data:{
                        'id':bot_id,
                        'data':id_aff
                    },
                    beforeSend:function () {

                    },
                    success:function (response) {
                        if(response.success){
                            $(obj).closest('tr').find('input[name="fee"]').val('');
                        }

                    },
                    error:function(){

                    }
                });
            }
        })
    }
    function updateIndividual(){
        data=[];
        flag=true;
        $.each($('.main-content'),function(k,v){
            input=$('input[name="fee"]').eq(k);
            validator=approve.value(input.val(),rules.rule_of_number);
            console.log(approve.value(input.val(),rules.rule_of_number));
            if(validator.approved==false){
                input.parent().find('span.errors').text(validator.errors[0]);
                flag=false;
            }
            data.push({'affiliater_id':input.data('id'),'fee':input.val()});
        });
        var bot_id=$('#body-content').data('bot');
        if(flag){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: '/admin/save-aff-setting-fee',
                method: 'post',
                data: {'id':bot_id,'data':JSON.stringify(data)},
                beforeSend: function () {
                $.LoadingOverlay('show');
                },
                success: function (response) {
                    $.LoadingOverlay('hide');
                    if(response.success){
                        alert('設定情報を保存しました。');
                        changeData=false;
                        window.location.reload();
                    }
                },
                error: function () {
                    $.LoadingOverlay('hide');
                },
                statusCode: {
                    500: function () {
                        alert("Script exhausted");
                    },
                    404: function () {
                        alert("something went wrong");
                    },
                    401: function () {
                        window.location.reload();
                    }
                }
            });
        }
    }
function validateJs(obj){
    val=$(obj).val();
    valid=validate({creditCardNumber: val}, constraints);
    console.log(valid);
}
var rules={
    rule_of_number:{
        title:'報酬',
        ignoreNull:true,
        numeric:{
            message:'{title}には数字を指定してください。',
            expects:true
        },

        numberMin:{
            min:0,
            message: '{title}{min}以上を入力してください。'
        },
        max:{
            max:8,
            message: '{title}{max}以上を入力してください。'
        }

    }
};
function validateInput(obj){
    val=$(obj).val();
    validator=approve.value(val,rules.rule_of_number);
    console.log(validator);
    if(validator.approved==false){
        $(obj).parent().find('span.errors').text(validator.errors[0]);
        flag=false;
    }
}

</script>
@endpush