@extends('layouts.main')
@section('title', 'HireMee GOLD e-Learning- Discover your Diamond')

@section('content')
<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>Learning Content</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="#">Learning Content</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="page-body" id="elearning">
					<div id="accordion">
					<!-- <ul class="nav nav-tabs" id="myTab" role="tablist">
					  <li class="nav-item">
					    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Core Technical</a>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Personality Development</a>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Communication</a>
					  </li>
					</ul> -->
					<div class="tab-content" >
						<div class="tab-pane fade show active" id="" role="tabpanel" aria-labelledby="home-tab">
							<div class="d-flex justify-content-start flex-wrap" id="reading-material-details">
								{!! $component !!}
							</div>
						</div>
						@if($hasmore)
							<div class="col-md-12">
		            			<div class="text-center">
		            				
		                			<a href="javascript:;" class="btn btn-outline-info" id="js-e-learning-material-loadmore" data-page='2'>Load more...</a>
		            			</div>
		          			</div>
          				@endif
						<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
							<div class="d-flex justify-content-center align-items-center">
								<div class="no-learning-material">
									<img src="{{{ URL::asset('assets/images/gold/icons/no-learning-material.svg')}}}" alt="No Learning Material">
									<h4>we are not able to fetch any content<br>for Personality Development</h4>
								</div>
							</div>
						</div>

					</div>
					

				</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
	$(document).find("body").on("click",".js-gold-learning-read-update-button",function() {
		
		var type = $(this).data("type")
		var track_id = $(this).data("track_id")
		var track_mapping_id = $(this).data("track_mapping_id")
		var candidate_id = $(this).data("candidate_id")
		var hiremee_id = $(this).data("hiremee_id")
		var link = $(this).data("link")
		var self = $(this);
		//console.log(link);
		var s3_id='';
		if(link){
			$.ajax({
				url: "{{ url('/gold/candidate/e-learning/update-read-download')}}",
				type: "post",
				data:{'type':type,"track_id":track_id,"track_mapping_id":track_mapping_id,"candidate_id":candidate_id,"hiremee_id":hiremee_id},
				success:function(data){	
					self.removeClass("action-bottom").addClass("action-bottom-read");				
				if(type == "read"){
					window.open(link, '_blank');
				}
				if(type == "download"){			
					window.open(data.s3_id, '_blank');			 
				}			
					
				}
			});
		}
		
	});

	$(document).find('#js-e-learning-material-loadmore').on('click',function(){
		$('.hme-loading-mask').fadeIn();
		$.ajax({
		    url: baseUrl+'gold/candidate/e-learning/{{request()->route('id')}}',
        	type: "get",
        	data: {'request_type':'remote','page':$(this).attr('data-page')},
        	success: function(response){
        		$('.js-gold-learning-read-update-button').tooltip();
          		if (response.status == 200) {
            		$('#reading-material-details').append(response.component);            
            		if(response.hasmore == false) {
              			$('#js-e-learning-material-loadmore').hide();
            		} else {
            			$('#js-e-learning-material-loadmore').show();
            			$('#js-e-learning-material-loadmore').attr('data-page',parseInt($('#js-e-learning-material-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',
	          	});
	    	}
	    });
	});
});
</script>
@endsection