@extends('layouts.main')
@section('title','Analysis Rank Report')
@section('content')
<style type="text/css">
	@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  font-family: Lato;
}

.chart {
    width  : 800px;
    height : 220px;
}
.hide{
	display: none;
}
.auto-width{
	width:auto;
}
</style>
<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="row">
					<div class="col-md-9 p-r-0">
						<div class="page-header-title">
							<h4>Analysis Rank Report</h4>
						</div>
					</div>
						<div class="col-md-3">
							<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/test-result') }}">Search for Test Result</a>
										</li>
								</ul>
							</div>
						</div>
				</div>
					
				</div>
				<div id="pro-preview-page1"></div>
					<div class="page-body">
				<div class="pageheader">
						<div class="col-md-12" style="margin-top: 19px;">
			 <!-- Start -->
				  <form id="searchFrom" method="get">
	              <div class="row" style="margin-top: 19px;">

                        <div class="col-md-2 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_field',$start_date ? $start_date : '',['class'=>'form-control','placeholder'=>'e.g. 2020-10-22', 'id' => 'start_date_field']) !!}
                            <span class="input-group-addon">
                              <i class="icofont icofont-calendar"></i>
                            </span>
                              <input type="hidden" name="export" value="1">
                          </div>

                        </div>

                        <div class="col-md-2 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_field',$end_date ? $end_date : '',['class'=>'form-control','placeholder'=>'e.g. 2020-10-22', 'id' => 'end_date_field']) !!}
                            <span class="input-group-addon" id="">
                              <i class="icofont icofont-calendar"></i>
                            </span>
                          </div>
                        </div>

                        <div class="col-md-1 text-left  f-w-400"><p class="l-h-0">Percent<span class="text-danger"></span> :</p>
                      	  {!! Form::select('percent',array('0'=>'All','1'=>'<70%','2'=>'>70%'),0, ['class' =>'form-control auto-width', 'id'=>'percent']) !!}
                    
                        </div>
                         <div class="col-md-2 text-left  f-w-400"><p class="l-h-0">By Predefined Form:<span class="text-danger">*</span> :</p>
                      	  <select  name="filter-by" id="filter-by" class="form-control">
					                    		<option value="">Select</option>
					                    		<option value="gender">Gender</option>
					                    		<option value="collage">College</option>
					                    		<option value="city">City</option>
					                    		<option value="state">State</option>
					                    		
					                    	</select>
                    
                        </div>
 
                         <div id="gender-filter" class="col-md-2 text-left  f-w-400 filters-fld hide"><p class="l-h-0">Gender:<span class="text-danger"></span> :</p>
                     			 <select  name="gender" id="gender" class="form-control filter">
						                    		<option value=''>Select</option>
						                    		@if(!empty($gender_list))
							                    		@foreach($gender_list->options as $option)
							                    			<option value="{{$option->option_name}}">{{$option->option_name}}</option>
							                    		@endforeach	
						                    		@endif
						                    	</select>
                    
                        </div>

                         <div id="collage-filter" class="col-md-2 text-left  f-w-400 filters-fld hide"><p class="l-h-0">College:<span class="text-danger"></span> :</p>
                      	  <select  name="collage" id="collage" class="form-control filter">
	                    		<option value=''>Select</option>
	                    		@if(!empty($collage_list))
	                    		@foreach($collage_list->options as $option)
	                    			<option value="{{$option->option_name}}">{{$option->option_name}}</option>
	                    		@endforeach	
	                    		@endif
	                    	</select>
                        </div>

                         <div id="state-filter" class="col-md-2 text-left  f-w-400 filters-fld hide"><p class="l-h-0">State :<span class="text-danger"></span> :</p>
                      	 <select  name="state" id="state" class="form-control filter">
					                    		<option value=''>Select</option>
					                    		@if(!empty($state_list))
					                    		@foreach($state_list->options as $option)
					                    			<option value="{{$option->option_name}}">{{$option->option_name}}</option>
					                    		@endforeach	
					                    		@endif
					                    	</select>
                        </div>

                        <div id="city-filter" class="col-md-2 text-left  f-w-400 filters-fld hide"><p class="l-h-0">City :<span class="text-danger"></span> :</p>
                      	<select  name="city" id="city" class="form-control filter">
	                    		<option value=''>Select</option>
	                    		@if(!empty($city_list))
	                    		@foreach($city_list->options as $option)
	                    			<option value="{{$option->option_name}}">{{$option->option_name}}</option>
	                    		@endforeach	
	                    		@endif
	                    	</select>
                        </div>
	 <!-- @author Naveenkumar Seker @version 24.0 -->
	                          <div class="col-md-3" style="margin-top: 16px;">
	                            <button  value="Submit" class="btn btn-sm btn-info">Search</button>
	                           <button id="reset" class="btn btn-sm btn-danger">Reset</button>
	                           <button id="export" class="btn btn-sm btn-warning" >Export</button>
	                          </div>
                          </div>
                      </form>
				</div>
			</div>

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link report-one active" data-toggle="tab" href="#home">College Ranking</a>
  </li>
  <li class="nav-item">
    <a class="nav-link report-two" data-toggle="tab" href="#menu1">Gender Diversity</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">
  <!--tab stared-->
  		<div id="report-one-div">
  				@include('pro.corporate.analysis_rank_report_render')
  		</div>
