@extends('layouts.main')
@push('styles')
<link href='{{asset('css/redtrack.css')}}' rel='stylesheet' />
<!-- BEGIN DataTables-->
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min_1.css')}}"/>
<!-- END DataTables-->
@endpush
@section('content')
<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">   
                <div class="cc-selector panel-body">
                    <div class="panel-heading">
                        <h1>
                            {{ __('strings.extra_trips_header') }}
                            <span class="float-sm-right"> <a href="{{route('user_create_extra_trips_view')}}" class="btn btn-primary"> {{__('strings.add_new')}}</a></span>
                        </h1>
                    </div>
                
                    <hr>
                
                
                    <div class="col-md-12">
                    <div class="table-responsive">
                        <table id="trips-table" class="table table-hover mb-0">
                            <thead class="thead-inverse">
                                <tr>
                                    <th>Id</th>	   
                                    <th>{{__('strings.created_at')}}</th>
                                    <th>{{__('strings.time_at')}}</th>
                                    <th>Nip</th>
                                    <th>{{__('strings.department')}}</th>
                                    <th>{{__('strings.driver_email')}}</th>
                                    <th>{{__('strings.driver_name')}}</th>
                                    <th>{{__('strings.driver_lastname')}}</th>
                                    <th>{{__('strings.amount')}}</th>
                                    <th>{{__('strings.number_of_passengers')}}</th>
                                    <th>{{__('strings.start_address')}}</th>
                                    <th>{{__('strings.trip_addresses')}}</th>
                                    <th>{{__('strings.passengers')}}</th>
                                    <th>{{__('strings.project')}}</th>
                                    <th>{{__('strings.distance')}}</th>
                                    <th>{{__('strings.eco')}}</th>
                                    <th>{{__('strings.km_local')}}</th>
                                    <th>{{__('strings.km_foreign')}}</th>
                                    <th>{{__('strings.waiting_time')}} hh:mm</th>
                                    <th>{{__('strings.extra_passengers')}}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

<!-- BEGIN DataTables-->
<script src="{{asset('datatables/datatables.min_1.js')}}" type="text/javascript"></script>
<!-- END DataTables-->


<script type="text/javascript">
    $(document).ready(function() {

        //setting language for moment.js
        moment.locale('es');

        //initialize datetable
        $('#trips-table').DataTable({
                                responsive: false,
                                paging: true,	
                                serverSide: true,
                                processing: true,
                                ajax: {
                                    url: "{{route('get_extra_trips')}}",
                                    type: "POST",
                                    data: {
                                        user_token: "{{Auth::user()->SECURE_TOKEN}}"                                        
                                    }
                                },
                                columns: [
                                        { data: 'id'},
                                        { data: 'route_created_at', render: function(data, type, row, meta) {
                                                    return moment.utc(data).local().format('YYYY-MM-DD');
                                            }
                                        },
                                        { data: 'route_created_at', render: function(data, type, row, meta) {
                                                    return moment.utc(data).local().format('HH:mm');
                                            }
                                        },
                                        { data: 'nip_name', defaultContent:"---"},
                                        { data: 'nip_department', defaultContent:"---"},
                                        { data: 'driver_email', defaultContent:"---"},
                                        { data: 'driver_name', defaultContent:"---"},
                                        { data: 'driver_lastname', defaultContent:"---"},
                                        { data: 'total', defaultContent: "0.0"},
                                        { data: 'total_passengers', defaultContent: "---"},
                                        { data: 'start_address', defaultContent: "---"},
                                        { data: 'trip_addresses', defaultContent: "---",
                                        render: function ( data, type, row ) {
                                            if(data != null) {
                                            return data.length > 100 ?
                                                data.substr( 0, 100 ) +'…' :
                                                data;
                                            } 
                                            return data;
                                        }},
                                        { data: 'passengers', defaultContent: "---"},
                                        { data: 'project', defaultContent: "---"},
                                        { data: 'distance', defaultContent: "---"},
                                        { data: 'plates', defaultContent: "---",
                                        render: function ( data, type, row ) {
                                            return  (data || '---') + ', ' + row?.driver?.NUMBER_PLATE;
                                        }},
                                        { data: 'km_local', defaultContent: "---"},
                                        { data: 'km_foreign', defaultContent: "---"},
                                        { data: 'waiting_time', defaultContent: "---", render: function(data, type, row, meta) {
                                                    return data.substring(0,5);
                                            
                                        }},
                                        { data: 'extra_passengers', defaultContent: "---"}
                                ],
                                dom: 'Bfrtip',
                                buttons: [
                                'pageLength','copy', 'excel'
                                ],
                                lengthMenu: [[10, 100, 1000], [10, 100, 1000]],
                                order: [],
                                "language" : {
                                        url: "{{ asset('datatables/languages/spanish.json') }}"
                                }
                });

    });
</script>
@endpush