@extends('admin::curd.index')
@section('heading')
@stop

@section('title')
    <img src="{!! URL::to('img/report/analytics.png') !!}"> &nbsp;{!! ucwords('Reports') !!}
@stop

@section('breadcrumb')
@stop

@section('entry')

@stop

@section('tools')
@stop

@section('content')
    <div class="box-body">
        <div class="nav-tabs-custom">

            <ul class="nav nav-tabs primary">

                <li class="active"><a href="{!! trans_url('admin/valet_parking/report') !!}" class="active">Valet Parking Report </a></li>
            </ul>

            <div class="tab-content">

                <div class="tab-pane active clearfix" id="details">

                    {!! Form::horizondal_open()->id('ValetParkingReportForm')->secure()->method('POST')->files('true')->enctype('multipart/form-data') !!}

                    <div class="col-md-5 col-lg-5">

                        {!! Form::hidden('search[valet_parking.company_id]')->id('company_id')->options(Company::companies(), user('admin.web')->current_comp)->addGroupClass('form-group-sm')->label('Company') !!}

                        {!! Form::select('search[valet_parking.division_id]')->id('division_id')->options(Company::divisions())->addGroupClass('form-group-sm')->label('Division')->placeholder('Select Division') !!}
                        
                        @php
                            $loggedInUser = user('admin.web');
                        @endphp
                        
                        {!! Form::select('search[valet_parking.status]')->id('status')->options(['' => trans('valet_parking::valet_parking.placeholder.status')] + trans('valet_parking::valet_parking.options.status'))-> label(trans('valet_parking::valet_parking.label.status'))-> addGroupClass('form-group-sm')!!}

                        {!! Form::text('search[valet_parking.guest_name]')->type('text')->addGroupClass('form-group-sm')->label('Guset Name')->id('guest_name')->placeholder('Enter Guset Name')!!}
                        
                        {!! Form::text('search[valet_parking.mobile_number]')->type('text')->addGroupClass('form-group-sm')->label('Mobile Number')->id('mobile_number')->placeholder('Enter Visitor Mobile') !!}
                        
                        {!! Form::select('search[valet_parking.guest_type]')->id('guest_type')->options(['' => trans('valet_parking::valet_parking.placeholder.guest_type')] + trans('valet_parking::valet_parking.options.guest_type'))-> label(trans('Guest Type'))-> addGroupClass('form-group-sm')!!}
                        
                        {!! Form::text('search[valet_parking.tag_number]')->type('text')->addGroupClass('form-group-sm')->label('Tag Nnumber')->id('tag_number')->placeholder('Enter Tag Nnumber')!!}
                        
                        {!! Form::select('search[vehicle_id]')->options(ValetParking::vehicles())->addGroupClass('form-group-sm')->label('Vehicle Number')->id('vehicle_id')->placeholder('Enter Vehicle Nnumber')!!}
                        
                    </div>
                    
                    <div class="col-md-5 col-lg-5">

                        {!! Form::select('search[driver_id]')->id('driver_id')->options([])->addGroupClass('form-group-sm')->label('Parking Valet')->placeholder('Select driver')!!}

                        {!! Form::select('search[returned_by]')->id('returned_by')->options([])->addGroupClass('form-group-sm')->label('Retrieval Valet')->placeholder('Select driver')!!}

                        {!! Form::select('search[parking_area_id]')->id('parking_area_id')->options(['' => trans('valet_parking::valet_parking.placeholder.parking_area_id')] + ValetParking::parking_Areas())->addGroupClass('form-group-sm')->label('Parking Area')!!}
                                                                        
                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                Visit Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">
                                {!! Form::date('search[valet_parking.created_at][0]')->id('exp_date_from')->addClass('datepick')->addGroupClass('form-group-sm')->placeholder('From')->raw() !!}
                            </div>

                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                                {!! Form::date('search[valet_parking.created_at][1]')->id('exp_date_to')->addClass('datepick_enddate')->addGroupClass('form-group-sm')->placeholder('To')->raw() !!}
                            </div>

                        </div>

                        {!! Form::select('search[complaint]')
                        -> options(trans('valet_parking::valet_parking.options.complaint'))
                        -> placeholder('Sort by complaints')
                        -> addGroupClass('form-group-sm')
                        -> label('Complaints')
                        -> id('complaint')
                        !!}  

                        {!! Form::select('search[groupby]')->options([
                            'guest_type' => 'Guest Type',
                            'valet_parking.driver_id' => 'Valets',
                        ])->addGroupClass('form-group-sm')->select('guest_type')->label('Group By')->placeholder('Select') !!}

                        
                    </div>
                    <div class="col-md-2 col-lg-2">                        
                        <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="download_excel" class="headpicture" href="#">Download Excel</a>
                        </div>
                        <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="download_summary" class="headpicture" href="#">Download Summary Excel</a>
                        </div>
                        <div class="m-b-20">
                            <i class="fa fa-refresh" style="color:#000;"></i>&nbsp;
                            <a id="resetnow" class="headpicture" style="cursor:pointer;">Reset Filter</a>
                        </div>
                    </div>
                    <div class="col-md-10 col-lg-10">
                        <button type="button" id="gobutton" class="btn btn-success btn-sm" style="width:100%">Go</button>
                    </div>

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs primary">       
            <li class="active"><a href="#tab-graph" data-toggle="tab">Graph</a></li>
            <li><a href="#tab-summary" data-toggle="tab">Data Summary</a></li>
            <li><a href="#tab-full-data" data-toggle="tab">Full Data Set</a></li>
        </ul>

        <div class="tab-content" style="width:100%">            

            <div class="tab-pane active" id="tab-graph">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto; overflow-x: auto;">
                    <table width="100%" align="center" cellpadding="0" cellspacing="0" id="table_1"
                        class="form_table table table-striped">
                        <tr>
                            <td colspan="2">
                                <table width="100%" bgcolor="#FFF" border="0" cellpadding="0" cellspacing="0"
                                    style="padding: 8px 0 0 0;">
                                    <tr></tr>
                                    <tr></tr>
                                    <tr>
                                        <td height="10" class="form_fields_table">&nbsp;</td>
                                        <td width="15%" height="10" colspan="-4" class="form_fields_table">&nbsp;
                                        </td>
                                        <td width="71%" height="10" colspan="-4" class="form_fields_table">&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="form_fields_table" style="padding: 10px;">
                                            <div id="chart_span" style="min-width: 100%; height: 350px; margin: 0 auto;">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <div class="tab-pane" id="tab-summary">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
                    <table id="data_summary" border="0" align="center"
                        class="table table-striped display datatable data-table" cellpadding="0" cellspacing="0">
                    </table>
                </div>
            </div>
            <div class="tab-pane table-responsive" id="tab-full-data" style="width:100%">
                <table id="full_listings" class="table table-striped data-table" width="100%">
                    <thead class="list_head">                        
                        <th>Status</th>
                        <th>Vehicle Number</th>
                        <th>Tag Nnumber</th>
                        <th>Guset Name</th>
                        <th>Mobile Number</th>
                        <th>Guest Type</th>
                        <th>Parking Valet</th>                        
                        <th>Retrieval Valet</th>
                        <th>Parking Area</th>
                        <th>Visit Date</th>
                        <th>Amount</th>
                    </thead>

                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="save-report">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Save Report</h3>
                    <div class="popup_description">Type the name and save report for future use.</div>
                </div>
                <div class="modal-body" style="height:110px;">
                    <div class="form-horizontal">

                        <div class="col-md-12 col-lg-12 m-t-20">
                            {!! Form::horizontal_open()->id('report_save')->method('POST')->files('true')->action(trans_url('admin/save_report')) !!}

                            {!! Form::hidden('screen')->forceValue('valet_parking') !!}

                            {!! Form::text('name')->placeholder('Enter Name')->label('Report Name')->required() !!}

                            {!! Form::close() !!}
                        </div>
                    </div>
                    <div id="resultofsave" class="searchoptiontext"> </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="save-repot" name="Saverep" value="Send"
                        data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="show_report">
        <div class="modal-dialog">
            <div class="modal-content" style="max-width:400px;">
                <div class="modal-header header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Recent Saved Searches</h4>
                </div>
                <div class="modal-body" style="height:210px; overflow-y: auto;">

                    <div id="saved-reports"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" name="Closerep" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

