@extends('layouts.main_without_top_button')
@section('title')
    Dashboard
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li class="active">Dashboard</li>
    </ul>
@stop
@section('contentinner')
    <div class="content-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>

        <div id="vehicle_loading">
            <div class="row-fluid">
            <div class="span8">
            <div class="row-fluid">
                <div class="span6">
                    <h4 class="widgettitle">Summary</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="#"> Job Cards<span
                                                    class="badge">{{$pending_job_card}}</span></a>
                                    </li>
                                    <li>
                                        <a href="#">Closed Jobcard<span
                                                    class="badge badge-warning">{{ $closed_job_card }}</span></a>
                                    </li>
                                    <li>
                                        <a href="#">Incident Reported<span
                                                    class="badge badge-important">{{ $tatal_incidents }}</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div><!--widgetcontent-->
                </div><!--span4-->

                <div class="span6">
                    <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="#">Services Due<span
                                                    class="badge">{{$service_due}}</span></a>
                                    </li>
                                    <li>
                                        <a href="#">Services Expired<span
                                                    class="badge badge-warning"></span></a>
                                    </li>
                                    <li>
                                        <a href="#">Pending Inspection<span
                                                    class="badge badge-important"></span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div><!--widgetcontent-->
                </div><!--span4-->
            </div>
                <div class="row-fluid">
                <div class="span12">

                    <h4 class="widgettitle">VEHICLE LATEST SERVICE</h4>

                    <div class="row-fluid" style="height: 250px;overflow-y: scroll">
                        <div class="widgetcontent  bordered-c" id="vehicle_services">

                        </div><!--widgetcontent-->
                    </div><!--widgetcontent-->
                </div><!--span4-->
                </div>
            </div>
                <div class="span4">
                    <h4 class="widgettitle">DUE SERVICES <span class="badge badge-warning">{{$service_due}}</span></h4>

                    <div class="row-fluid" style="height: 500px;overflow-y: scroll">
                        <div class="widgetcontent  bordered-c" id="vehicle_due_services">

                        </div><!--widgetcontent-->
                    </div><!--widgetcontent-->
                </div><!--span4-->

        </div>
        </div>

    </div>

    <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();
        }


        {{--function createVehicleService(vehicle_id, service_id) {--}}
            {{--jQuery("#createNewVehicleServiceSchedule").appendTo("body").modal('show');--}}

            {{--jQuery.ajax({--}}
                {{--url: "{{route('vehicle.schedule.service.create')}}",--}}
                {{--type: 'GET',--}}
                {{--data: {--}}
                    {{--'vehicle_id': vehicle_id,--}}
                    {{--'service_id': service_id--}}
                {{--},--}}
                {{--beforeSend: function () {--}}
                {{--},--}}
                {{--success: function (response) {--}}
                    {{--jQuery('#scheduleService').empty().html(response);--}}
                    {{--jQuery(".schedule_date_picker").datepicker();--}}
                {{--},--}}
            {{--});--}}
        {{--}--}}
    </script>
@stop