@extends('layouts.main')
@section('title', 'HireMee GOLD Assessment- Discover your Diamond')
@section('content')
<style type="text/css">

.chart {
    width       : 800px;
    height      : 220px;
}
.amcharts-chart-div > a {
    display: none !important;
}

.amExportButton{
    display: none !important;
}

</style>
<div class="pcoded-content">
	<div class="pcoded-inner-content">
		<div class="main-body">
			<div class="page-wrapper">
				<div class="page-header">
					<div class="d-flex justify-content-between">
						<div class="page-header-title">
							<h4>Module Assessment</h4>
						</div>
						<div class="page-header-breadcrumb">
							<ul class="breadcrumb-title">
								<li class="breadcrumb-item">
									<a href="#!">
										<span class="hiremee-home"></span>
									</a>
								</li>
								<li class="breadcrumb-item"><a href="/candidate-dashboard">Dashboard</a>
								</li>

								<li class="breadcrumb-item "><a href="#">Assessment</a>
								</li>

							</ul>
						</div>
					</div>
				</div>
				<div id="pro-preview-page1"></div>
				<div class="page-body" >
					<div class="d-flex justify-content-start flex-wrap" id="js-assessment-list-div">
					{!! $component !!}
				</div>

				</div>
				@if($hasmore)
							<div class="col-md-12">
		            			<div class="text-center">
		            				
		                			<a href="javascript:;" class="btn btn-outline-info" id="js-assessment-list-loadmore" data-page='2'>Load more...</a>
		            			</div>
		          			</div>
          				@endif
			</div>
		</div>
	</div>
</div>

	
<script type="text/javascript">
	function confirmAssessment(testpin){
		//var testpin = $(this).attr("data-testpin")
		swal({
			html:true,
			title: "Confirm to take Assessment",
			text: "Your TEST PIN is "+testpin+". Copy this TEST PIN for entering in the assessment page.<br> Note that you can take this assessment only once, so please ensure that you are thorough with the learning materials when you take the assessment. Your performance in this assessment will be recorded in your Digital Profile.",
			type: "info",
			showCancelButton: true,
			cancelButtonText: "Cancel",
			confirmButtonText: "Yes, Proceed",
			closeOnConfirm: false
		}, function(isConfirm) {
			if (isConfirm) {
				window.open("{{env('ASSESSMENT_URL')}}", '_blank');				
			}
			swal.close();
		});
	};
	$(document).ready(function(){
		var no_records = $(document).find("#js-no-records").val();
		if(no_records){
			$('#js-assessment-list-loadmore').hide();
		}
	$(document).find('#js-assessment-list-loadmore').on('click',function(){
		$('.hme-loading-mask').fadeIn();
		$.ajax({
			url: baseUrl+'gold/candidate/assessment/{{request()->route('id')}}',
        	type: "get",
        	data: {'request_type':'remote','page':$(this).attr('data-page')},
        	success: function(response){
          		if (response.status == 200) {
            		$('#js-assessment-list-div').append(response.component);            
            		if(response.hasmore == false) {
              			$('#js-assessment-list-loadmore').hide();
            		} else {
            			$('#js-assessment-list-loadmore').show();
            			$('#js-assessment-list-loadmore').attr('data-page',parseInt($('#js-assessment-list-loadmore').attr('data-page'))+1);
            		}
        		}
        		$('.hme-loading-mask').fadeOut(); 
	    	},
	    	error:function(error){
	    		$('.hme-loading-mask').fadeOut();
	        	swal({
	            	html: true, 
	            	title: '<span class="sweet-danger-text">Something went wrong</span>', 
	            	type: "error",
	            	confirmButtonText: "OK",
	            	closeOnConfirm: false,
	            	confirmButtonColor: '#f0443a',
	          	});
	    	}
	    });
	});
});

/* Report popup */

