@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" style="padding-bottom:0.2em">
                <h4 class="card-title">{{ __('strings.headerAssignUserComission',["app"=>"QuiQ"]) }} </h4>
            </div>
            <div class="card-body">
				<div class="card-block">
					<div class="form-body"> 
						<div class="row">
							<div class="col-md-12">
								<h3><strong>DATOS DEL USUARIO</strong></h3>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6">
								<h4><strong>Nombre:</strong> {{ $user->NAME.' '.$user->LAST_NAME }}</h4>
							</div>
							<div class="col-md-6">
								<h4><strong>Emial:</strong> {{ $user->EMAIL }}</h4>
							</div>
						</div>
						
						<div class="row" style="padding-top: 2em">
							<div class="col-md-12">
								<h3><strong>ASIGNAR COMONISIONES</strong></h3>
							</div>
						</div>
						<div class="row">
							<div class="col-md-4">
								<label for="commission">Nombre de la comision</label>
								<input type="text" id="commission" class="form-control" name="commission">
							</div> 
							<div class="col-md-4">
								<label for="percentage">Porcentaje ( 1% - 99% )</label>
								<input type="number" id="percentage" class="form-control" name="percentage">
							</div> 
							<div class="col-md-3">
								<label for="commission_type">Tipo de Comision</label>
								<select class="form-control" name="commission_type" id="commission_type">
									<option value="">-- Elige un valor --</option>
									@foreach($commission_types as $type)
										<option value={{$type->commission_type}}>{{$type->commission_type}}</option>
									@endforeach
								</select>
							</div>
							<div class="col-md-1" align="right" style="padding-top:2em">
								<button type="button" class="btn btn-info" onclick="addCommission()"><i class="fa fa-plus" ></i></button>
							</div>						
						</div>
						
						
						<br/>
						<br/>
						
						<form class="form" action="{{route('assignQuiQUserCommissionInfo')}}" method="post" id="form">
                        {{ csrf_field() }}
                        {{ method_field('post') }}
						
							<input type="hidden" name="id" value="{{$id}}">
							<input type="hidden" id="noCommissions" name="noCommissions" value="0">
						
							<div class="row">
								<div class="col-md-6">
									<h5><strong>COMONISIONES INTERNAS</strong></h5>
									<h5>
										<ul id="internal_commissions">
											@if(!empty($commissions))
												@for($i = 0; $i < count($commissions->INTERNA); $i++)
													<h4>
														<li id="{{ str_replace(' ', '_',$commissions->INTERNA[$i]->commission) }}">
															{{$commissions->INTERNA[$i]->commission.':'.$commissions->INTERNA[$i]->percentage.'%'}}
															<button type="button" class="btn btn-primary" 
															onclick="removeAssignedCommission('{{ str_replace(' ', '_',$commissions->INTERNA[$i]->commission) }}')" 
															style="padding: 0.1em 0.4em;border-radius:2px" 
															id="{{$commissions->INTERNA[$i]->commission}}">
															<i class="fa fa-times fa-sm"></i>
															</button>
															<input type="hidden" id="aInt{{$i+1}}" name="aInt{{$i+1}}" 
															value="{{$commissions->INTERNA[$i]->commission}}:{{$commissions->INTERNA[$i]->percentage}}">															
														</li>
													</h4>
												@endfor
												<input type="hidden" id="noCommissionsAInt" name="noCommissionsAInt" value="{{$i}}">
											@endif
										</ul>
									</h5>
								</div>
								<div class="col-md-6">
									<h5><strong>COMONISIONES EXTERNAS</strong></h5>
									<h5>
										<ul id="external_commissions">
											@if(isset($commissions->EXTERNA))
												@for($i = 0; $i < count($commissions->EXTERNA); $i++)
													<h4>
														<li id="{{ str_replace(' ', '_',$commissions->EXTERNA[$i]->commission) }}">
															{{$commissions->EXTERNA[$i]->commission.':'.$commissions->EXTERNA[$i]->percentage.'%'}}
															<button type="button" class="btn btn-primary" 
															onclick="removeAssignedCommission('{{ str_replace(' ', '_',$commissions->EXTERNA[$i]->commission) }}')" 
															style="padding: 0.1em 0.4em;border-radius:2px" 
															id="{{$commissions->EXTERNA[$i]->commission}}">
															<i class="fa fa-times fa-sm"></i>
															</button>
															<input type="hidden" id="aExt{{$i+1}}" name="aExt{{$i+1}}" 
															value="{{$commissions->EXTERNA[$i]->commission}}:{{$commissions->EXTERNA[$i]->percentage}}">
														</li>
													</h4>
												@endfor
												<input type="hidden" id="noCommissionsAExt" name="noCommissionsAExt" value="{{$i}}">
											@endif
										</ul>
									</h5>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12" align="right">
									<button type="button" class="btn btn-primary" id="send" onclick="calculateCommissions()">Registrar</button>
								</div>
							</div>
							
						 </form>
						 
					</div>
                </div>
            </div>
        </div>
        </div>
</div>





@endsection


