@extends('layouts.master')

@section('content')
<style>
    .pointer {
        cursor: pointer;
    }

    .error {
        color: red;
    }
     button.btn.tab.active {
        background-color: #12171a;
        color: white;
        cursor: auto;
    }
    button.btn.tab {
        border: 1px solid #060706;
    }
    .right-img{
        position: relative;
    }
    span#userName {
        color: #198e04;
        font-size: 13px;
    }
    .right-img #affiliate-search{
        height: 30px;
        width: 30px;
        display: none;
        position: absolute;
        right: 10px;
        top: 32px;
    }

</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">{{ trans('breadcrumbs.Affiliate Settings') }}</h1>
                </div>
                <!-- /.col -->
                <div class="col-sm-3"></div>
                <div class="col-sm-3">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">{{ Breadcrumbs::render('Affiliate Settings') }}</li>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <section class="content">
        <div class="card" id="filterDiv">
            <div class="card-header">
                <button class="btn tab active" id="list-tab">List</button><button class="btn tab" id="attach-tab">Attach</button>
                <h3 class="card-title table-list">{{ trans('affiliate.Users List [Affiliate Partners]') }}</h3>
                <h3 class="card-title table-list">{{ trans('layout.Filter') }}</h3>
                <div class="card card-form-1">
                    <div class="col-md-6 card-primary card-form-1">
                        <div class="card-body ">
                            <div class="form-col-1">
                                {{ Form::label('PLAYER', trans('affiliate.Player')) }}
                                {{ Form::text('PLAYER','', ['id' => 'PLAYER', 'class' => 'form-control', 'placeholder' => trans('affiliate.Player')]) }}
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('PARTNER_NAME',  trans('affiliate.Partner Name'))}}
                                {{ Form::select('PARTNER_NAME', $partnerName, ' ', ['class' => 'form-control select2', 'placeholder' => trans   ('reports.Select option'), 'id' => 'PARTNER_NAME']) }}
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('PERCENTAGE', trans('affiliate.Percentage')) }}
                                {{ Form::text('PERCENTAGE','', ['id' => 'PERCENTAGE', 'class' => 'form-control', 'placeholder' => trans('affiliate.Percentage')]) }}
                            </div>
                            <br> <br>
                            <div class="button_sec">
                                <button class="btn btn-primary" id="getReport">{{ trans('layout.Submit') }}</button>
                                <button class="btn btn-default" id="reloadPage">{{ trans('layout.Clear') }}</button>
                            </div>
                        </div>
                    </div>              
                </div>   
            </div>
        
            <div class="card  " id="report" style="display:none">
                <div class="card-header">
                    <h3 class="card-title table-list" id="report_title"></h3>
                </div>
                <div class="card table-list">
                    <div class="card-body">
                        <div class="dt-buttons" onClick="post()"><button
                                class="dt-button buttons-excel buttons-html5" tabindex="0" type="button"
                                title="Excel"><span><i class="fa fa-file-excel-o"></i></span></button> </div>
                            <table id="table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th class="text-center">{{ trans('affiliate.Username') }}</th>
                                    <th class="text-center">{{ trans('affiliate.Affiliate Name') }}</th>
                                    <th class="text-center">{{ trans('affiliate.Percentage') }}</th>
                                    <th class="text-center">{{ trans('affiliate.Action') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <!-- /.card-body -->                
            </div>   
               
             
               <div class="card-header">
                    <div class="card add-form" >
                        <h3 class="card-title add-form">{{ trans('affiliate.Attach Users Under Affiliate') }}</h3>
                        <form id="affiliateSettings-form">
                            <div class="card-primary card-form-1 add-form">
                                <div class="card-body">
                                    @csrf
                                    <div class="form-col-1  right-img">
                                        {{ Form::label('PLAYER', trans('affiliate.Player'),['class' => 'required']) }}
                                        {{ Form::text('player','', ['id' => 'player', 'class' => 'form-control', 'placeholder' => trans('affiliate.Player'),'maxlength' => 16, 'onblur' => 'checkValidUser()']) }}
                                        <img id="affiliate-search" src="{{ asset('img/loader-img.gif') }}">
                                         <span id='player-error' class="error-help-block"></span>
                                         <span id="userName"></span>
                                        
                                    </div>
                                    <div class="form-col-1 right-img">
                                        {{ Form::label('AFFILIATE_TYPE',  trans('affiliate.Affiliate Type'),['class' => 'required'])}}
                                        {{ Form::select('partnerType', $partnerType, ' ', ['class' => 'form-control select2', 'placeholder' => trans('reports.Select option'), 'id' => 'partnerType']) }}
                                        <span id='partnerType-error'  class="error-help-block" ></span>
                                    </div>
                                    <div class="form-col-1 right-img">
                                        {{ Form::label('PARTNER_NAME',  trans('affiliate.Select Affiliate Partner'),['class' => 'required'])}}
                                        {{ Form::select('partnerName', $partnerList, ' ', ['class' => 'form-control select2', 'placeholder' => trans('reports.Select option'), 'id' => 'partnerName']) }}
                                        <img id="affiliate-search" src="{{ asset('img/loader-img.gif') }}">
                                        <span id='partnerName-error'  class="error-help-block" ></span>
                                    </div>
                                    <div class="form-col-1">
                                        {{ Form::label('PERCENTAGE', trans('affiliate.Percentage'),['class' => 'required']) }}
                                        {{ Form::text('percentage','', ['id' => 'percentage', 'class' => 'form-control number', 'maxlength' => 3,'placeholder' => trans('affiliate.Percentage')]) }}
                                        <span id='percentage-error'  class="error-help-block" ></span>
                                    </div>
                                </div>
                            </div>
                        </form>
                     
                  
                        <div class="card-primary card-form-1 add-form">
                            <div class="card-body">
                                <div class="button_sec" id="form-buttons">
                                    <button class="btn btn-primary" id="affiliate-add-form-submit">{{ trans('layout.Add') }}</button>
                                    <button class="btn btn-default" id="affiliate-form-clear">{{ trans('layout.Clear') }}</button>
                                  </div>
                               <div class="button_sec" id="form-loader" style="display:none">
                                <img style="height: 65px;width: 65px;" src="{{ asset('img/lg.double-ring-spinner.gif') }}">
                              </div>
                      
                           </div>
                        <!-- /.card-body -->
                        </div>
                  </div>
             </div>
             </div>
    </section>

    <!-- Edit POPUP -->
    <div class="modal fade" id="msg_detail" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{ trans('affiliate.Update Percentage') }}</h4>
                </div>
                <div class="modal-body">
                    <div class="form-col-3">
                        {{ Form::label('NEW_PERCENTAGE', trans('affiliate.Percentage')) }}
                        {{ Form::text('NEW_PERCENTAGE', '', ['id' => 'NEW_PERCENTAGE', 'class' => 'form-control']) }}
                    </div>
                    <input type="hidden" id="reference">
                    <div class="error" id="modal-error"></div>
                    <br>
                    <div id="popup-button">
                        <button class="btn btn-primary" id="updatePergentage">{{ trans('layout.Submit') }}</button>
                        <button class="btn btn-default" data-dismiss="modal">{{ trans('layout.Close') }}</button>
                    </div>
                    <div id="form-loader" style="display:none"><img style="height:100px; width: 100px"
                            src="{{ asset('img/lg.double-ring-spinner.gif') }}"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Edit POPUP -->

</div>
@endsection
@section('javascript')
@include('datatablejs')
<script type="text/javascript">

$("#partnerType").change(function() {
        var partnerType = $("#partnerType").val();

        if(partnerType != ''){
            var data = new FormData();
            data.append('partnerType', partnerType);
            data.append('_token', '{{ csrf_token() }}');

            $.ajax({
                type: 'POST',
                url: "{{ route('partner.getPartnerList') }}",
                data: data,
                dataType: 'JSON',
                contentType: false,
                processData: false,
                beforeSend: function() {},
                success: function(response) {
                    $('#partnerName').select2('destroy');
                    var option ='<option value="">Select</option>';
                    if (response.status == 200) {
                        var value = response.msg;
                        $.each(value, function(k, v) {
                            option +='<option value="'+k+'">'+v+'</option>';
                        });
                    }
                    
                    $("#partnerName").html(option);
                    $('#partnerName').select2({
                        placeholder: "Select",
                        allowClear: true
                    });
                },
                error: function() {
                    swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                    });
                },
                complete: function() {}
            });
        }else{
            
        }
    });

    $(' .card-primary card-form-1,.add-form').hide();

    $('#list-tab').click(function () {
         $('.card-primary card-form-1,.add-form').hide();
        $(' .card-form-1 ,.table-list').show();
        $('.btn.tab').removeClass('active');
        $(this).addClass('active');
    });

    $('#attach-tab').click(function () {
        $('.card-form-1 ,.table-list').hide();
        $(' card-form-1 add-form,.add-form').show();
        $('.btn.tab').removeClass('active');
        $(this).addClass('active');
    });

    $("#PERCENTAGE").change(function () {
        var num = $('#PERCENTAGE').val();
        if (num < 1) {
            $('#PERCENTAGE').val('');
        }
    });

    var reportTable;
    $("#getReport").click(function () {
        $('#report_title').html("Affiliate Users List :");
        $('#report').show();

        reportTable = $('#table').DataTable({
            "responsive": true,
            "pagingType": "numbers",
            "processing": true,
            "bDestroy": true,
            "serverSide": true,
            "searching": false,
            "aaSorting": [],
            "lengthMenu": [
                [20, 50, 100, 200],
                [20, 50, 100, 200]
            ],
            "columnDefs": [{
                "orderable": false,
                "targets": [3]
            }, {
                "className": 'text-center',
                "targets": [2, 3],

            }],
            "ajax": {
                "url": "{{ route('affiliateSettings.fetch') }}",
                "type": "GET",
                "data": function (d) {
                    d.filter_player = $("#PLAYER").val();
                    d.filter_affiliate_name = $("#PARTNER_NAME").val();
                    d.filter_percentage = $("#PERCENTAGE").val();
                },
                "error": function (e) {
                    swal("{{ trans('layout.Something went wrong') }}", {
                        icon: "warning",
                    });
                },
            },
            "drawCallback": function (response, settings) {
                var api = this.api();
                var rows = api.rows({
                    page: 'current'
                }).nodes();
                if (rows.length > 0) {
                    $('.dt-buttons').show();
                } else {
                    $('.dt-buttons').hide();
                }
            }
        });
    });


    function post() {
        const form = document.createElement('form');
        form.method = 'get';
        form.action = "{{ route('affiliateSettings.download') }}";

        const hiddenField = document.createElement('input');
        hiddenField.type = 'hidden';
        hiddenField.name = 'filter_player';
        hiddenField.value = $("#PLAYER").val();

        form.appendChild(hiddenField);

        const hiddenField2 = document.createElement('input');
        hiddenField2.type = 'hidden';
        hiddenField2.name = 'filter_affiliate_name';
        hiddenField2.value = $("#PARTNER_NAME").val();

        form.appendChild(hiddenField2);

        const hiddenField3 = document.createElement('input');
        hiddenField3.type = 'hidden';
        hiddenField3.name = 'filter_percentage';
        hiddenField3.value = $("#PERCENTAGE").val();

        form.appendChild(hiddenField3);

        document.body.appendChild(form);
        form.submit();
    }

    $(document).on('click', '.update-percentage', function () {
        var tr = $(this).closest('tr');
        var row = reportTable.row(tr);
        var data = reportTable.row($(this).parents('tr')).data();

        $("#NEW_PERCENTAGE").val(data[2]);

        $("#reference").val($(this).data('ref'));
        $("#modal-error").html('');

        $("#form-loader").hide();
        $("#popup-button").show();
        $("#msg_detail").modal({
            backdrop: 'static',
            keyboard: false
        });
    });

    $(document).on('click', '#updatePergentage', function () {
        var percentage = $("#NEW_PERCENTAGE").val();
        var reference = $("#reference").val();

        $("#modal-error").html('');

        var data = new FormData();
        data.append('percentage', percentage);
        data.append('reference', reference);
        data.append('_token', '{{ csrf_token() }}');

        $.ajax({
            type: 'POST',
            url: "{{ route('affiliateSettings.update') }}",
            data: data,
            dataType: 'JSON',
            contentType: false,
            processData: false,
            beforeSend: function () {
                $("#popup-button").hide();
                $("#form-loader").show();
            },
            success: function (response) {
                var message = response.msg;
                var status = response.status;
                if (status == 200) {
                    $('select[name=table_length]').trigger('change');
                    $("#msg_detail").modal('hide');
                    swal(message, {
                        icon: "success",
                    });
                } else {
                    $("#modal-error").html(message);
                }
            },
            error: function () {
                $("#msg_detail").modal('hide');
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
            complete: function () {
                $("#form-loader").hide();
                $("#popup-button").show();
            }
        });
    });

    function deleteRelation(reference) {
        swal({
                title: " {{ trans('affiliate.Alert')  }} ",
                text: "{{ trans('affiliate.Alertdeletemsg') }}",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
            .then((willDelete) => {
                if (willDelete) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: "{{ route('affiliateSettings.delete') }}",
                        method: "POST",
                        dataType: 'json',
                        data: {
                            reference: reference
                        },
                        success: function (response) {
                            if (response.status == 200) {
                                $('select[name=table_length]').trigger('change');
                                swal("{{ trans('affiliate.DeleteSuccess') }}", {
                                    icon: "success",
                                });
                            } else {
                                swal("{{ trans('layout.Something went wrong') }}", {
                                    icon: "warning",
                                });
                            }
                        }
                    });
                } else {

                }
            });
    }
    function checkValidUser(){
        $('#userName').html('');
        $('#partnerName-error').html('');

         var username = $("#player").val();
         if (username.length < 1) {
           return;
        }

         var data = new FormData();
         data.append('username', username);
         data.append('_token', '{{ csrf_token() }}');

         $.ajax({
          type: 'POST',
          url: "{{ route('affiliateSettings.getValidUser') }}",
          data: data,
          dataType: 'JSON',
          contentType: false,
          processData: false,
          beforeSend: function() {
          $("#affiliate-search").show();
         },
         success: function(response) {
          var data = response.msg;
          var status = response.status;
          if (status == 200) {
            $('#userName').html(data.userName);
            $('#partnerName-error').html(data.partnerName)
          } else {
          $("#player-error").html(data);
          }
        },
          error: function() {
           swal("{{ trans('layout.Something went wrong') }}", {
           icon: "warning",
          });
         },
         complete: function() {
         $("#affiliate-search").hide();
        }
       });
    }
    


    function showErrorMessage(message){
        $.each(message, function(k, v) {
         $("#"+k+"-error").html(v);
        });
         return;
    }

    $(document).on('change', '.form-control', function(){
        $(this).closest('div').find('.error-help-block').html('');
    });

    $('#affiliate-add-form-submit').click( function () {
        var formData = new FormData($('#affiliateSettings-form')[0]);
        $.ajax({
        type: 'POST',
        url: "{{ route('affiliateSettings.store') }}",
        data:  formData,
        dataType: 'JSON',
        contentType: false,
        processData: false,
        beforeSend: function () {
            $("#form-buttons").hide();
            $("#form-loader").show();
        },
        success: function (response) {
            var message = response.msg;
            var status = response.status;
            if (status == 422) {
                showErrorMessage(message);
                return true;
            }
            if (status == 200) {
                $('select[name=table_length]').trigger('change');
                swal(message, {
                    icon: "success",
                });
            } else {
                swal(message, {
                    icon: "warning",
                });
                return true;
            }
            $('.error-help-block').html('');
            $('#affiliate-form-clear').trigger('click');
        },
        error: function () {
            swal("{{ trans('layout.Something went wrong') }}", {
                icon: "warning",
            });
        },
        complete: function () {
            $("#form-loader").hide();
            $("#form-buttons").show();
        }
        });
    });

    $(document).on('click', '#affiliate-form-clear', function(e) {
        e.preventDefault();
        $('#userName, .error-help-block').html('')
            
        $('#player, #percentage').val('');
        $('#partnerType, #partnerName').val(null).trigger('change');
    });

    $(document).on('keydown', '.number', function(event){
        if (event.shiftKey == true) {
            event.preventDefault();
            return;
        }

        if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190 || event.keyCode == 110) {
        } else {
            event.preventDefault();
            return;
        }

        if(($(this).val().length == 0) && (event.keyCode == 190 || event.keyCode == 110)){
            event.preventDefault();
            return;
        }

        if(($(this).val().indexOf('.') != -1) && (event.keyCode == 190 || event.keyCode == 110)){
            event.preventDefault();
            return;
        }
    });
</script>
@stop