<!--tab ended-->
  </div>
  <div class="tab-pane container fade" id="menu1">
		<div id="report-two-div">
			
		</div>  	

  </div>
  <div class="tab-pane container fade" id="menu2">page 3</div>
</div>

		
					</div>
				
			</div>
		</div>
	</div>
</div>
@endsection

@section('footer')
<script>

	$(function() {
        $("#start_date_field").bootstrapMaterialDatePicker({
		    	time:false,
		    	clearButton: true,
		    	format: 'YYYY-MM-DD'
		    }).on('change', function(e, date) {

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

		    });
		    $("#end_date_field").bootstrapMaterialDatePicker({
		    	time:false,
		    	clearButton: true,
		    	format: 'YYYY-MM-DD'
		    }).on('change', function(e, date) {
		    	var start 	= $("#start_date_field").val();
		    	var end 	= $("#end_date_field").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_field").val("");
		    		console.log('wrong');
		    	}
		    });
	});
				
   
    $('#export').click(function(e){
    	e.preventDefault();
    	$('.hme-loading-mask').fadeIn();
    	url = $(this).data('url');
    		var start_date= $.trim($('#start_date_field').val());
	    	var end_date= $.trim($('#end_date_field').val());
	    	var state= $.trim($('#state').val());
            var city= $.trim($('#city').val());
            var gender= $.trim($('#gender').val());
            var collage= $.trim($('#collage').val());
            var start_date= $.trim($('#start_date_field').val());
	        var end_date= $.trim($('#end_date_field').val());
	        var percent= $.trim($('#percent').val());
	        console.log(state);
	        console.log(city);
	    	window.location.href="analysis-rank-view?start_date="+start_date+"&end_date="+end_date+"&export=1"+'&state='+state+'&city='+city+'&gender='+gender+'&collage='+collage+'&percent='+percent;
	    	console.log("analysis-rank-view?start_date="+start_date+"&end_date="+end_date+"&export=1"+'&state='+state+'&city='+city+'&gender='+gender+'&collage='+collage+'&percent='+percent+"export=1")
	    	 $('.hme-loading-mask').fadeOut();
    });

	$("#searchFrom").submit(function(e) {
   		 e.preventDefault();
		  }).validate({
		      submitHandler: function(form) { 
		
		            var start_date= $.trim($('#start_date_field').val());
		            var end_date= $.trim($('#end_date_field').val());
		            var state= $.trim($('#state').val());
		            var city= $.trim($('#city').val());
		            var gender= $.trim($('#gender').val());
		            var collage= $.trim($('#collage').val());
		            var percent= $.trim($('#percent').val());
		           
		            $.ajax({
		              method:"get",
		              dataType:'json',
		              url: baseUrl+"/pro/analysis-rank-view",
		              data:{ "start_date":start_date,"end_date":end_date,"_token": $('meta[name=csrf-token]').attr('content'),'state':state,'city':city,'gender':gender,'collage':collage,'percent':percent},
		              beforeSend:function(){
		              	$('.hme-loading-mask').fadeIn();
		              },
		              success:function(response){
		              	$('.hme-loading-mask').fadeOut();
		                if (response.status == 'ok') {
	                		$('#report-one-div').html("");
		                    	$('#report-one-div').html(response.content);
		                    	if(response.count == 0)
				                	{
				                		$('#export').prop('disabled',true);
				                	}else{
				                		 $('#export').prop('disabled',false);
				                	}
		                 }else{
		                     
		                    $("body").find("#create_pool").text("Create pool").attr("disabled",false);
		                 }
		               }  
		             });
		        return false;
		    }
		});


		$('#filter-by').change(function(){
			filter_value = $(this).val();
			$('.filters-fld').css('display','none');
			if(filter_value !== ''){
				$('.filter').val('');
				$('#'+filter_value+'-filter').css('display','block');
			}else{
				$('.filter').val('');
			}

		});

		$('#reset').click(function(e){
			e.preventDefault();
			$('#searchFrom,input,select').val('');
			$('#filter-by').trigger('change');
		})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		  e.target // newly activated tab
		  e.relatedTarget // previous active tab
		 var activeCls = e.target.classList[1]
				 $("body").find("#create_pool").text("Processing...").attr("disabled",true);
		            var start_date= $.trim($('#start_date_field').val());
		            var end_date= $.trim($('#end_date_field').val());
		            var state= $.trim($('#state').val());
		            var city= $.trim($('#city').val());
		            var gender= $.trim($('#gender').val());
		            var collage= $.trim($('#collage').val());
		            var percent= $.trim($('#percent').val());
		            $.ajax({
		              method:"get",
		              dataType:'json',
		              url: baseUrl+"/pro/analysis-rank-view",
		              data:{ "start_date":start_date,"end_date":end_date,"_token": $('meta[name=csrf-token]').attr('content'),'state':state,'city':city,'gender':gender,'collage':collage,'percent':percent,'reportType':activeCls},
		              beforeSend:function(){
		              	$('.hme-loading-mask').fadeIn();
		              },
		              success:function(response){
		              	$('.hme-loading-mask').fadeOut();
		                if (response.status == 'ok') {

		                	if(response.count == 0)
		                	{
		                		$('#export').prop('disabled',true);
		                	}else{
		                		 $('#export').prop('disabled',false);
		                	}
		                	if(activeCls == 'report-two'){
		                    $('#report-two-div').html("");
		                    $('#report-two-div').html(response.content);
		                	}else{
		                		$('#report-one-div').html("");
		                    	$('#report-one-div').html(response.content);
		                	}
		                    
		                     
		                 }else{
		                     
		                    $("body").find("#create_pool").text("Create pool").attr("disabled",false);
		                 }
		               }  
		             });
		
	})
