@extends('layouts.main_without_top_button')
@section('title')
    Dashboard
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li class="active">Dashboard</li>
    </ul>
@stop
@section('contentinner')
    @if(auth()->user()->can('WORKSHOP DASHBOARD'))
        <div class="row-fluid">
            <div class="mediamgr_head">
                <ul class="mediamgr_menu">
                    <li class="right filesearch">
                        <form>
                            <select data-placeholder="Choose a Truck Reg ID..."
                                    tabindex="2" id="vehicle_id" name="vehicle_id">
                                <option value="">RESET</option>
                                @foreach($trucks as $truck)
                                    <option value="{{$truck->id}}">{{$truck->registration_number}}</option>
                                @endforeach
                            </select>
                        </form>
                    </li>
                </ul>
                <span class="clearall"></span>
            </div><!--mediamgr_head-->
        </div>
    @endif
    <div id="vehicle_loading">
        <style>
            #hardcoded-badge {
                position: relative;
            }

            #hardcoded-badge:after {
                content: "12";

                position: absolute;
                top: -15px;
                right: -18px;

                font-size: 11px;
                font-family: "Roboto", "Helvetica", "Arial", sans-serif;
                font-weight: 600;

                text-align: center;
                line-height: 23px;

                background: #ff4081;
                color: white;

                width: 22px;
                height: 22px;

                border-radius: 50%;
                /* box-shadow:1px 2px 5px #888; */
            }

            /* Class or Id doesn't matter */
            .dynamic-badge {
                position: relative;
            }

            .dynamic-badge[data-badge]:after {
                content: attr(data-badge);

                position: absolute;
                top: -15px;
                right: 4px;

                font-size: 11px;
                font-family: "Roboto", "Helvetica", "Arial", sans-serif;
                font-weight: 600;

                text-align: center;
                line-height: 23px;

                background: #ff4081;
                color: white;

                width: 22px;
                height: 22px;

                border-radius: 50%;
                /* box-shadow:1px 2px 5px #888; */
            }
        </style>
        @if(\Illuminate\Support\Facades\Auth::user()->can('VIEW GENERAL SUMMARY'))
            <div class="row-fluid">
                <div class="span4">
                    <h4 class="widgettitle">NOTIFICATIONS</h4>

                    <div class="widgetcontent  bordered-c">
                        <div class="row-fluid">
                            <div class="span12 profile-left">
                                <ul class="taglist span12" style="width: 100%; ">
                                    <li style="width: 100%">
                                        <a href="#">Trucks Registered (s)<span
                                                    class="badge">{{$notifications['trucks_count']}}</span></a>
                                    </li>
                                    <li>
                                        <a href="#">Trailer Registered<span
                                                    class="badge badge-warning">{{$notifications['trailers_count']}}</span></a>
                                    </li>
                                    <li>
                                        <a href="#">Employees<span
                                                    class="badge badge-important">{{$notifications['employees_count']}}</span></a>
                                    </li>
                                    <li>
                                        <a href="#">Idle Truck<span
                                                    class="badge badge-info">{{$notifications['iddle_trucks_count']}}</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div><!--widgetcontent-->
                </div><!--span8-->
                <div class="span4">
                    <h4 class="widgettitle">THIS MONTH</h4>

                    <div class="widgetcontent  bordered-c">
                        <div class="row-fluid">
                            <div class="span12 profile-left">
                                <ul class="taglist" style="width: 100%;">
                                    <li style="width: 100%">
                                        <a href="#">Pending Requisition (s)
                                            <span class="badge">{{$this_month['pending_requisition']}}</span></a>
                                    </li>
                                    <li>
                                        <a href="#">Approved Requisition Pending for Cash Out
                                            <span class="badge badge-warning">{{$this_month['approved_requisition_pedding_cash']}}</span></a>
                                    </li>
                                    <li>
                                        <a href="#">Pedding Route to Invoicing
                                            <span class="badge badge-important">{{$this_month['pennding_route_invoicing']}}</span></a>
                                    </li>
                                    <li>
                                        <a href="#">Invoice Due for Payments
                                            <span class="badge badge-info">{{$this_month['invoice_due']}}</span></a>
                                    </li>
                                    <li>
                                        <a href="#">Permit and Licenses Expiring Notification
                                            <span class="badge badge-inverse">{{$this_month['permit_exipired']}}</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div><!--widgetcontent-->
                </div><!--span4-->
                <div class="span4">
                    <h4 class="widgettitle">Vehicle Summary</h4>

                    <div class="widgetcontent bordered-c">
                        <div class="row-fluid">
                            <div class="span12 profile-left">
                                <ul class="taglist" style="width: 100%; ">
                                    <li>
                                        <a href="#">Booked Truck<span
                                                    class="badge badge-inverse">{{$booked_trucks}}</span></a>
                                    </li>
                                    {{--<li style="width: 100%">--}}
                                    {{--<a href="#">Trucks Departured (s)--}}
                                    {{--<span class="badge">{{$vehicle_summary['truck_departure']}}</span></a>--}}
                                    {{--</li>--}}
                                    <li>
                                        <a target="_blank"
                                           href="{{route('truck-movements.print',['client_id'=>'all_clients'])}}">Truck
                                            Movements
                                            <span class="badge badge-warning">{{$vehicle_movement}}</span></a>
                                    </li>
                                    {{--<li>--}}
                                    {{--<a href="#">Arrival to Destination--}}
                                    {{--<span class="badge badge-important">{{$vehicle_summary['truck_destination']}}</span>--}}
                                    {{--</a>--}}
                                    {{--</li>--}}
                                    <li>
                                        <a target="_blank" href="{{route('truck_movements.reports.allocated_trucks')}}">Allocated
                                            Trucks
                                            <span class="badge badge-info">{{$allocated_trucks}}</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a target="_blank"
                                           href="{{route('truck_movements.return_cargo_order_trucks.index')}}">Return
                                            Cargo
                                            Order Trucks
                                            <span class="badge badge-inverse">{{$return_cargo_order_trucks}}</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="{{route('operations.reports.breakdown_reports')}}">Breakdown
                                            Trucks
                                            <span class="badge badge-inverse">{{$breakdown_trucks}}</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div><!--widgetcontent-->
                </div><!--span4-->
            </div>
        @endif



        @if(\Illuminate\Support\Facades\Auth::user()->can('VIEW GENERAL SUMMARY'))



        @endif
        @if(auth()->user()->can('TRAFFIC FINE'))
            <div class="row-fluid">
                <div class="span6">
                    <!--widgetcontent-->
                    <h4 class="widgettitle">TRAFFIC FINE - TRUCK'S WISE</h4>

                    <div id="trucks_traffic_fines_pie_charts" style="min-height: 400px"></div><!--widgetcontent-->
                </div><!--span4-->

                <div class="span6">
                    <!--widgetcontent-->
                    <h4 class="widgettitle">TRAFFIC FINE - DRIVER'S WISE</h4>

                    <div id="drives_traffic_fines_pie_charts"></div><!--widgetcontent-->
                </div><!--span4-->
            </div><!--span4-->

        @endif


    </div>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="{{asset('js/logistics/logistics-accounts-charts.js')}}"></script>
    @if(auth()->user()->can('WORKSHOP DASHBOARD'))
        <script>
            var vehicle_id = jQuery('#vehicle_id');
            vehicle_id.select2();
            getVehicleMaintenanceDetails(vehicle_id.val());

            function getVehicleMaintenanceDetails(vehicle_id) {
                if (vehicle_id) {
                    jQuery.ajax({
                        type: "get",
                        url: "{{route('workshops.dashboard.vehicle_services_report')}}",
                        data: {
                            vehicle_id: vehicle_id
                        },
                        success: function (data) {
                            jQuery('#vehicle_loading').empty().append(data);
                        }
                    })
                }
            }

            getVehicleServices();
            getVehicleDueServices();


            vehicle_id.change(function () {
                var vehicle_id = jQuery(this).val();
                getVehicleMaintenanceDetails(vehicle_id)
            });

            function getVehicleServices() {
                jQuery.ajax({
                    url: '{{route('workshops.dashboard.schedules_services.index')}}',
                    type: 'get',
                    success: function (html) {
                        jQuery('#vehicle_services').empty().append(html);
                    }
                });
            }

            function getVehicleDueServices() {
                jQuery.ajax({
                    url: '{{route('workshops.dashboard.schedules_services.due_services')}}',
                    type: 'get',
                    success: function (html) {
                        jQuery('#vehicle_due_services').empty().append(html);
                    }
                });
            }


            function serviceRoutes(vehicle) {
                jQuery('.routes' + vehicle).slideToggle();
            }


        </script>
    @endif
    <script type="text/javascript">


        trucksTrafficFinesPieCharts();
        driverTrafficFinesPieCharts();

        $('#client_inquiry_tabs').tabs();

        function trucksTrafficFinesPieCharts() {
            jQuery.ajax({
                url: '{{route('charts.trucks.traffic_offences')}}',
                type: 'get',
                data: {},
                success: function (data) {
                    var json = JSON.parse(data);
                    trucksTrafficFinesPieChartsGenerator(json['series'], json['drilldown']);
                }
            });
        }

        function driverTrafficFinesPieCharts() {
            jQuery.ajax({
                url: '{{route('charts.drivers.traffic_offences')}}',
                type: 'get',
                data: {},
                success: function (data) {
                    var json = JSON.parse(data);
                    driversTrafficFinesPieChartsGenerator(json['series'], json['drilldown']);
                }
            });
        }



        function trucksTrafficFinesPieChartsGenerator(series, drilldown) {

// Create the chart
            Highcharts.chart('trucks_traffic_fines_pie_charts', {
                chart: {
                    type: 'pie'
                },
                title: {
                    text: 'TRUCKS TRAFFIC OFFENCES'
                },
                subtitle: {
                    text: 'Click the slices to view the trucks wise offences'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}: {point.y:.1f}%'
                        }
                    }
                },

                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                },
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: series
                }],
                drilldown: {
                    series: drilldown
                }
            });
        }

        function driversTrafficFinesPieChartsGenerator(series, drilldown) {

// Create the chart
            Highcharts.chart('drives_traffic_fines_pie_charts', {
                chart: {
                    type: 'pie'
                },
                title: {
                    text: 'DRIVERS TRAFFIC OFFENCES'
                },
                subtitle: {
                    text: 'Click the slices to view the driver\'s wise offences'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}: {point.y:.1f}%'
                        }
                    }
                },

                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                },
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: series
                }],
                drilldown: {
                    series: drilldown
                }
            });
        }


    </script>
@stop