@extends('layouts.master')

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

    .radio-label {
        position: absolute;
        margin: -2px 0px 0px 7px;
        cursor: pointer;
    }

    .error {
        color: red;
    }

    button.btn.tab.active {
        background-color: #12171a;
        color: white;
        cursor: auto;
    }

    button.btn.tab {
        border: 1px solid #060706;
    }
</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.Responsible Gaming Master Log') }}</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('Responsible Gaming Master Log') }}</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="pending-tab">Pending</button><button class="btn tab" id="active-tab">Active</button>
                <h3 class="card-title">{{ trans('layout.Filter') }}</h3>
                <div class="col-md-6 card-primary card-form-1">
                    <div class="card-body">
                        <div class="form-col-1">
                            {{ Form::label('USERNAME', trans('responsibleGaming.Username')) }}
                            {{ Form::text('USERNAME', '', ['id' => 'USERNAME', 'class' => 'form-control', 'placeholder' => trans('responsibleGaming.Username')]) }}
                        </div>
                        <div class="form-col-1">
                            {{ Form::label('ALERTTYPE', trans('responsibleGaming.Alert Type')) }}
                            {{ Form::select('ALERTTYPE', $alertType, '', ['class' => 'form-control select2','placeholder' => trans('reports.Select option'), 'id' => 'ALERTTYPE']) }}
                        </div>
                        <div class="form-col-1">
                            {{ Form::label('DATE_RANGE',trans('layout.Select Date Range')) }}<br>
                            <button type="button" style="width: 100%;" class="btn btn-default" id="daterange-btn">
                                <span class="daterange_span pull-left">{{ trans('layout.Select Date Range') }}</span>
                            </button>
                            <input type="hidden" name="selected_date" id="selected_date">
                            <input type="hidden" name="selected_datatime" id="selected_datatime">
                        </div>
                        <br> <br>
                        <div class="button_sec">
                            <button class="btn btn-primary" id="getReport">{{ trans('layout.Submit') }}</button>
                            <button class="btn btn-default" id="reloadPages">{{ trans('layout.Clear') }}</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <div class="card" id="pendingreport" style="display:none">
            <div class="card-header">
                <h3 class="card-title" id="report_title"></h3>
            </div>
            <div class="card-body">
                <div class="container">
                    <br>
                    {{ Form::open(['id' =>'upload-form','enctype'=>"multipart/form-data"]) }}
                    <label onClick="showUpload()"><input type="checkbox" name="uploadCheck" value="1" checked><span class="radio-label pointer">
                            {{trans('marketing.Upload Excel file')}}:
                            <a href="{{ asset('img/Problem_Gaming_Players_Sample_excel.xlsx') }}">Sample File</a><br>
                        </span></label>

                    <div class="form-col-1" id="uploadDiv">
                        <label>Problem Gaming Players Upload for</label>
                        <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 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>
                    {{ Form::close() }}
                </div>
                <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="pendingtable" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th class="text-center">{{ trans('responsibleGaming.Date') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Username') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Ace Level') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Alert Type') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Action') }}</th>
                        </tr>
                    </thead>
                </table>

            </div>
            <!-- /.card-body -->
        </div>
        <div class="card" id="activereport" style="display:none">
            <div class="card-header">
                <h3 class="card-title" id="report_title"></h3>
            </div>
            <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="activetable" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th class="text-center">{{ trans('responsibleGaming.Date') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Username') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Ace Level') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Alert Type') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Last Action Date') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Enabled Action') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Duration') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Comments') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Action') }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
    </section>

    <div class="modal fade" id="enable_action" 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">Enable Action</h4>
                </div>
                <div class="modal-body">
                    <form id="Action-form">
                        @csrf
                        <input type="hidden" id="MASTER_LOG_ID" name="MASTER_LOG_ID">
                        <input type="hidden" id="ACTION_TYPE" name="ACTION_TYPE">
                        <div class="radio">
                            <label><input type="radio" name="NOACTION" value="0" id="NOACTION"><span class="radio-label">No Action</span></label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" name="ADMINACTION[0]" value="Lock Cash games and Cash Tourneys" id="ADMINACTION1"><span class="radio-label">Lock Cash games and Cash Tourneys</span></label>
                        </div>

                        <div class="checkbox">
                            <label><input type="checkbox" name="ADMINACTION[1]" value="Account Closure" id="ADMINACTION2"><span class="radio-label">Account Closure</span></label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" name="ADMINACTION[2]" value="Decrease Purchase Limits by 50%" id="ADMINACTION3"><span class="radio-label">Decrease Purchase Limits by 50%</span></label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" name="ADMINACTION[3]" value="Lock Higher Blinds" id="ADMINACTION4"><span class="radio-label">Lock Higher Blinds</span></label>
                        </div>
                        <span id="ADMINACTION-error" class="error-help-block"></span>
                        <div class="form-col-1 duration">
                            {{ Form::label('DURATION', trans('responsibleGaming.Duration'), ['class' => 'required']) }}
                            {{ Form::select('DURATION', $duration, '', ['class' => 'form-control select2','placeholder' => trans('reports.Select'), 'id' => 'DURATION']) }}
                        </div>
                        <span id="DURATION-error" class="error-help-block"></span>
                        <div class="form-col-1">
                            {{ Form::label('COMMENTS', trans('helpdesk.Comment'), ['class' => 'required']) }}
                            {{ Form::textarea('COMMENTS','', ['id' => 'COMMENTS', 'class' => 'comment_area','cols'=>'25', 'rows'=>'5', 'maxlength'=>'200']) }}
                        </div>
                        <span id="COMMENTS-error" class="error-help-block"></span>
                        <br>
                        <div class="error" id="modal-error"></div>
                        <div id="popup-button">
                            <button class="btn btn-primary" id="actionSubmit">{{ trans('responsibleGaming.Enable') }}</button>
                        </div>
                        <div id="form-loader" style="display:none"><img style="height:100px; width: 100px" src="{{ asset('img/lg.double-ring-spinner.gif') }}"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('javascript')
