@extends('sysadmin.layouts.app')
@section('custom-css')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

@endsection
@section('post-header')
    <div class="breadcome-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="breadcome-list">
                        <div class="row">
                                <div class="col-md-8 col-sm-6 col-xs-6 ">
                                    <h3 class="box-title">Dashboard </h3>
                                </div>
                                <div class="col-md-4 col-sm-6 col-xs-6">
                                    <div class="pull-right" id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                        <i class="fa fa-calendar"></i>&nbsp;
                                        <span></span> <i class="fa fa-caret-down"></i>
                                    </div>
                                </div>
                            </div>

                            {{--<div class="col-md-2" style="text-align: center">--}}
                                {{--<div class="btn btn-success btn-orders" style="text-align: center;">All Orders (15)</div>--}}
                            {{--</div>--}}
                            {{--<div class="col-md-2" style="text-align: center">--}}
                                {{--<div class="btn btn-success btn-orders" style="text-align: center;">Active Orders (10)</div>--}}
                            {{--</div>--}}
                            {{--<div class="col-md-2" style="text-align: center">--}}
                                {{--<div class="btn btn-success btn-orders" style="text-align: center;">Unassigned (5)</div>--}}
                            {{--</div>--}}

                            {{--<div class="col-md-2" style="text-align: center">--}}
                                {{--<div class="btn btn-success btn-orders" style="text-align: center;">Active Drivers (2)</div>--}}
                            {{--</div>--}}

                            {{--<div class="col-md-2" style="text-align: center">--}}
                                {{--<div class="btn btn-success btn-orders" style="text-align: center;">Inactive Drivers (2)</div>--}}
                            {{--</div>--}}

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <div class="all-content-wrapper">

        <div class="product-sales-area mg-tb-30">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="product-sales-chart">
                            <div class="portlet-title">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                        <div class="caption pro-sl-hd">
                                            <span class="caption-subject"><b>Driver No / Restaurant No</b></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="product-sales-area mg-tb-30">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="white-box">
                            <h3 class="box-title">Order</h3>
                            <div id="order" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="product-sales-area mg-tb-30">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div class="white-box">
                        <h3 class="box-title">Transport Cost</h3>
                        <div id="transportCost" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div class="white-box">
                        <h3 class="box-title">Driver Fee</h3>
                        <div id="driverFee" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="product-sales-area mg-tb-30">
            <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="white-box">
                        <h3 class="box-title">Orders</h3>
                        <div id="ordersDrivers" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

                    </div>
                </div>
            </div>
            </div>
        </div>
        <div class="data-table-area mg-b-15">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="sparkline13-list">
                            <div class="sparkline13-hd">
                                <div class="main-sparkline13-hd">
                                    <h1>Statistics - 1<span class="table-project-n"></span></h1>
                                </div>
                            </div>
                            <div class="sparkline13-graph">
                                <div class="datatable-dashv1-list custom-datatable-overright">
                                    <div id="toolbar1">
                                        <select class="form-control dt-tb">
                                            <option value="">Export Basic</option>
                                            <option value="all">Export All</option>
                                            <option value="selected">Export Selected</option>
                                        </select>
                                    </div>
                                    <table id="tableUsrStc" data-toggle="table" data-pagination="true" data-search="true" data-show-columns="true" data-show-pagination-switch="true" data-show-refresh="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true"
                                           data-cookie-id-table="saveId" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar1">
                                        <thead>
                                        <tr>
                                            <th data-field="hour">Hour</th>
                                            <th data-field="order">Order</th>
                                            <th data-field="couriers">Driver Active</th>
                                            <th data-field="restaurants">Restaurant No</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if(count($statistics) != 0)
                                            @foreach($userStatistics as $userStatistic)
                                                <tr>
                                                    <td>{{ $userStatistic->hourNo }}</td>
                                                    <td>{{ $userStatistic->ordersNo }}</td>
                                                    <td>{{ $userStatistic->uniqueCouriers }}</td>
                                                    <td>{{ $userStatistic->uniqueRestaurants }}</td>
                                                </tr>
                                            @endforeach
                                        @endif

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="data-table-area mg-b-15">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="sparkline13-list">
                            <div class="sparkline13-hd">
                                <div class="main-sparkline13-hd">
                                    <h1>Statistics - 2<span class="table-project-n"></span></h1>
                                </div>
                            </div>
                            <div class="sparkline13-graph">
                                <div class="datatable-dashv1-list custom-datatable-overright">
                                    <div id="toolbar">
                                        <select class="form-control dt-tb">
                                            <option value="">Export Basic</option>
                                            <option value="all">Export All</option>
                                            <option value="selected">Export Selected</option>
                                        </select>
                                    </div>
                                    <table id="tableStc" data-toggle="table" data-pagination="true" data-search="true" data-show-columns="true" data-show-pagination-switch="true" data-show-refresh="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true"
                                           data-cookie-id-table="saveId" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar">
                                        <thead>
                                        <tr>
                                            <th data-field="hour">Driver</th>
                                            <th data-field="order">Order</th>
                                            <th data-field="couriers">Transport Cost</th>
                                            <th data-field="restaurants">Driver Fee</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if(count($statistics) != 0)
                                            @foreach($statistics as $statistic)
                                                <tr>
                                                    <td>{{ $statistic->firstname ." ".$statistic->lastname }}</td>
                                                    <td>{{ $statistic->ordersNo }}</td>
                                                    <td>{{ $statistic->transportCost }}</td>
                                                    <td>{{ $statistic->driverFee }}</td>
                                                </tr>
                                            @endforeach
                                        @endif

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('custom-js')

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script type="text/javascript">

        var hours ='{!! json_encode($dataX) !!}';
        var hoursX = JSON.parse(hours);

        var couriersNo ='{!! json_encode($couriersNo) !!}';
        var couriersY = JSON.parse(couriersNo);

        var restNo ='{!! json_encode($restNo) !!}';
        var restY = JSON.parse(restNo);

        var ordersNo ='{!! json_encode($ordersNo) !!}';
        var ordersY = JSON.parse(ordersNo);

        var driversNo ='{!! json_encode($courierX) !!}';
        var driversX = JSON.parse(driversNo);

        var transportCost ='{!! json_encode($transportCost) !!}';
        var transportCostY = JSON.parse(transportCost);

        var ordersPerDriver ='{!! json_encode($ordersPerDriver) !!}';
        var ordersPerDriverY = JSON.parse(ordersPerDriver);

        var driverFee ='{!! json_encode($driverFee) !!}';
        var driverFeeY = JSON.parse(driverFee);

       // console.log(transportCostY);

        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Driver No/Restaurant No'
            },
            colors: [
                '#ee3843',
                '#4572a7'
            ],
