@extends('layouts.master')

@section('content')

<style>
.pointer{
        cursor: pointer;
    }
</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('defaultSettings.Payment Recommendation 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('Payment Recommendation 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">
                <form id="recommendation-form">
               
                    <!-- <h3 class="card-title">{{ trans('playmoneySettings.Playmoney Settings') }}</h3>  -->
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                          @csrf
                            <div class="form-col-1">
                               {{ Form::label('Default Recommendation',  trans('defaultSettings.Default Recommendation'),['class' => 'required'])}}
                               {{ Form::select('defaultRecommendation', $recommendation, $defaultRecommendationvalue, ['class' => 'form-control select2', 'id' =>'defaultRecommendation', 'placeholder' => 'Select']) }} 
                               <span id='defaultRecommendation-error' class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('Last Purchase Count', trans('defaultSettings.Last Purchase Count'), ['class' => 'required']) }}
                                {{ Form::text('lastPurchaseCount', $lastPurchaseCountvalue, ['id' => 'lastPurchaseCount', 'class' => 'form-control number','maxlength' => 7]) }}
                                <span id='lastPurchaseCount-error' class="error-help-block"></span>
                            </div>
                        <div class="container">
                            <br> 
                            <label onClick="showUpload()"><input type="checkbox" name="uploadCheck" value="1" checked><span class="radio-label pointer">{{trans('defaultSettings.Upload Recommendation Table')}}:</span></label><br>
                            <div class="form-col-1" id="uploadDiv">
                              <input type="file" class="form-control" id="uploadedFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"><br>
                               <button class="btn btn-primary" id="uploadFile">{{ trans('marketing.Upload') }}</button>
                            </div>
                             <span id="uploadData-error" class="error-help-block"></span><br>
                             <b id="totalResult"></b>
                             <br>
                            <table id="exceltable"></table>
                        </div>
                         
                        </div>
                    </div>
               </form>
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            <div class="button_sec" id="form-buttons">
                                <button class="btn btn-primary" id="recommendationSettings-form-submit">{{ trans('layout.Update') }}</button>
                                <button class="btn btn-default" id="recommendationSettings-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>
                    </div>
            </div>
            <!-- /.card-body -->
        </div>
    </section>
</div>
@endsection
@section('javascript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>
<script type="text/javascript">

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

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

$('#recommendationSettings-form-submit').click( function () {

        if(($("input[name='uploadCheck']:checked").val() == 1) && (uploadData == '')){
                swal('Kindly upload a file to proceed or uncheck the upload Excel file option', {
                    icon: "warning",
                });
                return;
            }
  

        var formData = new FormData($('#recommendation-form')[0]);
        formData.append('uploadData', uploadData);

        $.ajax({
          type: 'POST',
          url: "{{ route('paymentRecommendationSettings.update') }}",
          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) {
            swal(message, {
                icon: "success",
            });
           } else {
            swal(message, {
                icon: "warning",
            });
            return true;
           }
        $('.error-help-block').html('');
        },
        error: function () {
         swal("{{ trans('layout.Something went wrong') }}", {
            icon: "warning",
         });
        },
        complete: function () {
         $("#form-loader").hide();
         $("#form-buttons").show();
        }
    });
    

});

    $(document).on('click', '#recommendationSettings-form-clear', function(e) {
    e.preventDefault();
    window.location.replace(window.location.href);
    });

    
    function showUpload(){
        if($("input[name='uploadCheck']:checked").val() == 1){
            $('#uploadDiv, #totalResult').show();
        }else{
            $('#uploadDiv, #totalResult').hide();
        }
    }
    showUpload();

    $("#uploadedFile").change(function () {
        $("#exceltable, #totalResult, #uploadData-error").html('');
        $("#importedData").val('');
    });


