@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="" class="active">Booking Report Details</a></li>
            </ul>

            <div class="tab-content">

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

                    {!! Form::horizondal_open()->id('BookingReportForm')->secure()->method('POST')->files('true')->enctype('multipart/form-data') !!}
                    <div class="col-md-5 col-lg-5">

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

                        {!! Form::select('search[booking_requests.division_id]')->options([])->id('division_id')->addGroupClass('form-group-sm')->label('Divsion')->placeholder('Select division') !!}

                        {!! Form::select('search[booking_requests.department_id]')->options(Department::allDepartments())->id('department_id')->addGroupClass('form-group-sm')->label('Department')->placeholder('Select department') !!}
                        
                        {!! Form::select('search[booking_requests.room_type]')->options(client_config('facility_booking.options.room_type') ?: trans('location::sub_location.options.room_type'))->id('room_type')->addGroupClass('form-group-sm')->label('Room Type')->placeholder('Select room type') !!}
                        
                        {!! Form::select('search[booking_requests.sub_location_id]')->options([])->id('sublocation_id')->addGroupClass('form-group-sm')->label('Room')->placeholder('Select room') !!}
                        
                        {{-- {!! Form::select('search[assets.work_department_id]')->options(WorkDepartment::AllWorkDepartments())->addGroupClass('form-group-sm')->label('Work Department')->placeholder('Select Work Department')->id('workdepartmentid') !!} --}}
                    </div>
                    <div class="col-md-5 col-lg-5">
                        {!! Form::select('search[booking_requests.groupby]')->options([
                            'booking_requests.sub_location_id' => 'Room',
                            'booking_requests.department_id' => 'Department',
                            ])->id('groupby')->addGroupClass('form-group-sm')->label('Group By') !!}

                        {!! Form::select('search[booking_requests.status][]')
                             ->addClass('js-multiple')
                             -> multiple(true)             
                             ->options(trans('booking_request::booking_request.options.status'))
                             ->id('status')
                             ->addGroupClass('form-group-sm')
                             ->label('Status') !!}

                        {!! Form::select('search[booking_requests.meeting_type]')->options(trans('booking_request::booking_request.options.meeting_type'))->id('meeting_type')->addGroupClass('form-group-sm')->label('Meeting Type')->placeholder('Select meeting type') !!}

                        {!! Form::select('search[booking_requests.conducted_remarks]')->options(trans('booking_request::booking_request.options.conducted_remarks'))->id('conducted_remarks')->addGroupClass('form-group-sm')->label('List Meetings')->placeholder('All') !!}

                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                Booking Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">

                                {!! Form::date('search[booking_date][0]')->id('report_date_from')
                                 ->addGroupClass('form-group-sm')
                                 ->addClass('datepick_from')
                                 ->placeholder('From')->raw() !!}
                            </div>

                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                                {!! Form::date('search[booking_date][1]')
                                ->id('report_date_to')
                                ->addClass('datepick_to')
                                ->addGroupClass('form-group-sm')->placeholder('To')->raw() !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-lg-2">
                        <div class="m-b-20">
                            <img src="{!! URL::to('img/report/order.png') !!}">&nbsp;
                            <a id="download_report" class="headpicture" href="#">Download Report</a>
                        </div>
                        <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="download_csv" class="headpicture" href="#">Download Csv</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 ">
            <div class="tab-pane table-responsive 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="30" colspan="3" class="form_fields_table" style="padding:5px;"><b>Filters:</b><span style="padding-left:30px;" id="filters_label"></span></td>
                                                    </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: 400px; 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 width="100%" 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">
                <table id="full_listings" class="table table-striped data-table" width="100%">
                    <thead class="list_head">
                        <th>Ref No.</th>
                        <th>Requested By </th>
                        <th>Requested Date</th>
                        <th>Department</th>
                        <th>Room</th>
                        <th>Meeting Title</th>
                        <th>Meeting Type</th>
                        <th>Room Type</th>
                        <th>VIP/Celebrities</th>
                        <th>Coordinator Name</th>
                        <th>Coordinator Email</th>
                        <th>Coordinator Mobile</th>
                        <th>Booking Date  </th>
                        <th>Start Time </th>
                        <th>End Time</th>
                        <th>Status </th>
                        <th>Conducted Start Time</th>
                        <th>Conducted End Time</th>
                        <th>Conducted Duration</th>
                        <th>No. of PAX</th>
                        <th>No. of PAX Attended</th>
                        <th>Company </th>
                        <th>Division</th>
                    </thead>

                </table>
                <div id="status-fields" style="text-align: right"></div>
            </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('assets/booking_request') !!}

                            {!! 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() {
        $('.js-multiple').select2();
        loadRooms();

        // When room type changes, load filtered rooms
        $('#room_type').change(function () {
            loadRooms();
        });

        function loadRooms(selectedId = null) {
            var room_type = $('#room_type').val();

            console.log(room_type);

            if (!room_type) {
                // $('#sublocation_id').load("{{ url('admin/location/all/sub_location/location/0') }}");
                return;
            }

            $.ajax({
                url: "{{ url('admin/facility_booking/booking_request/rooms') }}",
                type: 'GET',
                data: { room_type: room_type },
                dataType: 'json',
                success: function (data) {
                    var dropdown = $('#sublocation_id');
                    dropdown.empty().append('<option value="">Select room</option>');

                    $.each(data, function (key, value) {
                        dropdown.append('<option value="' + key + '">' + value + '</option>');
                    });

                    if (selectedId) {
                        dropdown.val(selectedId).trigger('change');
                    }
                }
            });
        }

        var today = new Date();
        var initialMax = new Date();
        initialMax.setDate(today.getDate() + 30);

        // TO picker
        var toPicker = $(".datepick_to").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd 23:59:59',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true,
            onStart: function () {
                // Default to +30 days from today
                this.set('select', initialMax);
                this.set('max', initialMax); // no min so past dates allowed
            }
        }).pickadate('picker');

        // FROM picker
        $(".datepick_from").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd 00:00:00',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true,
            onStart: function () {
                // Default highlight today
                this.set('select', today);
                this.set('min', false); // explicitly allow all past dates
            },
            onSet: function (context) {
                if (context.select) {
                    var fromDate = new Date(context.select);
                    var maxToDate = new Date(fromDate);
                    maxToDate.setDate(fromDate.getDate() + 30);

                    // Update TO picker range
                    toPicker.set('min', fromDate);
                    toPicker.set('max', maxToDate);
                    toPicker.set('select', maxToDate);
                }
            }
        }).prop('type', 'text');

        $(".datepick_to").prop('type', 'text');

        // When FROM date changes manually
        $('.datepick_from').change(function () {
            var name = $(this).attr('name');
            var end_date = name.replace('[0]', '[1]');
            var start_date = $(this).val();

            // Ensure TO date updates accordingly
            $('input[name="' + end_date + '"]')
                .pickadate('picker')
                .set({
                    min: new Date(start_date + ' 00:00:00'),
                    select: new Date(start_date + ' 00:00:00')
                });
        });

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

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

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

        $("#company_id").change(function() {
            if ($("#company_id option:selected").val() != '') {
                var company = $("#company_id option:selected").val();

            } else {
                $("#division_id").val('');

                var company = 0;
            }
            $("#division_id").load('{{ URL::to('admin/company/accessible_divisions/employee') }}' + '/' +
                company);

        });

        $("#company_id,#division_id").change(function() {
            if ($("#company_id").val() != '' && $("#division_id option:selected").val() != '') {
                var company = $("#company_id").val();
                var division = $("#division_id option:selected").val();
            } else {
                $("#location_id").val('');
                $("#block_id").val('');

                var company = 0;
                var division = 0;
            }
        });

        $("#block_id").change(function() {
            var block = $("#block_id option:selected").val();
            if(block){
                $("#section_id").load('{{ URL::to('admin/block/all/section/block') }}' + '/' + block);
            }
        });

        $("#location_id").change(function() {
            if ($("#location_id option:selected").val() != '') {
                var location = $("#location_id option:selected").val();

            } else {
                $("#sublocation_id").val('');

                var location = 0;
            }
        });



        $("#company_id,#division_id,#block_id,#section_id").change(function() {
            if ($("#company_id").val() != '' && $("#division_id option:selected").val() != '' && $(
                    "#block_id option:selected").val() != '' && $("#section_id option:selected")
                .val() != '') {
                var company = $("#company_id").val();
                var division = $("#division_id option:selected").val();
                var block = $("#block_id option:selected").val();
                var section = $("#section_id option:selected").val();
                // $("#location_id").load('{{ URL::to('admin/location/all/location/location') }}'+'/'+company+'/'+division+'/'+block+'/'+section);

            } else {
                $("#location_id").val('');
                var company = 0;
                var division = 0;
            }
        });
        var filter = $("#BookingReportForm").serialize();
        plotGraph("{{ URL::to('admin/facility_booking/report/graph') }}" + '/' + filter +
            '');

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

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

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

        $('#resetnow').click(function() {
            $("input[name='search[work_due][0]']").val('');
            $("input[name='search[work_due][1]']").val('');
            $("input[name='search[booking_date][0]']").val('');
            $("input[name='search[booking_date][1]']").val('');

            $("input[name='search[verification_date][0]']").val('');
            $("input[name='search[verification_date][1]']").val('');
            $('#sublocation_id').html('<option value="" selected>Select room</option>');
            $('.select2-selection__rendered').html('');
            $('#BookingReportForm')[0].reset();
            var today = new Date();
            var next30 = new Date();
            next30.setDate(today.getDate() + 30);

            $('.datepick_from').pickadate('picker').set('select', today);
            $('.datepick_to').pickadate('picker').set('select', next30);
            var filter = $("#BookingReportForm").serialize();
            plotGraph("{{ URL::to('admin/facility_booking/report/graph') }}" + '/' +
                filter +
                '');
            $('#group_by_label').html('');
            oTable.api().draw();
        });

        $('#download_report').click(function() {
            var filter = $("#BookingReportForm").serialize();
            $('#download_report').attr('href',
                "{{ URL::to('admin/facility_booking/report/graph/pdf') }}" + "/" +
                filter);
            $('#download_report').attr("target", "_blank");
        });

        $('#download_csv').click(function() {
            var filter = $("#BookingReportForm").serialize();
            $('#download_csv').attr('href',
                "{{ URL::to('admin/facility_booking/report/graph/csv') }}" + "/" +
                filter);
            $('#download_csv').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 = $("#BookingReportForm").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');

                }
            });

            e.preventDefault();
        });

        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: [{
                name: 'Requested',
                data: []
            }, {
                name: 'Approved',
                data: []
            },
            {
                name: 'Cancelled',
                data: []
            },  
            {
                name: 'Rejected',
                data: []
            },
            {
                name: 'Conducted',
                data: []
            },  
            {
                name: 'All',
                data: []
            }]
        });


        oTable = $('#full_listings').dataTable({
            "bProcessing": true,
            "sDom": 'R<>rt<ilp><"clear">',
            "bServerSide": true,
            "sAjaxSource": '{!! trans_url('admin') !!}/facility_booking/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()
                        });
                    }
                );
                $('#BookingReportForm select, #BookingReportForm 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
                });



            },

            "fnPreDrawCallback": function(oSettings) {
                /* reset currData before each draw*/
                currData = [];
            },
            "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                /* push this row of data to currData array*/
                currData.push(aData);

            },
            "fnDrawCallback": function(oSettings) {
                /* can now access sorted data array*/
                // count_status = {};

                // currData.forEach(function(x) {
                //     count_status[x.status] = (count_status[x.status] || 0) + 1;
                // });
                // $('#status-fields').html('Assets Status =');
                // Object.keys(count_status).map(function(key, index) {
                //     $('#status-fields').append(' <b>' + key + ' : ' + this[key] + ((key !=
                //         "Verified") ? '</b>,' : '</b>'));
                // }, count_status);
            },
            "columns": [
            
                {
                    data: 'id',
                    render: function(data, type, row, meta) {
                        return row.uid;
                    }
                },
                {
                    data: 'user_id'
                },
                {
                    data: 'created_at'
                },
                {
                    data: 'department'
                },
                {
                    data: 'sublocation'
                },
                {
                    data: 'title'
                },
                {
                    data: 'meeting_type'
                },
                {
                    data: 'room_type'
                },
                {
                    data: 'vip_or_celebrities'
                },
                {
                    data: 'coordinators_name'
                },
                {
                    data: 'coordinators_email'
                },
                {
                    data: 'coordinators_mobile'
                },
                {
                    data: 'booking_date'
                },
                {
                    data: 'start_time'
                },
                {
                    data: 'end_time'
                },
                {
                    data: 'status'
                },
                {
                    data: 'conducted_start_time'
                },
                {
                    data: 'conducted_end_time'
                },
                {
                    data: 'conducted_duration'
                },
                {
                    data: 'no_of_pax'
                }, 
                {
                    data: 'no_of_pax_attended'
                },
                {
                    data: 'company'
                }, {
                    data: 'division'
                }
            ],

            "pageLength": 25,
             order: [[0, 'desc']]

        });


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

                plotGraph("{{URL::to('admin/facility_booking/report/graph')}}" +'/' + filter + '');
            $('#full_listings .search_bar').find("." + $(this).attr('id')).prop('disabled', true);
            oTable.api().draw();

        });
    });

    function plotGraph(url) {
        function formatToDaysHoursMinutes(totalMinutes) {
                    var days = Math.floor(totalMinutes / (24 * 60));
                    var hours = Math.floor((totalMinutes % (24 * 60)) / 60);
                    var minutes = totalMinutes % 60;

                    return (days ? days + 'd ' : '') + 
                        (hours ? hours + 'h ' : '') + 
                        (minutes ? minutes + 'm' : '');
        }

        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 html = '';
        var color = '';
        var count = 0;

        var requested = 0;
        var rejected = 0;
        var approved = 0;
        var cancelled = 0;
        var conducted = 0;
        var total = 0;
        var total_duration_minutes = 0;

        html += '<thead class="list_head"><tr height="30" class="listing_headings" >';
        html += '<th width=620" style="padding-left:10px;" >Group By</th>';
        html += '<th width="230" style="padding-left:10px;" >Requested</th>';
        html += '<th width="230" style="padding-left:10px;" >Approved</th>';
        html += '<th width="230" style="padding-left:10px;" >Cancelled</th>';
        html += '<th width="230" style="padding-left:10px;" >Rejected</th>';
        html += '<th width="230" style="padding-left:10px;" >Conducted</th>';
        html += '<th width="230" style="padding-left:10px;" >Total</th>';
        html += '<th width="260" style="padding-left:10px;" >Conducted Duration</th>';
        html += '</tr></thead>';

        $.getJSON(url, function(seriesData) {
            $.each(seriesData, function(id, key) {
                if (count % 2 == 0) {
                    color = '#ffffff';
                } else {
                    color = '#e9e9e9'
                }

                requested += parseInt(key.requested);
                rejected += parseInt(key.rejected);
                approved += parseInt(key.approved);
                cancelled += parseInt(key.cancelled);
                conducted += parseInt(key.conducted);
                total_duration_minutes += parseInt(key.total_duration_minutes || 0);
                total += parseInt(key.total);

                label.push(key.labels);
                dataA.push(Number(key.requested));
                dataB.push(Number(key.approved));
                dataC.push(Number(key.cancelled));
                dataD.push(Number(key.rejected));
                dataE.push(Number(key.conducted));
                dataF.push(Number(key.total));
                dataG.push(Number(key.total_duration_minutes));

                html += '<tr height="25">';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.labels + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.requested + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.approved + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.cancelled + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.rejected + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.conducted + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.total + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' +(key.total_duration_minutes == null? '': formatToDaysHoursMinutes(key.total_duration_minutes)) + '</td>';
                html += '</tr>';
                count++;
            });

            if (count % 2 == 0) {
                color = '#ffffff';
            } else {
                color = '#e9e9e9'
            }
            html += '<tr height="25">';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">Total</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + requested + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + approved + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + cancelled + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + rejected + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + conducted + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + total + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' +
                formatToDaysHoursMinutes(total_duration_minutes) +
                '</td>';
            html += '</tr>';

            $('#data_summary').html(html)

            chart.xAxis[0].setCategories(label);
            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);
            chart.series[6].setData(dataG, true);
            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>