@stop

<script type="text/javascript">
    var chart;
    
    $(document).ready(function() {
        var company = {{ $loggedInUser->current_comp }};
        $(".datepick").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd 00:00:00',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true
        }).prop('type', 'text');

        $(".datepick_enddate").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd 23:59:59',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true
        }).prop('type', 'text');        

        $('#vehicle_id').select2({
            placeholder: 'Search Vehicle Number' ,
            allowClear: true
        });

        $("#returned_by").select2({
            allowClear: true,
            placeholder: 'Select driver',
            ajax: {
                url: "{{ trans_url('admin/user/select/select2') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term, // search term
                        companyId: {{ user('admin.web')->current_comp }},
                        divisionId: $('#divisionid').val(),
                        page: params.page
                    };
                },
                processResults: function(data, params) {

                    params.page = params.page || 1;
                    return {
                        results: data.items,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: true,
            },
            escapeMarkup: function(markup) {
                return markup;
            }, // let our custom formatter work
            initSelection: function(element, callback) {
                callback({
                    id: "{{ @$valet_parking->returned->id }}",
                    name: "{{ @$valet_parking->returned->name }}"
                });
            },
            templateResult: formatRepo4, // omitted for brevity, see the source of this page
            templateSelection: formatRepo4Selection // omitted for brevity, see the source of this page
        });

        $("#driver_id").select2({
            allowClear: true,
            placeholder: 'Select driver',
            ajax: {
                url: "{{ trans_url('admin/user/select/select2') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term, // search term
                        companyId: {{ user('admin.web')->current_comp }},
                        divisionId: $('#divisionid').val(),
                        page: params.page
                    };
                },
                processResults: function(data, params) {

                    params.page = params.page || 1;
                    return {
                        results: data.items,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: true,
            },
            escapeMarkup: function(markup) {
                return markup;
            }, // let our custom formatter work
            initSelection: function(element, callback) {
                callback({
                    id: "{{ @$valet_parking->employee->id }}",
                    name: "{{ @$valet_parking->employee->name }}"
                });
            },
            templateResult: formatRepo4, // omitted for brevity, see the source of this page
            templateSelection: formatRepo4Selection // omitted for brevity, see the source of this page
        });


        function formatRepo4(repo) {
            if (repo.loading) return repo.name;
            var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result'><span>" + repo.name + "</span></div>";

            return markup;
        }


        function formatRepo4Selection(repo) {
            return repo.name ? repo.name : repo.text;
        }

        $('#visitor_category_id').on('change',function(e){
            var id = $(this).val();
            if(id)
            {
            $.ajax({
                type: 'GET',
                url: "{{ trans_url('admin/pass_master/pass_master/get_pass_numbers') }}",
                data: { id: id },
                dataType: 'json',
                success: function(data, textStatus, jqXHR) {
                    var passNoDropdown = $('#pass_id');
                    passNoDropdown.empty(); // Clear the dropdown
                    passNoDropdown.append($('<option>', {
                                    value: '',
                                    text: 'Please select pass no',
                                    disabled: true,
                                    selected: true
                                }));
                    $.each(data, function(index, passNumber) {
                        passNoDropdown.append($('<option>', {
                            value: passNumber.id, // Assuming passNumber has an 'id' field
                            text: passNumber.pass_refno // Assuming passNumber has a 'pass_no' field
                        }));
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('AJAX Error: ' + textStatus + ': ' + errorThrown);
                }
            });
          }
        });

        $('.datepick').change(function() {
            var name = $(this).attr('name');
            var end_date = name.replace('[0]', '[1]');
            var start_date = $(this).val();
            $('input[name="' + end_date + '"]')
                .pickadate('picker')
                .set({
                    min: new Date(start_date + ' 23:59:59'),
                    select: new Date(start_date + ' 23:59:59'),
                })
        });

        function formatRepo(repo) {
            if (repo.loading) return repo.name;
            var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result'><span>" + repo.name + "&nbsp;" + repo.rfc + "&nbsp;" + repo
                .bar_code + "</span></div>";

            return markup;
        }

        function formatRepoSelection(repo) {
            return repo.name;
        }

        @if (@$save_report['search']['company_id'] != '')
            $("select[name='search[division_id]").load(
                '{{ URL::to('admin/company/division/employee') }}/{{ @$save_report['search']['companyid'] }}'
            );
        @endif

        @if (@$save_report['search']['division_id'] != '')
            $("select[name='search[division_id]").load(
                '{{ URL::to('admin/company/division/employee') }}/{{ @$save_report['search']['companyid'] }}/{{ @$save_report['search']['divisionid'] }}'
            );
        @endif

        $("#company_id").change(function() {
            var company = $("#company_id option:selected").val();
            $("#division_id").load('{{ URL::to('/admin/company/division/employee') }}' + '/' + company);
        });

        var filter = $("#ValetParkingReportForm").serialize();
        plotGraph("{{ URL::to('admin/valet_parking/report/graph') }}" + '/' + filter + '');

        $('#view_report').click(function() {
            $('#saved-reports').load("{{ trans_url('admin/valet_parking/save/save_report') }}");
            $('#show_report').modal("show");
        });

        $("#popup-save-report").click(function() {
            $("#name").val('');
            $("#save-report").modal('show');
        });

        $('input[id=exp_date_from]').change(function() {

            $("#exp_date_to").pickadate('picker').set({
                select: $('input[id=exp_date_from]').val(),
                min: new Date($('input[id=exp_date_from]').val())
            });
        });

        $('#resetnow').click(function() {
            $("input[name='search[valet_parking.created_at][0]']").val('');
            $("input[name='search[valet_parking.created_at][1]']").val('');
            $("#department_id").html(initialDepartmentOptions).trigger('change');
            $('#pass_id').html(initialPassNoOptions).trigger('change');
            $("#driver_id").empty();
            $("#returned_by").empty();
            $('#ValetParkingReportForm')[0].reset();
            $('.select2-selection__rendered').html('');

            var filter = $("#ValetParkingReportForm").serialize();
            plotGraph("{{ URL::to('admin/valet_parking/report/graph') }}" + '/' + filter);
            var company = $("#company_id option:selected").val();
            $("#division_id").load('{{ URL::to('/admin/company/division/employee') }}' + '/' + company);
            $('#group_by_label').html('');
            oTable.api().draw();
            
        });

        $('#download_csv').click(function() {
            var filter = $("#ValetParkingReportForm").serialize();
            $('#download_csv').attr('href', "{{ URL::to('admin/valet_parking/report/graph/csv') }}" +
                "/" + filter);
            $('#download_csv').attr("target", "_blank");
        });

        $('#download_excel').click(function() {
            var filter = $("#ValetParkingReportForm").serialize();
            $('#download_excel').attr('href',"{{ URL::to('admin/valet_parking/report/graph/excel') }}" + "/" + filter);
            $('#download_excel').attr("target", "_blank");
        });       
        
        $('#download_summary').click(function() {
            var filter = $("#ValetParkingReportForm").serialize();
            $('#download_summary').attr('href',"{{ URL::to('admin/valet_parking/report/summary') }}" + "/" + filter);
            $('#download_summary').attr("target", "_blank");
        });        

        $('#save-repot').click(function(e) {
            if ($("#report_save").valid() == false) {
                toastr.error('Please enter valid information.', 'Error');
                return false;
            }
            var postData = $("#report_save").serialize();
            var chartData = $("#ValetParkingReportForm").serialize();
            var formURL = "{{ trans_url('admin/save_report') }}";
            $.ajax({
                url: formURL,
                type: "POST",
                data: {
                    data: postData,
                    data1: chartData
                },
                success: function(data, textStatus, jqXHR) {},
                error: function(jqXHR, textStatus, errorThrown) {
                    toastr.error('An error occurred while saving.', 'Error');
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });

            e.preventDefault();
        });

        oTable = $('#full_listings').dataTable({
            "bProcessing": true,
            "sDom": 'R<>rt<ilp><"clear">',
            "bServerSide": true,
            "sAjaxSource": '{!! trans_url('admin') !!}/valet_parking/report',
            "fnServerData": function(sSource, aoData, fnCallback) {

                $('#full_listings .search_bar input, #full_listings .search_bar select').each(
                    function() {

                        aoData.push({
                            'name': $(this).attr('name'),
                            'value': $(this).val()
                        });
                    }
                );
                $('#ValetParkingReportForm select, #ValetParkingReportForm input').each(
                    function() {
                        if ($(this).val() == null || $(this).val() == '') {
                            return;
                        }
                        aoData.push({
                            'name': $(this).attr('name'),
                            'value': $(this).val()
                        });
                    }
                );

                app.dataTable(aoData);
                $.ajax({
                    'dataType': 'json',
                    'data': aoData,
                    'type': 'GET',
                    'url': sSource,
                    'success': fnCallback
                });
            },

            "columns": [  
                {
                    data: 'status'
                },              
                {
                    data: 'vehicle_id'
                },
                {
                    data: 'tag_number'
                },
                {
                    data: 'guest_name'
                },
                {
                    data: 'mobile_number'
                },
                {
                    data: 'guest_type'
                },
                {
                    data: 'driver_id'
                },
                {
                    data: 'returned_by'
                },                                
                {
                    data: 'parking_area_id'
                },                                
                {
                    data: 'created_at'
                },
                {
                    data: 'amount_collected'
                },
            ],

            "pageLength": 25,
        });

        $(document.body).on('click', "#gobutton", function(e) {
            e.preventDefault();
            chart.showLoading();
            var filter = $("#ValetParkingReportForm").serialize();
            var filter_label = '';
            var comma = '';
            $("#ValetParkingReportForm select, #ValetParkingReportForm input").each(function() {
                if ($(this).val() != '' || $(this).val() != null) {
                    filter_label += comma + ' ' + $('#' + $(this).attr('id') + ' :selected')
                        .text();
                    comma = ',';
                }
            });                                  

            plotGraph("{{ URL::to('admin/valet_parking/report/graph') }}" + '/' + filter +
                '');
            $('#full_listings .search_bar').find("." + $(this).attr('id')).prop('disabled', true);
            oTable.api().draw();
        }); 
        var initialPassNoOptions = $('#pass_id').html();  
        var initialDepartmentOptions = $('#department_id').html();      
    });

    function plotGraph(url) {

        var groupby = $('select[name="search[groupby]"]').val();                

        var label = new Array();
        var dataA = new Array();
        var dataB = new Array();
        var dataC = new Array();
        var dataD = new Array();
        var dataE = new Array();
        var dataF = new Array();
        var dataG = new Array();
        var dataH = new Array();
        var dataI = new Array();
        var dataJ = new Array();
        var html = '';
        var color = '';
        var count = 0;
        
        var pending = 0;
        var parked = 0;
        var returned = 0;
        var guest_type_total = 0;
        var guest_type_complaint = 0;
        var amount_collected_by_guest_type = 0;

        var total_parking = 0;
        var parking_complaints = 0;
        var total_returning = 0;
        var returning_complaints = 0;

        var graphData = [];

        if (groupby === 'guest_type') {
            graphData = [
                {
                    name: 'Pending',
                    data: dataD 
                },
                {
                    name: 'Parked',
                    data: dataE 
                },
                {
                    name: 'Returned',
                    data: dataF 
                },
                {
                    name: 'Total',
                    data: dataD 
                },
                {
                    name: 'Complaints',
                    data: dataE ,
                    color: 'red'
                }
            ];
        } else {
                graphData = [
                {
                    name: 'Parking',
                    data: dataG 
                },
                {
                    name: 'Complaints',
                    data: dataH ,
                    color: 'red'
                },
                {
                    name: 'Returning',
                    data: dataI 
                },
                {
                    name: 'Complaints',
                    data: dataJ ,
                    color: 'red'
                }
            ];
        }

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'chart_span',
                    type: 'column'
                },
                title: {
                    text: ''
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    categories: [],
                    labels: {
                        rotation: -55,
                        align: 'right',
                        style: {
                            fontSize: '11px',
                            fontFamily: 'Roboto, sans-serif'
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: 'Value'
                    },
                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                        return '' +
                            this.series.name + ': ' + this.y + '';
                    }
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: true
                },
                series: graphData
            });
        if(groupby){
            html += '<thead class="list_head"><tr height="30" class="listing_headings" >';
            html += '<th width="320" style="padding-left:10px;" >Group By</th>';
            if (groupby === 'guest_type')
            {
                html += '<th width="320" style="padding-left:10px;" >Pending</th>';
                html += '<th width="320" style="padding-left:10px;" >Parked</th>';
                html += '<th width="320" style="padding-left:10px;" >Returned</th>';
                html += '<th width="320" style="padding-left:10px;" >Total</th>';
                html += '<th width="320" style="padding-left:10px;" >Complaints</th>';
                html += '<th width="320" style="padding-left:10px;" >Amount Collected</th>';
            }else{
                html += '<th width="320" style="padding-left:10px;" >Parking</th>';
                html += '<th width="320" style="padding-left:10px;" >Complaints</th>';
                html += '<th width="320" style="padding-left:10px;" >Returning</th>';
                html += '<th width="320" style="padding-left:10px;" >Complaints</th>';
            }
            html += '</tr></thead>';
        }

        $.getJSON(url, function(seriesData) {
            console.log(seriesData);
            
            $.each(seriesData, function(id, key) {                
                if (count % 2 == 0) {
                    color = '#ffffff';
                } else {
                    color = '#e9e9e9'
                }
                label.push(key.labels);
                dataA.push(Number(key.pending));
                dataB.push(Number(key.parked));
                dataC.push(Number(key.returned));
                dataD.push(Number(key.guest_type_total));
                dataE.push(Number(key.guest_type_complaint));
                dataF.push(Number(key.amount_collected_by_guest_type));
                dataG.push(Number(key.total_parking));
                dataH.push(Number(key.parking_complaints));
                dataI.push(Number(key.total_returning));
                dataJ.push(Number(key.returning_complaints));
                pending += parseInt(key.pending);
                parked += parseInt(key.parked);
                returned += parseInt(key.returned);
                guest_type_total += parseInt(key.guest_type_total);
                guest_type_complaint += parseInt(key.guest_type_complaint);
                amount_collected_by_guest_type += parseInt(key.amount_collected_by_guest_type);
                total_parking += parseInt(key.total_parking);
                parking_complaints += parseInt(key.parking_complaints);
                total_returning += parseInt(key.total_returning);
                returning_complaints += parseInt(key.returning_complaints);


                if(groupby){
                    html += '<tr height="25">';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.labels +'</td>'; 
                    if (groupby === 'guest_type'){   
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.pending +'</td>';
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.parked +'</td>';
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.returned +'</td>';
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.guest_type_total + '</td>';
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.guest_type_complaint + '</td>';
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.amount_collected_by_guest_type + '</td>';
                    }else{
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.total_parking + '</td>';
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.parking_complaints + '</td>';
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.total_returning + '</td>';
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.returning_complaints + '</td>';
                    }
                    html += '</tr>';    
                }     
                count++;
            });

            if (count % 2 == 0) {
                color = '#ffffff';
            } else {
                color = '#e9e9e9'
            }

            if(groupby){
                html += '<tr height="25">';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">Total</td>';
                    if (groupby === 'guest_type'){   
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + pending + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + parked + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + returned + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + guest_type_total + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + guest_type_complaint + ' </td>';                
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + amount_collected_by_guest_type + '</td>';
                }else{
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + total_parking + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + parking_complaints + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + total_returning + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + returning_complaints + '</td>';
                }
                html += '</tr>';
            }
            $('#data_summary').html(html)
            chart.xAxis[0].setCategories(label);
            if (groupby === 'guest_type'){   
                chart.series[0].setData(dataA, true);
                chart.series[1].setData(dataB, true);
                chart.series[2].setData(dataC, true);
                chart.series[3].setData(dataD, true);
                chart.series[4].setData(dataE, true);
                chart.series[5].setData(dataF, true);
            }else{
                chart.series[0].setData(dataG, true);
                chart.series[1].setData(dataH, true);
                chart.series[2].setData(dataI, true);
                chart.series[3].setData(dataJ, true);
                console.log();
            }
            chart.redraw();
            chart.hideLoading();
        });
        $(".datepick").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true
        }).prop('type', 'text');

    }

</script>

<style type="text/css">
    .header {
        background: #3c8dbc;
        color: white;
    }
</style>