@extends('layouts.main')
@section('title','My Assessments - Question Selections')
@section('content')
<div class="pcoded-content">
	<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>My Assessments</h4>
					</div>
					
					<div id="company" rel="{{Auth::guard('corporate')->user()->company_id}}" 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('company/search-candidate') }}">My Assessments</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="page-body">
						<div class="pageheader">
							<div class="row">
								<div class="col col-md-12 d-flex align-items-center">
									Create Assessments
								</div>
							</div>
						</div>
						<div class="card borderless-card m-b-0">
							<div class="card-block p-0">
								<div class="row m-b-30">
									<div class="col-lg-12 col-xl-12 hme-pro-tab">
										<!-- Nav tabs -->
										<ul class="nav nav-tabs md-tabs" role="tablist">
											<li class="nav-item">
												<a class="nav-link disabled" data-toggle="tab" href="javascript:;" role="tab">Step <span class="number-round">1</span></a>
											</li>
											<li class="nav-item">
												<a class="nav-link disabled" data-toggle="tab" href="javascript:;" role="tab">Step <span class="number-round">2</span></a>
											</li>
											<li class="nav-item">
												<a class="nav-link active" data-toggle="tab" href="#step3" role="tab">Step <span class="number-round">3</span></a>
											</li>
											<li class="nav-item">
												<a class="nav-link disabled" data-toggle="tab" href="javascript:;" role="tab">Step <span class="number-round">4</span></a>
											</li>
											<li class="nav-item">
												<a class="nav-link disabled" data-toggle="tab" href="javascript:;" role="tab">Step <span class="number-round">5</span></a>
											</li>
										</ul>
										<!-- Tab panes -->
										<div class="tab-content p-0">
											<div class="tab-pane active" id="step3" role="tabpanel">
												<div class="pageheader">
													<div class="row">
														<div class="col col-md-6 d-flex align-items-center">
															<strong>Question Selection</strong>
														</div>
														<div class="col col-md-6 d-flex justify-content-end">
															<a href="{{ secure_url('pro/create-assessments/2/'.$assess_id) }}" class="btn pro-default">Previous</a>
															<button class="btn orange" id="js-select-questions">Select Questions</button>
															<button class="btn pro-green c-white" id="js-proceed-step3">Save & Proceed</button>
														</div>
													</div>
												</div>
												{{-- Upload Question Wrapper for tabs and content --}}
												{!! $component !!}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="auto-matrix-edit" tabindex="-1" role="dialog" aria-labelledby="auto-matrix-edit" aria-hidden="true">
	  <div class="modal-dialog modal-dialog-centered" role="document">
	    <div class="modal-content" >
	    	<div id="auto-matrix-edit-content">

	    	</div>
	    </div>
	  </div>
	</div>
	<div class="modal fade m-t-50" id="manual-question-view" tabindex="-1" role="dialog" aria-labelledby="manual-question-view" aria-hidden="true">
	  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
	    <div class="modal-content" >
	    	<div id="manual-question-view-content">

	    	</div>
	    </div>
	  </div>
	</div>	
	
@endsection
@section('footer')
<!-- Script only applicable for this page based on general classes don't put these as seperate script --> 
<script type="text/javascript"> 
	var left_most = 0;
	var right_most = 0;
	var company = $('#company').attr('rel');
if(company == "{{getenv('POOL_EDIT_RESTRICTED_COMPANY')}}"){
	document.addEventListener('contextmenu', (e) => {
	    e.preventDefault();
	});
	document.onkeydown = (e) => {
	    if (e.keyCode === 123) {
	        return false;
	    }
	    if (e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 67)) {
	        return false;
	    }
	    if (e.ctrlKey && e.keyCode === 85) {
	        return false;
	    }
	};

	document.addEventListener('keydown', function (e) {
	    if ((e.ctrlKey || e.metaKey) && ['c', 'a', 'x'].includes(e.key.toLowerCase())) {
	      e.preventDefault();
	    }
	  });

	document.addEventListener('copy', e => e.preventDefault());
}
	$("#myTab").css('overflow-x','hidden');
	$(".scroll-left").on('click',function(){
		var left 	= $(this).attr('data-cursor');
		var right 	= $(".scroll-right").attr('data-cursor');
		var total 	= $("#myTab").find('.nav-item').length;
		right_most 	= total;
		var current	= parseInt(left);
		if (parseInt(left) > 0) {
			var source = $('#myTab > li:eq(' + parseInt(current)+ ') > a');
			var target = $('#myTab > li:eq(' + (parseInt(left) - 1)+ ') > a');
			source.removeClass('active').attr('aria-selected','false');
			$(source.attr('href')).removeClass('show').removeClass('active');
			target.addClass('active').attr('aria-selected','false');
			$(target.attr('href')).addClass('show').addClass('active');
			$(".scroll-left").attr('data-cursor',parseInt(left)-1);
			$(".scroll-right").attr('data-cursor',parseInt(right)-1);
			var position = total - parseInt(left);
			if (position >= 5) {
				$('#myTab > li:eq('+(parseInt(left) - 1)+')').show();
			}
			if (parseInt(left) > 6) {
				left_most--;
			}
		}
	});
	$(".scroll-right").on('click',function(){
		var right 	= $(this).attr('data-cursor');
		var left 	= $(".scroll-left").attr('data-cursor');
		var total 	= $("#myTab").find('.nav-item').length;
		var current	= parseInt(right) - 2;
		if (parseInt(right) <= total) {
			var source = $('#myTab > li:eq(' + parseInt(current)+ ') > a');
			var target = $('#myTab > li:eq(' + (parseInt(right) - 1)+ ') > a');
			source.removeClass('active').attr('aria-selected','false');
			$(source.attr('href')).removeClass('show').removeClass('active');
			target.addClass('active').attr('aria-selected','false');
			$(target.attr('href')).addClass('show').addClass('active');
			$(".scroll-left").attr('data-cursor',parseInt(left)+1);
			$(".scroll-right").attr('data-cursor',parseInt(right)+1);
			if (parseInt(right) == 7) {
				$('#myTab > li:eq('+left_most+')').hide();
			}else if(parseInt(right) > 7){
				left_most = left_most + (parseInt(right) - 1) - left;
				$('#myTab > li:eq('+left_most+')').hide();
			}
		}
	});

	$(".nav-item").on('click',function(){
		var selected = $(this).attr('data-element-identifier');
		$(".scroll-left").attr('data-cursor',parseInt(selected)-1);
		$(".scroll-right").attr('data-cursor',parseInt(selected)+1);
		if (parseInt(selected) > 6) {			
			left_most = (parseInt(selected)-7);
		}
	});



	// slider...

	var view = $("#tslshow");
var move = "100px";
var sliderLimit = -750

$("#rightArrow").click(function(){
    
    var currentPosition = parseInt(view.css("left"));
    if (currentPosition >= sliderLimit) view.stop(false,true).animate({left:"-="+move},{ duration: 400})

});

$("#leftArrow").click(function(){

    var currentPosition = parseInt(view.css("left"));
    if (currentPosition < 0) view.stop(false,true).animate({left:"+="+move},{ duration: 400})

});

$(document).ready(function() {
    $(".select2").select2();	
});    	
</script>>
@endsection