@extends('modules.head') @section('contenido')
<div id="delivery_vehicles_container" class="delivery_vehicles_container">
    <div style="display:flex; justify-content: space-between">
        <div>
            <h3 class="table_title">Branch Vehicles</h3><br>
        </div>
        <div>
            <a class="auxiliar-black" href="{{ URL::to('/deliveries/vehicles/create') }}">
                <button class="btn btnAdd pull-right">
                    <i class="fa fa-plus"></i>Create vehicle
                </button>
            </a>
        </div>
    </div>

    <div class="box-body table-responsive" id='vehicles_table_container'>
        <table id="vehicles_table" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Name</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Weight</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Largest Side</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Volume</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Miles per gallon</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Devaluation per mile</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Fuel Type</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>


<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script src="{{ asset('js/deliveries/vehicles/main.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/deliveries/vehicles/profile.css') }}" type="text/css" />
<script type="text/javascript">
    // table logic showing vehicles table
    $(document).ready(function(){
        $('#vehicles_table thead tr')
        .clone(true)
        .addClass('filters')
        .prependTo('#vehicles_table thead');

    $('#vehicles_table thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
    $("#vehicles_table").dataTable().fnDestroy();
    _table = $('#vehicles_table').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        "order": [],
        "language": {
            url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
        },
        ajax: {
            url: '/deliveries/get-all-branch-vehicles',
        },
        columns: [{
                data: 'name',
                name: 'name',
                render: (data, type, row) => {
                    return `<a href="/deliveries/${row.id}/edit">${data}</a>`;
                }
            },
            {
                data: 'max_weight',
                name: 'max_weight',
                render: (data, type, row) => {
                    return `${data} (lbs.)`;
                }
            },
            {
                data: 'largest_side',
                name: 'largest_side',
                render: (data, type, row) => {
                    return `${data} (inch.)`;
                }
            },
            {
                data: 'volume',
                name: 'volume',
                render: (data, type, row) => {
                    return `${data} (cubic inch.)`;
                }
            },
            {
                data: 'miles_gallon',
                name: 'miles_gallon',
            },
            {
                data: 'devaluation_mile',
                name: 'devaluation_mile',
            },
            {
                data: 'fuel_type_id',
                name: 'fuel_type.name',
                render: (data, type, row) => {
                    if (data){
                        return row.fuel_type.name;
                    }
                    return '';
                }
            },
            {
                data: 'id',
                name: 'id',
                render: (data, type, row) => {
                    return `<div class="actions_container">
                       <a href="/deliveries/${data}/edit">
                         <i class="fa fa-pencil"></i>
                       </a>
                       <a class="delete_a_tag" data-id="${data}">
                         <i class="fa fa-trash"></i>
                       </a>
                    </div>`;
                }
            },

        ],
        orderCellsTop: true,
        fixedHeader: true,
        initComplete: addFiltersForDataTable
    });
    })
    $('#create_vehicle_btn').click(function() {
        validateAndSubmit('/deliveries/vehicles', null);
    });
</script>
@endsection