@extends('vehicles.profile.includes.main')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('vehicles.index')}}">Vehicles Managements</a> <span class="divider">/</span></li>
        <li class="active">Trucks Profile:Fuels</li>
    </ul>
@stop
@section('profile')
    <div class="tab-pane active">

        <table class="table table-bordered" id="fuel_consumptions" width="100%">
            <thead>
            <tr>
                <th>GIN NO.</th>
                <th>Date</th>
                <th>Driver</th>
                <th>Reference</th>
                <th>Description</th>
                <th>Quantity</th>
            </tr>
            </thead>
        </table>

    </div>
<script type="text/javascript">
    var oTable = jQuery('#fuel_consumptions').
            on( 'error.dt', function ( e, settings, techNote, message ) {
                console.log(message);
                notify('Error Loading goods Issued Note List');
            } )
            .DataTable({
                lengthMenu: [
                    [10, 50, 100],
                    ['10 Orders', '50 Orders', '100 Orders']
                ],
                "oLanguage": {
                    "sLoadingRecords": "Please wait - loading Goods Issued Notes Records...",
                    "sZeroRecords": "No Goods Issued Notes records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display.",
                    "sInfo": "Got a total of _TOTAL_ fuel Orders to show (_START_ to _END_)",
                    "sInfoFiltered": " - filtering from _MAX_ records"
                },
                ajax: {
                    url: '{{route('vehicles.fuel_consumptions.data_table.index',array('vehicles'=>$vehicle->id))}}',
                    data: function (d) {
                        d.route_number = jQuery('#route_number').val();
                        d.route_id = jQuery('#route_id').val();
                        d.starting_date = jQuery('#starting_date').val();
                        d.end_date = jQuery('#end_date').val();
                        d.truck_id = jQuery('#truck_id').val();
                        d.fuel_usage = jQuery('#fuel_usage').val();
                        d.driver_id = jQuery('#driver_id').val();
                    }
                },
                "order": [[ 1, "desc" ]],
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "aoColumnDefs": [ {
                    "aTargets": [5],
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        jQuery(nTd).css('text-align', 'right')
                        if (sData == 0) {
                            jQuery(nTd).addClass('highlight-red')
                        }
                    }
                }],
                "columns": [
                    {"class": "link", data: 'gin_number'},
                    {"class": "link", data: 'date'},
                    {"class": "link", data: 'driver'},
                    {"class": "link", data: 'reference_number'},
                    {"class": "link", data: 'description'},
                    {"class": "link", data: 'quantity'}
                ],
                "bStateSave": true
            });
</script>
@stop