@include('datatablejs')
<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">
    $('#pending-tab').click(function() {
        $('.btn.tab').removeClass('active');
        $(this).addClass('active');
        $("#getReport").trigger('click');
    });

    $('#active-tab').click(function() {
        $('.btn.tab').removeClass('active');
        $(this).addClass('active');
        $("#getReport").trigger('click');
    });

    //Error Message
    function showErrorMessage(message) {
        $('.error-help-block').html('');
        $.each(message, function(k, v) {
            $("#" + k + "-error").html(v);
        });
        return;
    }
    $(document).on('click', '#reloadPages', function(e) {

        e.preventDefault();
        if ($("#pending-tab").is('.btn.tab.active')) {
            window.location.reload();
        }
        if ($("#active-tab").is('.btn.tab.active')) {
            $('#USERNAME').val('');
            $('.select2').select2('destroy');
            $(this).closest('form').find("select").val('');
            $('.select2').select2({
                placeholder: "Select",
                allowClear: true
            });

            $("#getReport").trigger('click');
        }

    });

    $(document).ready(function() {
        var reportTable;
        $("#getReport").click(function() {
            $("#selected_datatime").val($("#selected_date").val());
            $('#report_title').html("Responsible Gaming Master Log: " + $('.daterange_span').html());
            if ($("#pending-tab").is('.btn.tab.active')) {
                var table = "pendingtable";
                $('#pendingreport').show();
                $('#activereport').hide();
                var orderabletargets = [2, 4];
                var centertargets = [0, 1, 2, 3, 4];

            }
            if ($("#active-tab").is('.btn.tab.active')) {
                var table = "activetable";

                $('#activereport').show();
                $('#pendingreport').hide();
                var orderabletargets = [1, 2, 5, 7, 8];
                var centertargets = [0, 1, 2, 3, 4, 5, 6, 7, 8];
            }

            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": orderabletargets
                    },
                    {
                        "className": 'text-center',
                        "targets": centertargets
                    }
                ],
                "ajax": {
                    "url": "{{ route('masterLog.fetch') }}",
                    "type": "GET",
                    "data": function(d) {
                        d.filter_tableType = table;
                        d.filter_date = $("#selected_datatime").val();
                        d.filter_username = $("#USERNAME").val();
                        d.filter_alertType = $("#ALERTTYPE").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();
                    }
                }
            });
        });
        $("#getReport").trigger('click');
    });

    //Insert modal popup
    function takeAction(masterLogId) {
        $('.error-help-block').html('');
        $("#modal-error").html("");
        $("input[type=checkbox]").prop('checked', false);
        $("#NOACTION").prop('checked', false);
        $(".duration").hide();
        $("#COMMENTS").val("");
        $('#MASTER_LOG_ID').val(masterLogId);
        $("#enable_action").modal({
            backdrop: 'static',
            keyboard: false
        });
    }

    $('#NOACTION').click(function() {
        if ($('#NOACTION').is(':checked')) {
            $("input[type=checkbox]").prop('checked', false);
            $(".duration").hide();
            var actionTaken = $('#NOACTION').val();
        }
    });
    $("input[type=checkbox]").click(function() {
        $("#NOACTION").prop('checked', false);
        $(".duration").show();
    });


    //edit
    function editAction(masterLogId, actionType) {
        $('.error-help-block').html('');
        $("input[type=checkbox]").prop('checked', false);
        $("#NOACTION").prop('checked', false);
        $('#MASTER_LOG_ID').val(masterLogId);
        $('#ACTION_TYPE').val(actionType);
        $("#modal-error").html("");
        $.ajax({
            url: "{{ route('masterLog.edit') }}",
            method: "GET",
            dataType: 'json',
            data: {
                masterLogId: masterLogId,
                actionType: actionType,

            },
            success: function(response) {
                if (response.status == 200) {
                    var data = response.data;
                    if (data.gameBreakActive == 1) {
                        $('#ADMINACTION1').prop('checked', true);
                    }
                    if (data.breakActive == 1) {
                        $('#ADMINACTION2').prop('checked', true);
                    }
                    if (data.cashActive == 1) {
                        $('#ADMINACTION4').prop('checked', true);
                    }
                    if (data.depositLimitReduceStatus == 1) {
                        $('#ADMINACTION3').prop('checked', true);
                    }
                    $("#DURATION").val(data.durationId);

                    $('#COMMENTS').val(data.comments);

                    $("#enable_action").modal({
                        backdrop: 'static',
                        keyboard: false
                    });
                } else {
                    swal("{{ trans('layout.Something went wrong') }}", {
                        icon: "warning",
                    });
                }
            }
        });
    }

    //Modal popup submit
    $(document).on('click', '#actionSubmit', function(e) {
        e.preventDefault();
        $("#modal-error").html("");
        var checkedNum = $('input[type=checkbox]:checked').length;
        if ((!$("#NOACTION").is(":checked")) && (checkedNum <= 0)) {
            $("#modal-error").html("Please select atleast one action");
            return;
        }
        if (($("#NOACTION").is(":checked")) && (checkedNum > 0)) {
            $("#modal-error").html("Please select either No action or other actions");
            return;
        }

        var data = new FormData($('#Action-form')[0]);
        var url = '';
        var name = '';
        if ($('#ACTION_TYPE').val() == 'update') {
            url = "{{ route('masterLog.update') }}";
            name = 'select[name=activetable_length]';
        } else {
            url = "{{ route('masterLog.actionUpdate') }}";
            name = 'select[name=pendingtable_length]';
        }

        $.ajax({
            type: 'POST',
            url: url,
            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) {
                    $(name).trigger('change');
                    $('#enable_action').modal('hide');
                    swal(message, {
                        icon: "success",
                    });
                }
                if (status == 422) {
                    showErrorMessage(message);
                    return;

                } else {
                    $("#enable_action").modal('hide');
                    swal(message, {
                        icon: "warning",
                    });
                }
            },
            error: function() {
                $("#enable_action").modal('hide');
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
            complete: function() {
                $("#form-loader").hide();
                $("#popup-button").show();
            }
        });
    });

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

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

        form.appendChild(hiddenField);

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

        form.appendChild(hiddenField2);

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

        form.appendChild(hiddenField3);

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



    $('.uploadFile').click(function(e) {
        // console.log($("input[name='uploadCheck']:checked").val());
        e.preventDefault();
        if ($('#uploadedFile').val() == "" || typeof($('#uploadedFile').val()) == "undefined" || $('#uploadedFile').val() == null) {
            swal('Kindly upload a file to proceed or uncheck the upload Excel file option', {
                icon: "warning",
            });

            return false;
        }

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

        $.ajax({
            type: "POST",
            url: "{{ route('masterLog.storePendingData') }}",
            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();
            }
        });

    });



    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('');
    });


    $('#uploadedFile').change(function() {
        //evt.preventDefault();

        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",
            });
        }
    });

    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;
    }
</script>


@stop