@extends('layouts.master')

@section('content')
<style type="text/css">

</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">Rummy LeaderBoard Report</h1>
                </div>
                <!-- /.col -->
                <div class="col-sm-3"></div>
                
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <section class="content">
        <div class="card" id="filterDiv">
            <div class="card-header">
                <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">  
                            <b>Mini Games Type:</b> <br>
                            {{ Form::select('MINIGAMES_TYPE_NAME', $minigames_type, 'Points Rummy', ['class' => 'form-control select2','placeholder' => trans('reports.Select option'), 'id' => 'MINIGAMES_TYPE_NAME']) }}
                        </div>

                        <div class="form-col-1">
                          {{ Form::label('USERNAME', trans('player.Username')) }}
                          {{ Form::text('USERNAME','', ['id' => 'USERNAME', 'class' => 'form-control', 'placeholder' => trans('player.Username')]) }}
                        </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" value="">
                            <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="reloadPage">{{ trans('layout.Clear') }}</button>
                        </div>
                    </div>
                </div>


                


            </div>

            <!-- /.card-body -->
        </div>

        <!-- <p>csdcsdcs</p> -->

        <!-- <div class="card" id="3232">
            <div class="card-header">
                <h3 class="card-title" id="report_title">Note: </h3>
            </div>
        </div> -->


        <div class="card" id="report" style="display:none">
            <div class="card-header">
                <h3 class="card-title" id="report_title"></h3>
                <div class="row total_base_ment">
                    <div class="total_base_flex">
                        <div class="total_base"><span class="form-col-1 count" > Rummy LeaderBoard Report</span></div>
                    </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> -->
                </div>
            </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="table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th class="text-center">SNo</th>
                            <th class="text-center">Username</th>
                            <th class="text-center">No of Games played</th>

                        </tr>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
    </section>

</div>

@endsection
@section('javascript')
@include('datatablejs')
<script type="text/javascript">
    var reportTable;
    $("#getReport").click(function() {
        $("#selected_datatime").val($("#selected_date").val());
        $('#report_title').html("Rummy LeaderBoard Report: " + $('.daterange_span').html());
        $('#report').show();


        jQuery.fn.DataTable.Api.register('buttons.exportData()', function(options) {
            if (this.context.length) {
                // make columns for sorting
                var columns = [];
                $.each(this.context[0].aoColumns, function(key, value) {
                    columns.push({
                        'data': value.data,
                        'name': value.name,
                        'searchable': value.bSearchable,
                        'orderable': value.bSortable
                    });
                });

                // make option for sorting
                var order = [];
                $.each(this.context[0].aaSorting, function(key, value) {
                    order.push({
                        'column': value[0],
                        'dir': value[1]
                    });
                });



                var jsonResult = $.ajax({
                    "url": "{{ route('rummyleaderboardReport.fetch') }}",
                    "type": "GET",
                    "data": {
                        columns: columns,
                        order: order,
                        filter_date: $("#selected_datatime").val(),
                        filter_MINIGAMES_TYPE_NAME: $("#MINIGAMES_TYPE_NAME").val(),
                        filter_USERNAME: $("#USERNAME").val(),
                        length: -1,
                        draw: 1,
                    },
                    dataType: "json",
                    success: function(result) {
                        //Do nothing
                        // console.log(result)
                    },
                    async: false
                });

                var result = jsonResult.responseJSON.data;

                // console.log(jsonResult);
                /* $.each(result,function(index,element){  
                     element.splice(3)
                 });*/
                return {
                    body: result,
                    header: $("#table thead tr th").map(function() {
                        return this.innerText;
                    }).get()
                };
            }
        });



        reportTable = $('#table').DataTable({
            "responsive": true,
            "pagingType": "numbers",
            "processing": true,
            "bDestroy": true,
            "serverSide": true,
            "searching": false,
             "bSort" : false,
            "aaSorting": [],
            "lengthMenu": [
                [20, 50, 100, 200],
                [20, 50, 100, 200]
            ],
            "columnDefs": [{
                    "className": 'text-center',
                    "targets": [0],
                },
                {
                    "className": 'text-center',
                    "targets": [1,2],
                }
            ],
            dom: 'lBfrtip',
            buttons: [{
                extend: 'pdfHtml5',
                title: function() {
                    return "Rummy LeaderBoard Report";
                },
                orientation: 'landscape',
                pageSize: 'LEGAL',
                text: '<i class="fa fa-file-pdf-o"> PDF</i>',
                titleAttr: 'PDF'
            }],
            "ajax": {
                "url": "{{ route('rummyleaderboardReport.fetch') }}",
                "type": "GET",
                "data": function(d) {
                    d.filter_date = $("#selected_datatime").val();
                    d.filter_MINIGAMES_TYPE_NAME = $("#MINIGAMES_TYPE_NAME").val();
                    d.filter_USERNAME = $("#USERNAME").val();
                },
                "error": function(e) {
                    swal("{{ trans('layout.Something went wrong') }}", {
                        icon: "warning",
                    });
                },
            },
            "drawCallback": function(response, settings) {
                var totalIpAccumulatedPoints = response.json.TotalGamesPlayed;
                var api = this.api();
                var rows = api.rows({
                    page: 'current'
                }).nodes();
                if (rows.length > 0) {
                    $('.dt-buttons').show();
                } else {
                    $('.dt-buttons').hide();
                }
                $('#totalIpAccumulatedPoints').html("Total Number of Games Played : " + totalIpAccumulatedPoints);
            }
        });
    });


    function post() {
        const form = document.createElement('form');
        form.method = 'get';
        form.action = "{{ route('rummyleaderboardReport.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_MINIGAMES_TYPE_NAME';
        hiddenField2.value = $("#MINIGAMES_TYPE_NAME").val();

        form.appendChild(hiddenField2);


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

        form.appendChild(hiddenField3);



        document.body.appendChild(form);
        form.submit();
    }
</script>
@stop