@push('scripts')
<script type="text/javascript">
	
	var countCommissions = 1;
	var nameCommissions = [];
	var countName = 0;
	
	/*
	//	crea los elementos necesarios para la visualizacion de comiciones a agregar
	*/
    function addCommission(){
		
		if(	$('#commission').val() != '' &&
			$('#percentage').val() != '' &&
			$('#commission_type').val() != ''
		)
		{
			
			var list = '';
			var nameList = '';
			
			if( $('#commission_type').val() == 'INTERNA' ){
				list = "#internal_commissions";
				nameList = "in";
			}
			else if( $('#commission_type').val() == 'EXTERNA' ){
				list = "#external_commissions";
				nameList = "ex";
			}
			
			$(list).append( 
				'<h4>'+
				'<li id="commission_'+countCommissions+'"> '+
				$('#commission').val()+': '+$('#percentage').val()+'% &nbsp&nbsp&nbsp'+
				'<button type="button" class="btn btn-primary" onclick="removeCommission('+countCommissions+')" style="padding: 0.1em 0.4em;border-radius:2px">'+
				'<i class="fa fa-times fa-sm"></i></button>'+
				'<input type="hidden" id="'+nameList+countCommissions+'"'+
				' name="'+nameList+countCommissions+'" value="'+$('#commission').val()+':'+$('#percentage').val()+'">'+
				'</li>'+
				'</h4>'
			);
			
			$('#commission').val('');
			$('#percentage').val('');
			$('#commission_type').val('');
			
			$('#noCommissions').val(countCommissions);
			
			countCommissions++;
			
			$('#send').css("visibility","visible");
			
		}
		else{
			$('#textAlert').text('Se debe de rellenar todos los campos para poder agregar la comision');
			$('#modal').modal('show');
		}
	}
	
	/*
	//	remueve las comisiones que seran agregadas
	*/
	function removeCommission(count){
		$("#commission_"+count).remove();
	}
	
	/*
	//	remueve las comisiones que han sido previamente asignadas
	*/
	function removeAssignedCommission(id){
		$("#"+id).remove();
	}
	
	/*
	//	calcula el valor conjunto de las comisiones, las valida y revisa que esten presente las comisiones obligatorias
	*/
	function calculateCommissions(){
		
		var totalCoInt = 0;
		var totalCoExt = 0;
		
		if( $('#noCommissionsAInt').val() > 0 ){
			
			for(var i = 1; i <= $('#noCommissionsAInt').val(); i++ ){
				
				if( $('#aInt'+i).length ){
					totalCoInt += parseFloat( $('#aInt'+i).val().substring( $('#aInt'+i).val().indexOf(":")+1) );
					console.log( "int"+totalCoInt );
					nameCommissions[ countName++ ] = $('#aInt'+i).val().substring( 0, $('#aInt'+i).val().indexOf(":"));
					console.log( nameCommissions[ countName - 1 ] );
				}
			}
		}
		
		if( $('#noCommissionsAExt').val() > 0 ){
			
			for(var i = 1; i <= $('#noCommissionsAExt').val(); i++ ){
				
				if( $('#aExt'+i).length ){
					totalCoExt += parseFloat( $('#aExt'+i).val().substring( $('#aExt'+i).val().indexOf(":")+1) );
					console.log( "ext"+totalCoExt );
					nameCommissions[ countName++ ] = $('#aExt'+i).val().substring( 0, $('#aExt'+i).val().indexOf(":"));
					console.log( nameCommissions[ countName - 1 ] );
				}
			}
		}
		
		for(var i = 1; i <= $('#noCommissions').val(); i++ ){
			
			if( $('#in'+i).length ){
				totalCoInt += parseFloat( $('#in'+i).val().substring( $('#in'+i).val().indexOf(":")+1) );
				console.log( "int"+totalCoInt );
				
				nameCommissions[ countName++ ] = $('#in'+i).val().substring( 0, $('#in'+i).val().indexOf(":"));
				console.log( nameCommissions[ countName - 1 ] );
			}
			else if( $('#ex'+i).length ){
				totalCoExt += parseFloat( $('#ex'+i).val().substring( $('#ex'+i).val().indexOf(":")+1) );
				console.log( "ext"+totalCoExt );
				
				nameCommissions[ countName++ ] = $('#ex'+i).val().substring( 0, $('#ex'+i).val().indexOf(":"));
				console.log( nameCommissions[ countName - 1 ] );
			}
		}
		
		if( totalCoInt == 100 && totalCoExt < 100 ){
			$.showPreloader('{{__("strings.loading")}}');
			$.ajax({
				url: "{{ route('verifyRequiredCommissions') }}",
				headers: {"X-CSRF-TOKEN": "{{ csrf_token() }}" },
				type: 'post',
				data: {
						"nameCommissions": nameCommissions,
					},
				success: function(response){
					console.log(response);
					
					if( response[0].verified == true ){
						$('#form').submit();
					}
					else{
						$.hidePreloader();
						$('#textAlert').text(response[0].message);
						$('#modal').modal('show');
					}
				},
				complete: function() {
					
				}
			});	
			
		}
		else if( totalCoInt != 100 ){
			$('#textAlert').text("La suma de las comisiones internas debe ser igual al 100%");
			$('#modal').modal('show');
		}
		else if( totalCoExt > 100 ){
			$('#textAlert').text("La suma de las comisiones externas debe ser menor al 100%");
			$('#modal').modal('show');
		}
		
	}
	
</script>
@endpush