@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.css')}}">
<!-- END DataTables-->
@endpush
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">                   
                <div class="panel-heading"><h5>{{ __('strings.last_50_trips') }}</h5></div>

                <div class="cc-selector panel-body">
                    <div class="table-responsive">
                        <table id="quiq-drivers-table" class="table hover mb-0">
                            <thead class="thead-inverse">
                                <tr>
                                    <th>ID</th>	               	
                                    <th>STATUS</th>
                                    <th>{{__('strings.driver_name')}}</th>
                                    <th>{{__('strings.driver_lastname')}}</th>
                                    <th>{{__('strings.eco')}}</th>
                                    <th>{{__('strings.start_address')}}</th>
                                    <th>{{__('strings.time')}}</th>
                                    <th>{{__('strings.amount')}}</th>
                                    <th>{{__('strings.payment')}}</th>
                                    <th>{{__('strings.created_at')}}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

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


<script type="text/javascript">
	var table;
$(function() {
	
	//setting language for moment.js
	moment.locale('es');
	//initialize datetable
	
	//scrollY: "450px",
	//scrollCollapse: true,

	 table = $('#quiq-drivers-table').DataTable({
				responsive: true,
				paging: false,				
				columns: [
				{ data: 'ID_ROUTE', name: 'ID_ROUTE'},
				{ data: 'ROUTE_STATUS', name: 'ROUTE_STATUS'},
                                { data: 'DRIVER_NAME', name: 'DRIVER_NAME'},
				{ data: 'DRIVER_LASTNAME', name: 'DRIVER_LASTNAME'},
                                { data: 'ECO', name: 'ECO'},
                                { data: 'BEGIN_ADDRESS', name: 'BEGIN_ADDRESS'},
				{ data: 'TIME', name: 'TIME'},
				{ data: 'AMOUNT', name: 'AMOUNT'},
				{ data: 'PAYMENT_JSON', name: 'PAYMENT_JSON', render: function(data, type, row, meta){
						if(data != null) {
							var payment = JSON.parse(data);
							var image = '';

							switch(payment.DATA.type) {
								case 'EFEC':
									image = '{{asset('images/cash.png')}}';
								break;
								case 'VISA':
									image = '{{asset('images/visa.png')}}';
								break;
								case 'MAST':
									image = '{{asset('images/mast.png')}}';
								break;
								case 'AMEX':
									image = '{{asset('images/amex.png')}}';
								break;
								case 'CRED':
									image = '{{asset('images/cred.png')}}';
								break;
							}
							var html = "<div class='media'>"
							+ "<a class='media-left media-middle'>"
							+ "<img class='media-object' src='"+image+"' style='width: 32px;height: 32px;' />"

							+ "</a>"
							+ "<div class='media-body'>"
							+ "<h5 class='media-heading'>" + payment.DATA.alias + " </h5>"
							+ payment.DATA.description
							+  "</div>"
							+ "</div>";
							return html;
						} else {
							return null;
						}
				}, defaultContent: "<i>Sin Pago</i>"},
				{ data: 'CREATED_AT', name: 'CREATED_AT', render: function(data, type, row, meta)
				{
					return moment.utc(data).local().format('YYYY-MM-DD HH:mm:ss');
				}
			},   
			],
			dom: 'Bfrtip',
			buttons: [
			'copy', 'excel', 'pdf'
			],
			paging: false,
                        order: [],
			"language": {
				"url": "{!! asset('Datatables/languages/spanish.json') !!}"
			},
                        createdRow: function( row, data, dataIndex ) {
                            if ( data.ROUTE_STATUS == "CANCELED" ) {
                                $(row).addClass( 'bg-warning bg-lighten-4' );
                            }
                            if ( data.TIME == "0" || data.AMOUNT == "0" ) {
                                $(row).addClass( 'bg-warning bg-lighten-4' );
                            }
                        }
		});
                getTrips();
});
function getTrips() {
$.showPreloader("{{__('strings.loading')}}");
	$.ajax({
        url: "{{Auth::user()->getREST()}}user/trips",
        type: "POST",
        dataType: "json",
        data: JSON.stringify({
                user_id: '{{Auth::user()->ID_USER}}',
                user_token: '{{Auth::user()->SECURE_TOKEN}}',
        }),
        dataType: "json",
        success: function (json) {
            if(json.success)  {
        	fillTable(json.routes);
            }
            $.hidePreloader(); // hide the preloader
        },
        error: function (err) {
        	console.log(err);
                $.hidePreloader(); 
        }
    });
}


function fillTable(dataSet) {
	table.clear();
	table.rows.add(dataSet).draw();
}
</script>
@endpush