<?php include 'header.php'; ?>

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid1">
        <div class="row mb-2 align-center">
            <div class="col-sm-6">
               <h1 class="my-3 h1">Introduction</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item active">Introduction</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<hr class="mb-3">
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid1"> 
	   <div class="card-body">
		   <div class="card card-cascade narrower z-depth-0">
				<!-- Grid column -->
				<div class="col-lg-12 col-md-12 col-sm-12 table-outer">					
					
						<div class="intro-info-content text-center mb-3 mt-3">
						
							<div class="mb-4 mt-5">							
								<iframe width="560" height="315" src="https://www.youtube.com/embed/Bt1iH2_PJVc?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
							</div>	
							
							<div class="pb-3" id="confirm_watched_video_no_div" style="display: none;">
								<div class="form-check">
									<input type="checkbox" class="form-check-input" id="confirm_watched_video" name="confirm_watched_video" value="1"> 
									<label class="form-check-label" for="confirm_watched_video"> Yes, I have seen introduction video. Please confirm to proceed further. </label> 
								</div>
							</div>
							
							
							<!--<div class="pb-3" id="confirm_watched_video_yes_div" style="display: none;">	
								<a id="go_to_work_exp_assess_btn" href="self-assessment-test.php" class="btn btn-indigo bkcolor-theme btn-lg wow fadeInDown" data-wow-delay="0.3s">Go to NEXT!</a>
							</div>-->
							
							<div class="pb-3" id="confirm_watched_video_yes_div" style="display: none;">	
								<a id="go_to_work_exp_assess_btn" href="test-voting.php" class="btn btn-indigo bkcolor-theme btn-lg wow fadeInDown" data-wow-delay="0.3s">Go to NEXT!</a>
							</div>
							
							<div class="pb-3">	
								<a id="start_now_btn" href="test-voting.php" class="btn btn-indigo bkcolor-theme btn-lg wow fadeInDown" data-wow-delay="0.3s" style="display: none;">Go to NEXT!</a>
								<a id="go_to_test_voting_btn" href="test-voting.php" class="btn btn-indigo bkcolor-theme btn-lg wow fadeInDown" data-wow-delay="0.3s" style="display: none;">Go to NEXT!</a>
							</div>
						
						</div>
					
				</div>
				<!-- Grid column -->
			</div>              
		</div>
        <!-- /.row (main row) -->   
	</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<?php include 'footer.php'; ?>

<script>

get_intro_test_voting();

function get_intro_test_voting() {
	$.ajax({
		url: 'controllers/get_test_voting_count.php',
		data: {			
		},
		type: 'post',
		dataType: 'json',
		success: function( output ){
			assigned_voting = output.assigned_voting_sentences_count_for_user;
			confirm_watched_intro_video = output.confirm_watched_intro_video;
			is_user_uploaded_self_assessment_test_sentneces = output.is_user_uploaded_self_assessment_test_sentneces;
			
			//watched introduction video
			if( confirm_watched_intro_video == 1 ) {
				
				//uploaded self assessment test sentences
				if( is_user_uploaded_self_assessment_test_sentneces == 1 ) {									
					
					if( assigned_voting == 0 ) {	
						//not yet started test voting
						$("#start_now_btn").show();
						$("#go_to_test_voting_btn").hide();
					} else {		
						//already started test voting
						$("#start_now_btn").hide();
						$("#go_to_test_voting_btn").show();
					}
					
				} else {					
					$("#confirm_watched_video_yes_div").show();
					$("#confirm_watched_video_no_div").hide();					
				}
				
			} else {
				$("#confirm_watched_video_yes_div").hide();
				$("#confirm_watched_video_no_div").show();
			}			
			
		}		
	});
}

$(document).ready(function() {
	
	$('#confirm_watched_video').change(function() {
		if( $(this).is(":checked") ) {   			
			$.ajax({
				url: 'controllers/update_translators_watched_intro_video_status.php',
				data: {
					watched_status : $(this).val()
				},
				type: 'post',
				dataType: 'JSON',
				success: function( output ) {
					if( output.status == 200 ) {
						//$("#confirm_watched_video_yes_div").show();
						$("#confirm_watched_video_no_div").hide();						
						get_intro_test_voting();
						toastr.success('Status updated successfully!');
					} else {
						$("#confirm_watched_video_yes_div").hide();
						$("#confirm_watched_video_no_div").show();
						get_intro_test_voting();
						toastr.error('Oops! Something went wrong.');
						$('#confirm_watched_video').prop('checked', false); 
					}
				}
			});
		}
	});
	
});	


</script>