$(document).ready(function(){

	 $('#js-assessment-list-div').on('click','.gold-view-report',function(e){
	 	e.preventDefault();
		  var chart_count=0;
		  var check = JSON.parse($(this).attr('data-sections'));
		  
		  jQuery.each(JSON.parse($(this).attr('data-sections')) , function( i, section_id ) {
		    chart_count++;   
	 	 });

	 var assign_id=$(this).attr('data-assign_id');
	  var test_pin=$(this).attr('data-test_pin');
	  var candidate_id=$(this).attr('data-candidate_id');
	  
	 
	   $('.hme-loading-mask').fadeIn();
	        $.ajax({
	         url:"{{secure_url('gold/candidate/get-test-result-report')}}",
	         type:'get',
	         data:{assign_id:$(this).attr('data-assign_id'),test_pin:$(this).attr('data-test_pin'),candidate_id:$(this).attr('data-candidate_id'),type:"overall",chart_count:chart_count},
	         success:function(response){
	           $('.hme-loading-mask').fadeOut();
	           $('#pro-preview-page1').html(response.component);
	           $('#pro-preview-large-Modal').modal('show');
	           //section_id= $("#js-pro-test-section_id").val();
	           jQuery.each(check , function( i, section_id ) {
	             chartDefault(section_id,"chartdiv"+i,assign_id,test_pin,candidate_id);
	          });
	           sectionReport("section-div1",test_pin,assign_id,candidate_id);
	            $("#pre-js-pro-test-assign_id").val(assign_id);
	            $("#pre-js-pro-test-test_pin_id").val(test_pin);
	            $("#pre-js-pro-test-candidate_id").val(candidate_id);
	         },
	         error:function(err){
	             $('.hme-loading-mask').fadeOut();
	            alertMessage("danger","Your action  has been suspended, Sorry for the inconvenience. Please try again later","Something Went Wrong");
	         }
	       })
	  
	});


	$(document).on('change','#js-pro-sections', function() {
	  var section=$(this).val();
	  chartDefault(section,"chartdiv",assign_id,test_pin,candidate_id);
	});

	function chartDefault(section,chartdiv,assign_id,test_pin,candidate_id){
	  if(section){
	   $.ajax({

	        url:"{{secure_url('gold/candidate/get-mcq-report')}}",
	        dataType: "json",
	        type:'get',
	        data:{section:section,assign_id:assign_id,test_pin:test_pin,candidate_id:candidate_id},
	        success:function(res){
	        if(res.status==200){
	              simpleMCQ(res.response,chartdiv);
	              $("#js-pro-sections").val(section);

	             }else{
	              swal({
	              html: true, 
	              title: '<span class="sweet-danger-text">Something Went Wrong</span>', 
	              type: "error",
	              showCancelButton: false,
	              confirmButtonText: "OK",
	              closeOnConfirm: false,
	              confirmButtonColor: '#f0443a',
	           });
	             }
	         
	        },
	        error:function(err){
	          console.log(err)
	        },
	      })
	  }
	}

	function sectionReport(chartdiv,test_pin,assign_id,candidate_id){
	   $.ajax({
	        url:"{{secure_url('gold/candidate/get-section-report')}}",
	        dataType: "json",
	        type:'get',
	        data:{assign_id:assign_id,test_pin:test_pin,candidate_id:candidate_id},
	        success:function(res){
	        if(res.status==200){
	              simpleMCQ(res.response,chartdiv);

	             }else{
	              swal({
	              html: true, 
	              title: '<span class="sweet-danger-text">Something Went Wrong</span>', 
	              type: "error",
	              showCancelButton: false,
	              confirmButtonText: "OK",
	              closeOnConfirm: false,
	              confirmButtonColor: '#f0443a',
	           });
	             }
	         
	        },
	        error:function(err){
	          console.log(err)
	        },
	      })
	}
	 function simpleMCQ(data,chartdiv){
	    
	    AmCharts.addInitHandler( function ( chartdiv ) {
	      // set base values
	      var categoryWidth = 70;
	        
	      // calculate bottom margin based on number of data points
	      var chartHeight = categoryWidth * chartdiv.dataProvider.length;
	      // set the value
	      chartdiv.div.style.height = chartHeight + 'px';
	      
	    }, ['serial'] );
	//alert(chartdiv);
	    var chart = AmCharts.makeChart(""+chartdiv+"", {
	      "theme": "light",
	      "type": "serial",
	      "dataProvider": data,
	      "categoryField": "topic",
	      "depth3D": 5,
	      "angle": 30,
	      "label":"<b>[[cat]]</b>",
	      "hideCredits":true,


	      "categoryAxis": {
	        "labelRotation": 30,
	        "gridPosition": "start",
	         // "ignoreAxisWidth": true,
	          "autoWrap": true,

	      "labelFunction": trimLabel,
	      },

	      "valueAxes": [{
	        "title": "%Score",
	        "minimum":0,
	        "maximum":100
	      }],

	      "graphs": [{
	       "balloonText": "<div style='white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:200px;'><b>Score</b><br><span style='font-size:14px;'>[[tooltip_topic]]: <b>[[cat]]</b></span></div>",
	        "fillAlphas": 1,
	        "labelText": "[[cat]]",
	        "lineAlpha": 0.1,
	        "title": "topic",
	        "type": "column",
	        "colorField": "color",
	        "valueField": "score",

	      }],
	      "listeners": [{
		      "event": "rendered",
		      "method": handleRender
		      }],

	      "rotate": true,

	      "export": AmCharts.exportCFG
	    });

	    function handleRender(){
	    	setTimeout(function(){
				$('#pro-preview-page1 #download_pdf').attr('disabled',false);  
			}, 800);
	    	
	    }

	  if(chartdiv !="chartdiv" && chartdiv != "section-div"){
	      var arr = [];
	      var ids = [""+chartdiv+""];
	      var suffix = chartdiv.match(/\d+/); 
	      // Collect actual chart objects out of the AmCharts.charts array
	      var charts = {}
	      var charts_remaining = ids.length;
	      for (var i = 0; i < ids.length; i++) {
	        for (var x = 0; x < AmCharts.charts.length; x++) {
	          if (AmCharts.charts[x].div.id == ids[i])
	           /* console.log(AmCharts.charts[x])*/
	            charts[ids[i]] = AmCharts.charts[x];
	        }
	      }
	      // Trigger export of each chart
	      for (var x in charts) {
	        if (charts.hasOwnProperty(x)) {
	          var chart = charts[x];
	          chart["export"].capture({}, function() {
	            this.toPNG({}, function(data) {
	              // Save chart data into chart object itself
	              image_data = data;

	              if(chartdiv=="section-div1"){
	                $("body").find('#pro-summary-image').val(image_data);
	                charts_remaining--;
	              }else{
	                $("body").find('#pro-image'+suffix).val(image_data);
	                charts_remaining--;
	              }

	            });
	          });
	        }
	      }
	  }
	 
	}

	  function trimLabel(label, item, axis) {
	  var chartWidth = axis.chart.realWidth;
	  var maxLabelLength = 15; // not counting the dots...
	  
	  // trim when the width of the chart is smalled than 300px
	  if (chartWidth <= 300 && label.length > 5)
	    return label.substr(0, 5) + "...";
	  
	  // trim when the width of the chart is smalled than 500px
	  if (chartWidth <= 500 && label.length > 10)
	    return label.substr(0, 10) + "...";
	  
	  // trim when label is longer than maxLabelLength regardless of chart width
	  return label.length >= 15 ? label.substr(0, 14) + "...": label;
	}

	jQuery(document).ajaxComplete(function() {
	    jQuery("a[title='JavaScript charts']").remove();
	});

})

</script>
@endsection