@extends('layouts.main')
@section('title',trans('core.title_test_result'))
@section('content')
<div class="pcoded-content">
	<div class="hme-loading-mask">
	    <div class="hme-loading-container">
	        <div class="hme-dual-ring"></div>
	        <div>Please wait, Loading...</div>
	    </div>
  	</div>

	<div class="pcoded-inner-content p-0">
		<div class="main-body">
			<div class="page-wrapper p-0">
				<div class="page-header p-15 m-b-0 pro-page-heading1">
					<div class="page-header-title">
						<h4>Search for Test Result</h4>
					</div>
					<div class="page-header-breadcrumb p-r-10">
						<ul class="breadcrumb-title">
							<li class="breadcrumb-item">
								@if(Auth::guard('corporate')->user()->user_type == 1)
									<a href="{{secure_url('company/dashboard') }}">
								@elseif(Auth::guard('corporate')->user()->user_type == 2)
									<a href="{{secure_url('recruiter/dashboard') }}">
								@endif 
									<span class="hiremee-home"></span>
								</a>
							</li>
							<li class="breadcrumb-item"><a href="{{ secure_url('pro/company/customized-result-search') }}">Search for Test Result</a></li>
						</ul>
					</div>
				</div>
				<div class="page-body">
					<div class="card borderless-card m-b-0 bg-f7f7f7">
						<div class="card-block p-t-0">
							<div class="row">
								<div class="col-md-7">
									<div class="card borderless-card m-b-0">
										<div class="card-block">
											{!! Form::open(["action" => "Pro\Corporate\CustomizedExcelsController@testResultSearch", "method" => "GET", "id" => "test_result_form", "name" => "test_result_form"]) !!}

												<div class="row form-group">
													<div class="col-md-12 text-left f-w-400 m-b-5">Assessment Type* :</div>
													<div class="col-md-12">
														<div class="pos-relative">
															<div class="form-radio">
											                    <div class="radio radiofill radio-primary radio-inline">
											                      <label>
											                        <input name="assessment_type" class="assessment_type" value="1" data-bv-field="member" type="radio" checked="checked">
											                          <i class="helper"></i>Corporate
											                      </label>
											                    </div>
											                    <div class="radio radiofill radio-primary radio-inline">
											                      <label>
											                        <input name="assessment_type" class="assessment_type" value="2" data-bv-field="member" type="radio">
											                          <i class="helper"></i>Test Inventory
											                      </label>
											                    </div>
										                  	</div>
										                </div>
										            </div>
												</div>
												<div class="row form-group">
													<div class="col-md-12 text-left f-w-400 m-b-5">Assessment Name* :</div>
													<div class="col-md-12 m-b-15">
														<div class="pos-relative">
															<div class="hme-select-style">
																{!! Form::select('assessment', $assessmentMaster, '', ['class' => 'form-control js-select2', 'id'=>'assessment', 'placeholder' => 'Select Assessment']) !!}
															</div>
														</div>
													</div>
												</div>
												<div class="row form-group">
													<div class="col-md-3 text-left f-w-400 m-b-10">Search Date* :</div>
													<div class="col-md-8">
														<div class="pos-relative">
															<div class="form-radio">
											                    <div class="radio radiofill radio-primary radio-inline">
											                      <label>
											                        <input name="search_date_type" class="search_date_type" value="1" data-bv-field="member" type="radio" checked="checked">
											                          <i class="helper"></i>Today
											                      </label>
											                    </div>
											                    <div class="radio radiofill radio-primary radio-inline">
											                      <label>
											                        <input name="search_date_type" class="search_date_type" value="2" data-bv-field="member" type="radio">
											                          <i class="helper"></i>Date of Range
											                      </label>
											                    </div>
										                  	</div>
										                </div>
										            </div>
											    </div>
												
												<div class="row form-group d-none" id="specific_date_block">
													<div class="col-md-6 text-left  f-w-400"><p class="l-h-0">Start Date <span class="text-danger">*</span> :</p>
														<div class="input-group">
															{!! Form::text('start_date','',['class'=>'form-control','placeholder'=>'e.g. 14-08-2018', 'id' => 'start_date']) !!}
															<span class="input-group-addon">
																<i class="icofont icofont-calendar"></i>
															</span>
														</div>
													</div>
													<div class="col-md-6 text-left f-w-400"><p class="l-h-0">End Date <span class="text-danger">*</span> :</p>
														<div class="input-group">
															{!! Form::text('end_date','',['class'=>'form-control','placeholder'=>'e.g. 15-08-2018', 'id' => 'end_date']) !!}
															<span class="input-group-addon" id="">
																<i class="icofont icofont-calendar"></i>
															</span>
														</div>
													</div>
												</div>
												<div class="row form-group">
													<div class="col-md-6 text-left f-w-400"><p class="l-h-0">Select Customized Column 1:</p>
														<select name="column_key1" id="column_key1" class="form-control col-val">
															<option value="">Select</option>
															<option value="branch">Branch</option>
															<option value="center">Center</option>
														</select>
													</div>
													<div class="col-md-6 text-left f-w-400"><p class="l-h-0">Customized Column Value 1:</p>
														<div class="pos-relative">
															<div class="hme-select-style">
																<select class="form-control js-select2" id="column_value1" name="column_value1"></select>
															</div>
														</div>		
													</div>
												</div>
												<div class="row form-group d-none" id="custom_filter2">
													<div class="col-md-6 text-left f-w-400"><p class="l-h-0">Select Customized Column 2:</p>
														<select name="column_key2" id="column_key2" class="form-control">
															<option value="">Select</option>
															{{-- <option value="branch">Branch</option>
															<option value="center">Center</option> --}}
														</select>
													</div>
													<div class="col-md-6 text-left f-w-400"><p class="l-h-0">Customized Column Value 2:</p>
														<div class="pos-relative">
															<div class="hme-select-style">
																<select class="form-control js-select2" id="column_value2" name="column_value2"></select>
															</div>
														</div>
													</div>
												</div>

												<div class="row form-group">
													<div class="col-md-6 text-left f-w-400"><p class="l-h-0">Order by <span class="text-danger">*</span> :</p>
														<div class="pos-relative">
														<div class="hme-select-style">
																<select name="order_by_field" class="form-control">
																	<option value="candidate_name">Candidate Name</option>
																	<option value="testpin">Test Pin</option>
																	<option value="assessment_date">Assessment Date</option>
																	<option value="assessment_overall_result.percentage">Percentage</option>
																</select>
															</div>
														</div>
													</div>
												</div>

												
												<div class="row form-group">
													<div class="col-md-3 text-left f-w-400 m-b-8">Sequence <span class="text-danger">*</span> :</div>
													<div class="col-md-8">
														<div class="form-radio">
															<div class="radio radiofill radio-primary radio-inline">
																<label>
																	<input name="order_by_type" value="asc" data-bv-field="member" type="radio">
																	<i class="helper"></i>Ascending
																</label>
															</div>
															<div class="radio radiofill radio-primary radio-inline">
																<label>
																	<input name="order_by_type" value="desc" data-bv-field="member" type="radio" checked="checked">
																	<i class="helper"></i>Decending
																</label>
															</div>
														</div>
													</div>
												</div>
												<div class="row form-group">
													<div class="col-sm-12 d-flex justify-content-start">
														<button class="btn btn-primary m-r-10 pro-green" type="submit">Get Test Results</button>
														<button class="btn pro-default border-none" type="reset">Cancel</button>									
													</div>
													<div class="col-md-2"></div>
												</div>
											{!! Form::close() !!}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('footer')
