@extends('layouts.main')

@section('content')

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true" style="top:10em">
	<div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel19">ALERTA</h4>
			</div>
			<div class="modal-body">					
				<h5 id="textAlert"></h5>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-outline-info" data-dismiss="modal">Aceptar</button>
			</div>
		</div>
	</div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ __('strings.headerViewPayDriverTripComission',["app"=>"QuiQ"]) }} </h4>
            </div>
            <div class="card-body p-2">
				<div class="card-block">
					<div class="row">
						<div class="col-md-3">
							<label for="driver">Conductor</label>
							<select class="form-control" name="driver" id="driver">
								<option value="">-- Seleccione un valor --</option>
								@foreach($drivers as $driver)
									<option value={{$driver->ID_USER}}>{{$driver->NAME.' '.$driver->LAST_NAME}}</option>
								@endforeach
							</select>
						</div> 
						<div class="col-md-4">
							<label for="startDate">Fecha Inicial</label>
							<input type="date" id="startDate" class="form-control" name="startDate">
						</div> 
						<div class="col-md-4">
							<label for="endDate">Fecha Final</label>
							<input type="date" id="endDate" class="form-control" name="endDate">
						</div> 	
						<div class="col-md-1" align="right" style="padding-top:2.1em">
							<button type="button" class="btn btn-info" onclick="getRangeDates()"><i class="fa fa-search" ></i></button>
						</div>	
					</div>				
				
					<div class="table-responsive" id="divTable" style="visibility:hidden">
						<table id="drivers-table" class="table cell-borders">
							<thead class="thead-inverse">
								<tr>
									<th>FECHA</th>
									<th>USUARIO</th>
									<th>PUNTO DE PARTIDA</th>
									<th align="right">IMPORTE</th>
									<!--<th>COMISIONES</th>-->
								</tr>
							</thead>
						</table>
					</div>
					<form class="form" action="{{route('exportPayDriverQuiQTripCommission')}}" method="post" id="form" target="_blank">
                        {{ csrf_field() }}
                        {{ method_field('post') }}
						
						<input type="hidden" id="exportStartDate" name="exportStartDate" value="">
						<input type="hidden" id="exportEndDate" name="exportEndDate" value="">
						<input type="hidden" id="exportDriver" name="exportDriver" value="">
						
						<div class="row" id="exportData" style="visibility:hidden">
							<div class="col-md-6">
								<label for="file_type">Tipo de Archivo</label>
								<select class="form-control" name="file_type" id="file_type">
									<option value="Excel">Excel</option>
									<option value="PDF">PDF</option>
								</select>
							</div> 
							<div class="col-md-6" align="right">
								<button type="submit" class="btn btn-warning active" style="margin-top:2em">Exportar <i class="fa fa-download" ></i></button>
							</div> 
						</div>	
					</form>
					
				</div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

<script type="text/javascript">
    var table;
	
	$(function() {
		moment.locale('es');

		table = $('#drivers-table').DataTable({
			responsive: true,  
			paging: false,
			columns:[
				{ data: null,render: function(data, type, row, meta){
					return data.created_at.substring(0,data.created_at.indexOf(" ")); 
				}},
				{ data: null,render: function(data, type, row, meta){
					return data.userName + " " + data.userLast; 
				}},
				{ data: 'BEGIN_ADDRESS'},	 
				{ data: null,render: function(data, type, row, meta){
					
					if( data.hasOwnProperty( 'tripCommission' ) ){
						
						var commissions = null;
						
						var commissionsData = data.tripCommission;
						
						
						if( commissionsData.hasOwnProperty( 'COMISION CHOFER' ) ){
							commissions = commissionsData['COMISION CHOFER']['VALOR'];
						}
						
						if( commissions != null )
							return commissions; 
						else
							return 'NO EXITE UNA COMISION ASIGNADA AL CONDUCTOR';
					}
					else{
						return "SIN ASIGNACION DE COMISIONES"; 
					}
				}},			
			],
			dom: 'Bfltip',
			buttons: [
			//'copy', 'excel'
			],
		});
	});
	
	/*
	//	valida los rango de fechas para la busqueda de viajes por usuarios
	*/
	function getRangeDates(){
	
		if( $('#driver').val() != '' && $('#startDate').val() != '' && $('#endDate').val() != '' && 
			$('#startDate').val() <= $('#endDate').val() ){
			
			$('#exportDriver').val( $('#driver').val() );
			$('#exportStartDate').val( $('#startDate').val() ); 
			$('#exportEndDate').val( $('#endDate').val() );
			
			
			$.showPreloader('{{__("strings.loading")}}');
			$.ajax({
				url: "{{ route('searchPayDriverQuiQTripCommission') }}",
				headers: {"X-CSRF-TOKEN": "{{ csrf_token() }}" },
				type: 'post',
				data: {
						"startDate": $('#startDate').val(),
						"endDate": $('#endDate').val(),
						"driver": $('#driver').val(),
					},
				success: function(response){
					table.clear();
					//console.log(response.data);
					table.rows.add(response.data).draw();
					$.hidePreloader();
					
					var validated = true;
					
					if( response.data.length > 0){
						for( var i in response.data) {
						
							if( !response.data[i].hasOwnProperty( 'tripCommission' ) ){
								validated = false;
								break;
							}
						}
					}
					else{
						validated = false;
					}
					
					
					if( validated ){
						$("#exportData").css("visibility","visible");
					}
					else{
						$("#exportData").css("visibility","hidden");
					}
				},
				complete: function() {
					
				}
			});	
			$("#divTable").css("visibility","visible");
		}
		else if( $('#driver').val() == '' ){
			$('#textAlert').text('Es necesario seleccionar un conductor para obtener la informacion deseada');
			$('#modal').modal('show');
		}
		else if( $('#startDate').val() == '' || $('#endDate').val() == ''  ){
			$('#textAlert').text('Es necesario rellenar el rango de fechas para obtener la informacion deseada');
			$('#modal').modal('show');
		}
		else if( $('#startDate').val() > $('#endDate').val() ){
			$('#textAlert').text('La fecha final debe ser mayor o igual a la fecha inicial');
			$('#modal').modal('show');
		}
	}
</script>
@endpush