$('#uploadFile').click(function (evt) {
        evt.preventDefault();

    swal({
       title: "{{ trans('defaultSettings.Alert')  }} ",
       text: "{{ trans('defaultSettings.Alert msg') }}",
       icon: "warning",
       buttons: true,
       dangerMode: true,
        })
    .then((willUpdate) => {
      if (willUpdate) {
        
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xlsx|.xls)$/;
        /*Checks whether the file is a valid excel file*/  
        if (regex.test($("#uploadedFile").val().toLowerCase())) {
            var xlsxflag = false; /*Flag for checking whether excel is .xls format or .xlsx format*/  
            if ($("#uploadedFile").val().toLowerCase().indexOf(".xlsx") > 0) {  
                xlsxflag = true;  
            }  
           
            /*Checks whether the browser supports HTML5*/  
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();  
                reader.onload = function (e) {
                    var data = e.target.result;  
                    /*Converts the excel data in to object*/  
                    if (xlsxflag) {  
                        var workbook = XLSX.read(data, { type: 'binary' });  
                    }  
                    else {  
                        var workbook = XLS.read(data, { type: 'binary' });  
                    }  
                    /*Gets all the sheetnames of excel in to a variable*/  
                    var sheet_name_list = workbook.SheetNames;  
    
                    var cnt = 0; /*This is used for restricting the script to consider only first sheet of excel*/  
                    sheet_name_list.forEach(function (y) { /*Iterate through all sheets*/  
                        /*Convert the cell value to Json*/  
                        if (xlsxflag) {
                            var exceljson = XLSX.utils.sheet_to_json(workbook.Sheets[y]); 
                            
                        }
                        else {
                            var exceljson = XLS.utils.sheet_to_row_object_array(workbook.Sheets[y]);  
                        }

                        if (exceljson.length > 0 && cnt == 0) {
                            $('#totalResult').html('Imported Total Records: '+exceljson.length);
                            // BindTable(exceljson, '#exceltable');
                            uploadData = JSON.stringify(exceljson);
                            cnt++;
                        }else{
                            swal('Please upload a valid Excel file!', {
                                icon: "warning",
                            });
                        }
                    });  
                    $('#exceltable').show();  
                }
                if (xlsxflag) {/*If excel file is .xlsx extension than creates a Array Buffer from excel*/  
                    reader.readAsArrayBuffer($("#uploadedFile")[0].files[0]);  
                }
                else {
                    reader.readAsBinaryString($("#uploadedFile")[0].files[0]);  
                }
            }
            else {
                swal('Sorry! Your browser does not support HTML5!', {
                    icon: "warning",
                });
            }  
        }  
        else {
            swal('Upload a valid format!', {
                icon: "warning",
            });
        }
    } else {

      }
    });  
});

    function BindTable(jsondata, tableid) {/*Function used to convert the JSON array to Html Table*/  
        var columns = BindTableHeader(jsondata, tableid); /*Gets all the column headings of Excel*/  
        for (var i = 0; i < jsondata.length; i++) {  
            var row$ = $('<tr/>');  
            for (var colIndex = 0; colIndex < columns.length; colIndex++) {  
                var cellValue = jsondata[i][columns[colIndex]];  
                if (cellValue == null)  
                    cellValue = "";  
                row$.append($('<td/>').html(cellValue));  
            }
            $(tableid).append(row$);  
        }
    }

    function BindTableHeader(jsondata, tableid) {/*Function used to get all column names from JSON and bind the html table header*/  
        var columnSet = [];
        var headerTr$ = $('<tr/>');  
        for (var i = 0; i < jsondata.length; i++) {
            var rowHash = jsondata[i];  
            for (var key in rowHash) {  
                if (rowHash.hasOwnProperty(key)) {  
                    if ($.inArray(key, columnSet) == -1) {/*Adding each unique column names to a variable array*/  
                        columnSet.push(key);  
                        headerTr$.append($('<th/>').html(key));  
                    }  
                }  
            }  
        }  
        $(tableid).append(headerTr$);  
        return columnSet;  
    }  



$(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