<script type="text/javascript">
$(function(){
	var todayDate = new Date().getDate();

    $("#start_date").bootstrapMaterialDatePicker({
    	time:false,
    	clearButton: true,
    	format: 'YYYY-MM-DD',
    	maxDate: new Date(new Date().setDate(todayDate-1)),
    }).on('change', function(e, date) {

    	$("#end_date").val("");
    	$("#end_date").bootstrapMaterialDatePicker('setMinDate', date);
    });

	$("#end_date").bootstrapMaterialDatePicker({
    	time:false,
    	clearButton: true,
    	format: 'YYYY-MM-DD',
    	maxDate: new Date(new Date().setDate(todayDate-1)),
    }).on('change', function(e, date) {
    	var start 	= $("#start_date").val();
    	var end 	= $("#end_date").val();
    	var startDateArr = start.split("-");
    	var endDateArr 	 = end.split("-");
   		var startDate 	 = new Date(startDateArr[0],startDateArr[1],startDateArr[2]);
		var endDate 	 = new Date(endDateArr[0], endDateArr[1], endDateArr[2]);
    	if(endDate < startDate){
    		$("#end_date").val("");
    		console.log('wrong');
    	}

    });
});

$(function() {
	$("#test_result_form").validate({
		ignore: [],
		rules: {
		  assessment:{
		  	required: true,
		  },	
          order_by_field: {
          	required: true
          },
          order_by_type: {
          	required: true
          },
          search_date_type:{
          	required: true,
          },
          start_date: {
          	required: {
          		depends: function () { return (($('input[name="search_date_type"]:checked').val()==2) ? true : false); }
          	},
          },
          end_date: {
          	required: {
          		depends: function () { return (($('input[name="search_date_type"]:checked').val()==2) ? true : false); }
          	},
          }
        },
		invalidHandler: function (event, validator) {

	    },
	    errorElement: 'span',
		errorPlacement: function(error, element) {
            var parent = $(element).parent();
            $('.tooltip').tooltip('hide');					
			$("body").find('#'+error[0].id+'-custom').remove();

			parent.append('<span data-position="left" data-delay="0" data-animation="false" class="js-tootletip hiremee-info text-danger tooltip-validate" id="'+error[0].id+'-custom" data-toggle="tooltip" data-original-title="'+error[0].innerText+'" data-trigger="hover" style="margin-right:25px;"></span>');
			
			$('#'+error[0].id+'-custom').tooltip(tooltip_direction_options);

		},
		submitHandler: function(form) {
          form.submit();
        }
	});

});
$('.assessment_type').change(function(e){	
	e.preventDefault();
	opt = $(this).val();
	$.ajax({
		url:baseUrl+'company/get-cor-asessment-data',
		data:{'type':opt},
		dataType:'json',
		type:'get',
		beforeSend:function(){
			$('.hme-loading-mask').fadeIn();
		},
		success:function(res){
			 $('.hme-loading-mask').fadeOut();
			 $('#assessment option').remove();
			 $('#assessment').html('<option value="">Select Assessment</option>'+res.response);
		},
		 error: function(error){
		 	$('.hme-loading-mask').fadeOut();
		 }
	})
})

