@extends('layouts.app')
@section('content')
@include('drawings.modal')
<div class="portlet light bordered">
    <div class="portlet-title">
        <div class="caption font-dark">
            <i class="icon-settings font-dark"></i>&nbsp;
            <span class="caption-subject bold uppercase">@lang('layout.Alerts')</span>
        </div>
        <div class="tools"> 
            
        </div>  
    </div>
</div>
<div class="row" >
    <ul class="nav nav-tabs">  
        <li class="active">
            <a href="#both" data-toggle="tab" id="tab-on" style="color:red">
            <i class="fa  "></i><b> @lang('layout.AlertDateVehicleLocation') </b></a>
        </li>  
    </ul> 
    <div class="portlet light bordered">
        <div class="portlet-body">
            <table class="table table-striped table-bordered table-hover" id="location_table">
                <thead>
                    <tr>
                        <th>@lang('layout.Driver')</th>
                        <th>@lang('menu.Container')</th>
                        <th>@lang('layout.State')</th>
                        <th>@lang('layout.Source')</th>
                        <th>@lang('layout.Destination')</th>
                        <th>@lang('layout.Location')</th>
                        <th>@lang('layout.Date')</th>
                        <th>@lang('layout.User')</th>
                        <th>@lang('layout.Action')</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <!-- END EXAMPLE TABLE PORTLET-->
</div>
<!-- END TAB PORTLET-->
<!-- END CONTENT BODY -->
@stop
@include('print.modal')
@include('groupCompanyFilter.select')
@push('scripts')
    <script>
        Vue.component("v-select", VueSelect.VueSelect);
        $(document).ready(function() {
            $.fn.dataTable.ext.errMode='{{dataTableWarning()}}';
            getRecord();
        });
        function getRecord()
        {
            // var from_date=document.getElementById('range-from-example').value;
            // var to_date=document.getElementById('range-to-example').value;
            var from_date = null;
            var to_date = null;
            $('#location_table').DataTable({
                ajax:{
                    url:'{{route("systemAlerts.alertVehcileLocation")}}'
                },
                scrollCollapse: true,
                serverSide: true,
                paging: true,
                columns: [
                    {
                        data: 'name',
                        name: 'members.name'
                    },
                    {
                        data: 'palet_number',
                        name: 'vehicles.palet_number'
                    },
                    {
                        data: 'state',
                        name: 'vehicle_locations.state'
                    },
                    {
                        data: 'source',
                        name: 'vehicle_locations.source'
                    },
                    {
                        data: 'destination',
                        name: 'vehicle_locations.destination'
                    },
                    {
                        data: 'location',
                        name: 'vehicle_locations.location'
                    },
                    {
                        data: 'Date',
                        name: 'vehicle_locations.date'
                    },
                    {
                        data: 'name',
                        name: 'users.name'
                    },
                    {
                        data: 'actions',
                        name: 'actions'
                    }
                ]
                
            });
        }
        // start app
        var vmf = new Vue({
            el: '#app',
            data:{
                from_date:null,
                to_date:null,
                title:null,
                number:null,
                description:null,
            },
            methods:{
                getData(){
                getRecord();
                }
            }
        })
        new Vue({
            el: '#company_ll',
            methods: {
                setCompany: function (event) {
                    window.location.reload();
                }
            }
        });
    </script>
@endpush