//            subtitle: {
//                text: 'Source: Baboon'
//            },
            xAxis: {
                categories: hoursX,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:#bf5329;padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Driver Active',
                data: couriersY

            }, {
                name: 'Restaurant No',
                data: restY

            }]
        });

        Highcharts.chart('order', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Order'
            },
            colors:[
              '#f7a35b'
            ],
//            subtitle: {
//                text: 'Source: Baboon'
//            },
            xAxis: {
                categories: hoursX,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Order',
                data: ordersY

            }]
        });

        Highcharts.chart('transportCost', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Transport Cost'
            },
//            subtitle: {
//                text: 'Source: Baboon'
//            },
            xAxis: {
                categories: driversX,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Transport Cost',
                data: transportCostY

            }]
        });

        Highcharts.chart('ordersDrivers', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Order Per Driver'
            },
            colors:[
                '#a5aad9'
        ],
//            subtitle: {
//                text: 'Source: Baboon'
//            },
            xAxis: {
                categories: driversX,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Order Per Driver',
                data: ordersPerDriverY

            }]
        });

        Highcharts.chart('driverFee', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Driver Fee'
            },
            colors:[
                '#2b908f'
            ],
//            subtitle: {
//                text: 'Source: Baboon'
//            },
            xAxis: {
                categories: driversX,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Driver Fee',
                data: driverFeeY

            }]
        });


        $(function() {

            var start = moment().subtract(29, 'days');
            var end = moment();

            function cb(start, end) {
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#reportrange').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            }, cb);
            cb(start, end);

            $('#reportrange').on('apply.daterangepicker', function(ev, picker) {

                filterCharts(picker);

            });

        });

        function filterCharts(picker) {

            console.log(picker.startDate.format('YYYY-MM-DD 00:00'));

            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                url: '/systemadmin/filter',
                type: 'POST',
                data: {
                    _token: CSRF_TOKEN,
                    start: picker.startDate.format('YYYY-MM-DD 00:00'),
                    end: picker.endDate.format('YYYY-MM-DD 00:00')
                },
                dataType: 'JSON',
                success: function (data) {
                    //Update Values Chart 1
                    Highcharts.charts[0].series[0].setData(data.couriersNo);
                    Highcharts.charts[0].series[1].setData(data.restNo);
                    Highcharts.charts[0].xAxis[0].setCategories(data.dataX);

                    //Update Values Chart 2
                    Highcharts.charts[1].series[0].setData(data.ordersNo);
                    Highcharts.charts[1].xAxis[0].setCategories(data.dataX);

                    //Update Values Chart 3
                    Highcharts.charts[2].series[0].setData(data.transportCost);
                    Highcharts.charts[2].xAxis[0].setCategories(data.courierX);

                    //Update Values Chart 4
                    Highcharts.charts[3].series[0].setData(data.ordersPerDriver);
                    Highcharts.charts[3].xAxis[0].setCategories(data.courierX);

                    //Update Values Chart 5
                    Highcharts.charts[4].series[0].setData(data.driverFee);
                    Highcharts.charts[4].xAxis[0].setCategories(data.courierX);

                    var opt = '';
                    var option = '';
                    $.each(data.userStatistics, function(i, e){
                        opt +='<tr>';
                        opt += '<td>' + e.hourNo + '</td>';
                        opt += '<td>' + e.ordersNo + '</td>';
                        opt += '<td>' + e.uniqueCouriers + '</td>';
                        opt += '<td>' + e.uniqueRestaurants + '</td>';
                        opt += '</tr>';
                    });
                    $('#tableUsrStc tbody').html(opt);

                    $.each(data.statistics, function(i, e){
                        option +='<tr>';
                        option += '<td>' + e.firstname + ' '+ e.lastname +'</td>';
                        option += '<td>' + e.transportCost + '</td>';
                        option += '<td>' + e.ordersNo + '</td>';
                        option += '<td>' + e.driverFee + '</td>';
                        option += '</tr>';
                    });
                    $('#tableStc tbody').html(option);
                }
            });
        }

    </script>
    @endsection