$('.search_date_type').change(function(e){	
	e.preventDefault();
	opt_type = $(this).val();
	if(opt_type==2){
		$("#specific_date_block").removeClass('d-none');
	}else{
		$("#specific_date_block").addClass('d-none');
	}
})	

$(document).ready(function(){
	$('#test_result_form').on('change','#column_key1',function(e){
		e.preventDefault();
		$("#custom_filter2").addClass('d-none');
		var column_key = $(this).val();
		var assessment = $('#assessment').val();
		dateType = $('.search_date_type:checked').val();
		var start_date = '';
		var end_date = '';
		if(dateType == 2){
			start_date = $('#start_date').val();
			end_date = $('#end_date').val();
		}	
		var options = '';
		if(assessment!='' && column_key!='')
		{
			$.ajax({
				url:baseUrl+'pro/company/get-customized-values',
				data:{'search_date_type':dateType,'column_key':column_key,'assessment_id':assessment,'start_date':start_date,'end_date':end_date},
				dataType:'json',
				type:'post',
				beforeSend:function(){
					$('.hme-loading-mask').fadeIn();
				},
				success:function(res){
					$('.hme-loading-mask').fadeOut();
					if(res.value.length>0){
						if(res.value !== null){
						 	$.each(res.value,function(index,val) {
						 		if(res.value.length==1){
						 			options = options+'<option value="'+val.column_value+'" selected="selected">'+val.column_value+'</option>'
						 		//	$("#custom_filter2").removeClass('d-none');
								}else{
						 			options = options+'<option value="'+val.column_value+'">'+val.column_value+'</option>'
						 		}
						 	})
						}
						if(column_key=='branch'){
							$('#column_value1').html('<option value="">All Branches</option>'+options);
						}else{
							$('#column_value1').html('<option value="">All Centers</option>'+options);
						}
						if(res.value.length==1){
							viewSecondFilter();
							//$("#custom_filter2").removeClass('d-none');
							//$('#column_value2 option').remove();
							//callSecondFilter();
						}	
					}else{
						$('#column_value1').html('<option value="">No Values</option>');
					}
				},
				 error: function(error){
				 	$('.hme-loading-mask').fadeOut();
				 }
			})
		}else{
			if(assessment==''){
				alertMessage("error",'Please select assessment',"Warning");
			}
			$('#column_key1').val('');
			$('#column_value1 option').remove();
		}
	})

	$(document).on('change','#column_value1',function(){
		var column_value_one = $(this).val();
		var column_key_one 	 = $('#column_key1').val();
		if(column_value_one!='' && column_value_one!=undefined){
			$("#custom_filter2").removeClass('d-none');
			if(column_key_one!=''){
				if(column_key_one=='branch'){
					$('#column_key2').html('<option value="center">Center</option>');
					// $('#column_key2').val('center');
				}else{
					$('#column_key2').html('<option value="branch">Branch</option>');
					// $('#column_key2').val('branch');
				}

				// $('#column_key2').prop('disabled',true);
				$('#column_value2 option').remove();
				callSecondFilter();
			}
		}
		else{
			$("#custom_filter2").addClass('d-none');
		}
	})

	$(document).on('change','#column_key2',function(){
		callSecondFilter();
	});	

	function callSecondFilter(){
		var assessment = $('#assessment').val();
		var dateType = $('.search_date_type:checked').val();
		var start_date = '';
		var end_date = '';
		if(dateType == 2){
			start_date = $('#start_date').val();
			end_date = $('#end_date').val();
		}	
		var column_key = $('#column_key2').val();
		var column_key1 = $('#column_key1').val();
		var column_value1 = $('#column_value1').val();
		$.ajax({
			url:baseUrl+'pro/company/get-customized-values',
			data:{'search_date_type':dateType,'column_key':column_key,'assessment_id':assessment,'start_date':start_date,'end_date':end_date,'column_key1':column_key1,'column_value1':column_value1},
			dataType:'json',
			type:'post',
			beforeSend:function(){
				$('.hme-loading-mask').fadeIn();
			},
			success:function(res){
				$('.hme-loading-mask').fadeOut();
				$('#column_value2 option').remove();
				if(res.value.length>0){
					$("#custom_filter2").removeClass('d-none');
					if(res.value !== null){
						options ='';
					 	$.each(res.value,function(index,val){
					 		options = options+'<option value="'+val.column_value+'">'+val.column_value+'</option>'
					 	})
					}
					if(column_key=='branch'){
						$('#column_value2').html('<option value="">All Branches</option>'+options);
					}else{
						$('#column_value2').html('<option value="">All Centers</option>'+options);
					}	
				}else{
					$("#custom_filter2").addClass('d-none');
					$('#column_value2').html('<option value="">No Values</option>');
				}
			},
			error: function(error){
			 	$('.hme-loading-mask').fadeOut();
			}
		})
	}

	function viewSecondFilter(){
		var column_value_one = $('#column_value1').val();
		var column_key_one = $('#column_key1').val();
		if(column_value_one!='' && column_value_one!=undefined){
			$("#custom_filter2").removeClass('d-none');
			if(column_key_one!=''){
				if(column_key_one=='branch'){
					$('#column_key2').html('<option value="center" selected="selected">Center</option>');
				}else{
					$('#column_key2').html('<option value="branch" selected="selected">Branch</option>');
				}
				$('#column_value2 option').remove();
				callSecondFilter();
			}
		}
		else{
			$("#custom_filter2").addClass('d-none');
		}
	}
})
</script>
@endsection