@extends('layouts.main')

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

@section('content')
<div class="row match-height">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title" id="basic-layout-form">{{$taximeter->ALIAS}} [ {{$taximeter->IMEI}} ] / {{$taximeter->CIUDAD}}</h4>				
				</div>
				<div class="card-body collapse in">
					<div class="card-block">
						<form class="form">
							<div class="form-body">
								<h4 class="form-section"><i class="icon-car"></i> {{__('strings.quiq_trips_header')}}</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="tickets-table" class="table hover mb-0">
					                        <thead class="thead-inverse">
					                            <tr>
					                            	<th>ID</th>	               	
					                            	<th>IMEI</th>
                                                                        <th>OPERACION_FOLIO</th>
                                                                        <th>OPERACION_FECHA_HORA</th>
                                                                        <th>SERVICIO_TARIFA</th>
					                            	<th>TOTAL_TOTAL</th>
					                            	<th>RUTA</th>
					                            	<th>SERVICIO_T_VEL_ARR</th>
					                            	<th>SERVICIO_KM_RECORRIDOS</th>
					                            	<th>SERVICIO_KM_RECORRIDOS_VEL_ARR</th>
					                            	<th>PRECIO_BANDERAZO</th>
					                            	<th>PRECIO_T_VEL_ARRASTRE</th>
					                            	<th>PRECIO_DISTANCIA</th>
					                            	<th>TOTAL_BANDERAZO</th>
					                            	<th>TOTAL_VEL_ARR</th>
					                            	<th>TOTAL_DISTANCIA</th>
					                            	<th>TOTAL_EXTRAS</th>
					                            	<th>SERVICIO_DURACION_MINUTOS</th>                                                                        
					                            	<th>UNIDAD_NUM_TAXI</th>
					                            	<th>UNIDAD_PLACAS</th>
					                            	<th>UNIDAD_NUM_TAXIMETRO</th>
					                            	<th>CONSEC_NOMBRE</th>
					                            	<th>CONSEC_TEL</th>
					                            	<th>CIUDAD</th>
					                            	<th>SERVICIO_T_REPOSO</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;
$(function() {
	
	//setting language for moment.js
	moment.locale('es');
	//initialize datetable
	
	//scrollY: "450px",
	//scrollCollapse: true,

	table = $('#tickets-table').DataTable({
            responsive: true,
            paging: false,	
            columns: [
            { data: 'ID', name: 'ID' },
            { data: 'IMEI', name: 'IMEI' },
            { type: 'html', data: 'OPERACION_FOLIO', name: 'OPERACION_FOLIO', render: function(data, type, row, meta){
                    var ticketDetail = "<a href='{{route('show_ticket',['ticket'=>'_value'])}}'>" + row.OPERACION_FOLIO + "</a>";   
                    
                    return ticketDetail.replace("_value",row.ID);

            }},
            { data: 'OPERACION_FECHA_HORA', name: 'OPERACION_FECHA_HORA' },
            { data: 'SERVICIO_TARIFA', name: 'SERVICIO_TARIFA' },            
            { data: 'TOTAL_TOTAL', name: 'TOTAL_TOTAL' },
            { data: 'RUTA', name: 'RUTA' },     
            { data: 'SERVICIO_T_VEL_ARR', name: 'SERVICIO_T_VEL_ARR' },
            { data: 'SERVICIO_KM_RECORRIDOS', name: 'SERVICIO_KM_RECORRIDOS' },
            { data: 'SERVICIO_KM_RECORRIDOS_VEL_ARR', name: 'SERVICIO_KM_RECORRIDOS_VEL_ARR' },
            { data: 'PRECIO_BANDERAZO', name: 'PRECIO_BANDERAZO' },
            { data: 'PRECIO_T_VEL_ARRASTRE', name: 'PRECIO_T_VEL_ARRASTRE' },
            { data: 'PRECIO_DISTANCIA', name: 'PRECIO_DISTANCIA' },
            { data: 'TOTAL_BANDERAZO', name: 'TOTAL_BANDERAZO' },
            { data: 'TOTAL_VEL_ARR', name: 'TOTAL_VEL_ARR' },
            { data: 'TOTAL_DISTANCIA', name: 'TOTAL_DISTANCIA' },
            { data: 'TOTAL_EXTRAS', name: 'TOTAL_EXTRAS' },
            { data: 'SERVICIO_DURACION_MINUTOS', name: 'SERVICIO_DURACION_MINUTOS' },
            { data: 'UNIDAD_NUM_TAXI', name: 'UNIDAD_NUM_TAXI' },
            { data: 'UNIDAD_PLACAS', name: 'UNIDAD_PLACAS' },
            { data: 'UNIDAD_NUM_TAXIMETRO', name: 'UNIDAD_NUM_TAXIMETRO' },
            { data: 'CONSEC_NOMBRE', name: 'CONSEC_NOMBRE' },
            { data: 'CONSEC_TEL', name: 'CONSEC_TEL' },
            { data: 'CIUDAD', name: 'CIUDAD' },
            { data: 'SERVICIO_T_REPOSO', name: 'SERVICIO_T_REPOSO' },       
            ],
            dom: 'Bfrtip',
            buttons: [
                'copy', 'excel', 'pdf'
            ],
            "language": {
                "url": "{!! asset('Datatables/languages/spanish.json') !!}"
            },
        });

    $('#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_rest_taximeter_tickets')}}",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify({
            user_token: '{{Auth::user()->token}}',
            imei: '{{$taximeter->IMEI}}',
            start_date: startDate,
            end_date: endDate
        }),
        dataType: "json",
        success: function (json) {
        	table.clear();
                table.rows.add(json.tickets).draw();
                $.hidePreloader();
        },
        error: function (err) {
        	if(table != null) {
        		table.clear().draw();
        	}
                $.hidePreloader();
        }
    });
}
</script>
@endpush