@extends('layouts.main')

@push('styles')
<!-- Include Date Range Picker -->
<link rel="stylesheet" type="text/css" href="{{asset('css/daterangepicker.css')}}" />
<!-- Include app colors -->
@endpush

@section('content')
<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-body collapse in">
					<div class="card-block">
						<form class="form">
							<div class="form-body">
								<h4 class="form-section"><i class="icon-head"></i> {{$driver->NAME}} {{$driver->LAST_NAME}}</h4>
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
											<label for="projectinput1">{{__('strings.range_datetime')}}</label>
											<div class="position-relative has-icon-right">
												<input type="text" id="daterange" name="daterange" class="form-control"/>
												<div class="form-control-position">
													<i  id="calendar-icon" class="glyphicon glyphicon-calendar fa fa-calendar" style="cursor: pointer;"></i>
												</div>
											</div>
										</div>
									</div>
								</div>

								<h4 class="form-section"><i class="icon-file-subtract"></i> {{__('strings.quiq_report_header')}}</h4>

								<div class="form-group">
									<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.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>
						</form>
					</div>
				</div>
			</div>
	</div>
</div>

@endsection

@push('scripts')
<script type="text/javascript" src="{{asset('js/daterangepicker.js')}}"></script>

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

	 table = $('#quiq-drivers-table').DataTable({
				processing: true,
				responsive: true,
				paging: false,				
				columns: [
				{ data: 'ID_ROUTE'},
				{ data: 'ROUTE_STATUS'},
				{ data: 'BEGIN_ADDRESS'},
				{ data: 'TIME'},
				{ data: 'invoice',render: function(data, type, row, meta){
						if(data != null) {
                                                    return data.AMOUNT;
                                                } else {
                                                    return "0";
                                                }
                                }},
				{ data: 'invoice', render: function(data, type, row, meta){
						if(data != null) {
							var payment = data.PAYMENT_JSON;
							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 =  "<img class='media-object' src='"+image+"' style='width: 32px;height: 32px;' />"

							+ "</a>"
							+ "<h5 class='media-heading'>" + payment.DATA.alias + " </h5>"
							+ payment.DATA.description;
							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,
			"language": {
				"url": "{!! asset('Datatables/languages/spanish.json') !!}"
			},
                        createdRow: function( row, data, dataIndex ) {
                            if ( data.ROUTE_STATUS == "CANCELED" ) {
                                $(row).addClass( 'bg-warning bg-lighten-4' );
                            }
                        }
		});

    $('#daterange').daterangepicker({
    	"timePicker": true,
        "timePicker24Hour": true,
    	"locale": {
        "format": "YYYY-MM-DD HH:mm",
        "separator": " - ",
        "applyLabel": "Aceptar",
        "cancelLabel": "Cancelar",
        "fromLabel": "De",
        "toLabel": "A",
        "customRangeLabel": "Personalizado",
        "weekLabel": "S",
    },
    });
});
//get click evento on daterangepicker
$('#daterange').on('apply.daterangepicker', function (ev, picker) {       
	getData(picker.startDate.format('YYYY-MM-DD HH:mm'), picker.endDate.format('YYYY-MM-DD HH:mm'));
});
$('#calendar-icon').click(function() {
      $("#daterange").click();
});

function getData(startDate, endDate) {
    $.showPreloader('{{__("strings.loading")}}');
	$.ajax({
        url: "{{route('api_quiq_driver_trips')}}",
        type: "POST",
        dataType: "json",        
        contentType: "aplication/json",
        data: JSON.stringify({
            driver_token: '{{$driver->SECURE_TOKEN}}',
            start_date: moment(startDate).utc().format('YYYY-MM-DD HH:mm'),
            end_date: moment(endDate).utc().format('YYYY-MM-DD HH:mm'),
        }),
        success: function (json) {
			console.log(json);
        	fillTable(json.data);
                $.hidePreloader();
        },
        error: function (err) {
        	console.log(err);
        	if(table != null) {
        		table.clear().draw();
        	}
                $.hidePreloader();
        }
    });
}


function fillTable(dataSet) {
	table.clear();
	table.rows.add(dataSet).draw();
}

</script>
@endpush