$('body').on('click','.pagination .page-item a', function(e){
    e.preventDefault();
    
     /*e.target // newly activated tab
		  e.relatedTarget // previous active tab
		 var activeCls = e.target.classList[1]*/
		var activeCls = $('.nav-item a.active').attr('class');
		 console.log(activeCls);
    var url = $(this).attr('href');
    /*console.log(url);
    return false;*/

    //return false
    	
		 $("body").find("#create_pool").text("Processing...").attr("disabled",true);
            var start_date= $.trim($('#start_date_field').val());
            var end_date= $.trim($('#end_date_field').val());
            var state= $.trim($('#state').val());
            var city= $.trim($('#city').val());
            var gender= $.trim($('#gender').val());
            var collage= $.trim($('#collage').val());
            var percent= $.trim($('#percent').val());
            $.ajax({
              method:"get",
              dataType:'json',
              url: url,
             /* data:{ "start_date":start_date,"end_date":end_date,"_token": $('meta[name=csrf-token]').attr('content'),'state':state,'city':city,'gender':gender,'collage':collage,'percent':percent,'reportType':activeCls},*/
              beforeSend:function(){
              	$('.hme-loading-mask').fadeIn();
              },
              success:function(response){
              	$('.hme-loading-mask').fadeOut();
                if (response.status == 'ok') {

                	if(response.count == 0)
                	{
                		$('#export').prop('disabled',true);
                	}else{
                		 $('#export').prop('disabled',false);
                	}
                	if(activeCls == 'nav-link report-two active'){
                    $('#report-two-div').html("");
                    $('#report-two-div').html(response.content);
                	}else{
                		$('#report-one-div').html("");
                    	$('#report-one-div').html(response.content);
                	}
                    
                     
                 }else{
                     
                    $("body").find("#create_pool").text("Create pool").attr("disabled",false);
                 }
               }  
             });
});

</script>
@endsection