@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"> Vehicle Trips Report</a></li>
            </ul>

            <div class="tab-content">

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


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


                    <div class="col-md-5 col-lg-5">
                        {!! Form::select('search[vehicle_bookings.division_id]')->options([])->label('Division')->id('division_id')->addGroupClass('form-group-sm') !!}
                        {!! Form::select('search[vehicle_bookings.vehicle_id]')->options([])->id('vehicle_id')->addGroupClass('form-group-sm')->label('Vehicle')->placeholder('select Vehicle') !!}
                        {!! Form::select('search[booking_status]')->options(trans('vehicle_booking::vehicle_booking.options.booking_status'))->id('booking_status')->addGroupClass('form-group-sm')->label('Booking Status')->placeholder('select Booking Status') !!}
                        {!! Form::select('search[groupby]')->options([
                            'vehicle_bookings.department_id' => 'Department',
                            'assets.category_id' => 'Category',
                            'assets.subcategory_id' => 'SubCategory',
                            'employee_id'=> 'Requested By'
                            ])->addGroupClass('form-group-sm')->select('department_id')->label('Group By')->placeholder('Select') !!}
                    </div>
                    
                    <div class="col-md-5 col-lg-5">
                        {!! Form::select('search[vehicle_bookings.department_id]')->options(['' => 'All'] + Department::departments())->id('department_id')->addGroupClass('form-group-sm')->label('Department')->placeholder('Select') !!}
                        {!! Form::select('search[driver_id]')->options([])->id('driver_id')->placeholder('Driver Name')->label(trans('Driver Name'))->addGroupClass('form-group-sm') !!}
                        @if (user('admin.web')->currentCompany->requirement_type == 1)
                            {!! Form::select('search[vehicle_bookings.requirement_type]')->options(trans('vehicle_booking::vehicle_booking.options.requirement_type'))->id('requirement_type')->addGroupClass('form-group-sm')->label('Requirement Type')->placeholder('select Requirement Type') !!}
                        @endif
                        {!! Form::select('search[vehicle_bookings.employee_id]')->options(Company::employees())->addGroupClass('form-group-sm')->id('employee_id')->label('Employee')->placeholder('Select Employee') !!}
                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                From Date
                            </label>
                            <div class="col-lg-4 col-md-2 col-sm-6 p-b-10">
                                {!! Form::date('search[pickup_date][0]')->id('date_from')->addGroupClass('form-group-sm')->placeholder('Date')->label('From Date')->raw()->addClass('start_datepick') !!}
                            </div>
                            <label for="primary_view" class="control-label col-lg-1 col-md-2 col-sm-6">
                                To
                            </label>
                            <div class="col-lg-4 col-md-2 col-sm-6 m-l-0">
                                {!! Form::date('search[pickup_date][1]')->id('date_to')->addGroupClass('form-group-sm')->placeholder('To Date')->label('To Date')->raw()->addClass('end_datepick') !!}
                            </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_pdf" class="headpicture" href="#">Download PDF</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>
            </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-full-data" data-toggle="tab">Full Data Set</a></li>
            <li><a href="#tab-summary" data-toggle="tab">Data Summary</a></li>
            <li><a href="#tab-graph" data-toggle="tab">Graph</a></li>
        </ul>

        <div class="tab-content table-responsive">
            <div class="tab-pane " 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: 1000px; height: 400px; 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 active" 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>Vehicle</th>
                        <th>Reg No.</th>
                        <th>Department</th>
                        <th>Division</th>
                        <th>Driver</th>
                        <th>Assigned Pickup Date</th>
                        <th>Assigned Return Date</th>
                        <th>From</th>
                        <th>Destination</th>
                        <th>Purpose</th>
                        <th>Guest Name</th>
                        <th>Guest Mobile</th>
                        <th>Starting KM</th>
                        <th>Starting Date Time</th>
                        <th>Closing KM</th>
                        <th>Closing Date Time</th>
                        <th>Total KM</th>
                        <th>Status</th>
                        <th>Remarks</th>
                        <th>Created At</th>
                        @if (user('admin.web')->currentCompany->requirement_type == 1)
                            <th>Requirement Type</th>
                        @endif
                    </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('vehicle_booking') !!}

                            {!! 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
<style>
    .select2-container {
        width: 100% !important;
    }

    label.radio-inline {
        font-size: 12px;
    }
</style>

<script type="text/javascript">
    var chart;


    $(document).ready(function() {
        var company = "{{ user('admin.web')->current_comp }}";
        $("#division_id").load('{{ URL::to('admin/company/division/employee') }}' + '/' + company);

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

        $(".end_datepick").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd 23:59:59',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true
        }).prop('type', 'text');
        $('#resetnow').click(function() {
            $("input[name='search[pickup_date][0]']").val('');
            $("input[name='search[pickup_date][1]']").val('');
            $('#vehiclebookingreportform')[0].reset();
            $('#group_by_label').html('');
            $("#vehicle_id").empty();
            $("#driver_id").empty();   
            var filter = $("#vehiclebookingreportform").serialize();
            plotGraph("{{ URL::to('admin/vehicle_booking/trips_report_summary/graph') }}" + '/' + filter + '');

            oTable.api().draw();
        });

        $('#download_pdf').click(function() {
            var filter = $("#vehiclebookingreportform").serialize();
            $('#download_pdf').attr('href',
                "{{ URL::to('admin/vehicle_booking/trips_report/graph/pdf') }}" + "/" + filter);
            $('#download_pdf').attr("target", "_blank");
        });

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

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

        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: 'No of Bookings',
                    data: []
                },
                {
                    name: 'Total km',
                    data: []
                },
            ]
        });

        oTable = $('#full_listings').dataTable({
            "bProcessing": true,
            "sDom": 'R<>rt<ilp><"clear">',
            "bServerSide": true,
            "sAjaxSource": '{!! trans_url('admin') !!}/vehicle_booking/trips_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()
                        });
                    }
                );
                $('#vehiclebookingreportform select, #vehiclebookingreportform 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: 'ref'
                },
                {
                    data: 'vehicle_id'
                },
                {
                    data: 'vehicle_reg_np'
                },
                {
                    data: 'department_id'
                },
                {
                    data: 'division_id'
                },
                {
                    data: 'driver_id'
                },
                {
                    data: 'assigned_pickup_date'
                },
                {
                    data: 'assigned_return_date'
                },
                {
                    data: 'pickup'
                },
                {
                    data: 'destination'
                },
                {
                    data: 'purpose'
                },
                {
                    data: 'guest_name'
                },
                {
                    data: 'guest_mobile'
                },
                {
                    data: 'start_odometer'
                },
                {
                    data: 'start_datetime'
                },
                {
                    data: 'end_odometer'
                },
                {
                    data: 'completed_datetime'
                },
                {
                    data: 'total_km'
                },
                {
                    data: 'booking_status'
                },
                {
                    data: 'transport_notes'
                },
                {
                    data: 'created_at'
                },
                @if (user('admin.web')->currentCompany->requirement_type == 1)
                    {
                        data: 'requirement_type'
                    },
                @endif
            ],
            "order": [
                [7, "desc"]
            ],

            "pageLength": 25
        });


        $(document.body).on('click', "#gobutton", function(e) {
            if ($('#date_to').val() != '') {
                var from = $("#date_from").val();
                var to = $("#date_to").val();
                var fromdate = new Date(from);
                var todate = new Date(to);
                if (todate < fromdate) {
                    $("#date_to").addClass("error");
                    toastr.error('Check the date range', 'Error');
                    return false;
                }
            }

            e.preventDefault();
            var filter = $("#vehiclebookingreportform").serialize();
            var filter_label = '';
            var comma = '';
            $("#vehiclebookingreportform select, #vehiclebookingreportform input").each(function() {
                if ($(this).val() != '' || $(this).val() != null) {
                    filter_label += comma + ' ' + $('#' + $(this).attr('id') + ' :selected')
                        .text();
                    comma = ',';
                }
            });

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

            oTable.api().draw();
        });

        var filter = $("#vehiclebookingreportform").serialize();
        plotGraph("{{ URL::to('admin/vehicle_booking/trips_report_summary/graph') }}" + '/' + filter + '');
        $('#supplier_id').select2();

        $("#driver_id").select2({
            ajax: {
                url: "{{ trans_url('admin/company/drivers/select2') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {

                    params.page = params.page || 1;
                    return {
                        results: data.items.map(function(obj) {
                            return {
                                id: obj.id,
                                text: obj.name
                            };
                        }),
                        // results: data.items,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
        });


        $("#vehicle_id").select2({
            ajax: {
                url: "{{ trans_url('admin/assets/select-vehicle/asset') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term, // search term
                        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: false
            },
            escapeMarkup: function(markup) {
                return markup;
            }, // let our custom formatter work
            templateResult: formatRepo, // omitted for brevity, see the source of this page
            templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
        });

        function formatRepo3(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 formatRepo3Selection(repo) {
            return repo.name ? repo.name : repo.text;
        }



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

            return markup;
        }

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

        function plotGraph(url) {
            var label = new Array();
            var dataA = new Array();
            var dataB = new Array();

            var html = '';
            var color = '';
            var count = 0;
            var number_of_bookings = 0;
            var total_km = 0;
            var totalAmount = 0;
            var totalKM = 0;
            var totalCount = 0;

            html += '<thead class="list_head"><tr height="30" class="listing_headings" >';
            html += '<th width="320" style="padding-left:10px;" >Group By</th>';
            html += '<th width="320" style="padding-left:10px;" >No.of Bookings</th>';
            html += '<th width="320" style="padding-left:10px;" >Total KM</th>';
            html += '</tr></thead>';

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

                    totalAmount += parseInt(key.number_of_bookings);
                    totalKM += parseInt(key.total_km);
                    label.push(key.labels);
                    dataA.push(Number(key.number_of_bookings));
                    dataB.push(Number(key.total_km));

                    html += '<tr height="25">';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.labels + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.number_of_bookings + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.total_km + '</td>';
                    html += '</tr>';
                    count++;
                });

                html += '<tr height="25">';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '"> <strong>Total</strong> </td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + totalAmount + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + totalKM + '</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.redraw();
                chart.hideLoading();
            });
        }
    });
</script>

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