@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
Vehicles List
@parent
@stop

{{-- page level styles --}}
@section('header_styles')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/dataTables.bootstrap.css') }}" />
<link href="{{ asset('assets/css/pages/tables.css') }}" rel="stylesheet" type="text/css" />
@stop


{{-- Page content --}}
@section('content')
<section class="content-header">
    <h1>@lang('mof.vehicles')</h1>
    <ol class="breadcrumb">
        <li>
            <a href="{{ route('admin.dashboard') }}">
                @lang('mof.vehicle')
            </a>
        </li>
        {{-- <li><a href="{{ route('admin.users.index') }}"> Vehicle</a></li> --}}
        <li class="active">@lang('mof.vehicle_list')</li>
    </ol>
</section>

<!-- Main content -->
<section class="content paddingleft_right15">
    <div class="row">
        <div class="panel panel-success ">
            <div class="panel-heading clearfix">
                <h4 class="panel-title pull-left"> <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                   @lang('mof.vehicle_list')
                </h4>
                <div class="pull-right">
                    <a href="{{route('admin.vehicle.create')}}" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-plus"></span></a>
                </div>
            </div>
            <br />
            <div class="panel-body">
                <div class="table-responsive">
                <table class="table table-bordered width100" id="table">
                    <thead>
                        <tr class="filters">
                            <th>@lang('mof.id')</th>
                            {{-- <th>@lang('mof.odometer')</th> --}}
                            <th width="20%">@lang('mof.license_plate')</th>
                            <th width="20%">@lang('mof.chassis_no')</th>
                            {{-- <th width="15%">@lang('mof.sub_category')</th> --}}
                            <th>@lang('mof.year')</th>
                            {{-- <th>@lang('mof.model')</th> --}}
                            <th>@lang('mof.vehicle_type')</th>
                            <th>@lang('mof.vehicle_color')</th>
                            {{-- <th>@lang('mof.fuel_type')</th>                           --}}
                            <th>@lang('mof.action')</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</section>
@stop

{{-- page level scripts --}}
@section('footer_scripts')
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/jquery.dataTables.js') }}" ></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.bootstrap.js') }}" ></script>

<script>
    $(function() {
        var table = $('#table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('admin.vehicle.fetch') !!}',
            "pageLength": 10,
            columns: [
                { data: 'id', name: 'id' },
                // { 
                //     data: 'odometer', 
                //     name: 'odometer' , 
                //     render: function(data, type, row, meta) {
                //        if(data == null) {
                //           return '';
                //        }
                //     }
                // },
                { data: 'license_plate', name: 'license_plate' },
                { data: 'vin', name: 'vin' },
                // { 
                //     data: 'sub_category.name', 
                //     name: 'sub_category.name',
                //     render: function(data, type, row, meta) {
                //        if(data == null) {
                //           return '';
                //        }
                //     }
                // },
                { data: 'year', name: 'year'},
                // { 
                //     data: 'model.name', 
                //     name: 'model.name',
                //     render: function(data, type, row, meta) {
                //        if(data == null) {
                //           return '';
                //        }
                //     }
                // },
                { 
                    data: 'vehicle_type', 
                    name: 'vehicle_type',
                },
                { 
                    data: 'vehicle_color', 
                    name: 'vehicle_color',
                },
                // { data: 'fuel_type',
                //   name: 'fuel_type',
                //   render: function(data, type, row, meta) {
                //        if(data == null) {
                //           return '';
                //        }
                //     }
                // },
                { data: 'action', name: 'action', orderable: false, searchable: false,sortable:false }
            ]
        });
    });

</script>
@stop