@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="hme-loading-mask">
		    <div class="hme-loading-container">
		        <div class="hme-dual-ring"></div>
		        <div>Please wait, Loading...</div>
		    </div>
		</div> 
		<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 Assignments</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="#">Assignments</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="page-body" id="elearning">
					<div id="accordion">
					<div class="tab-content">
						<div class="tab-pane fade show active" id="assessmentDiv" role="tabpanel" aria-labelledby="home-tab">
							@if(Session::has('uploadSuccess'))
								<div class="col-md-12">
							      <div class="alert alert-success alert-dismissible">
									  <button type="button" class="close" data-dismiss="alert">&times;</button>
									  <strong>Success!</strong> Assignment Submitted Successfully
									</div>
							    </div>
							@endif
						 
							<div class="d-flex justify-content-start flex-wrap" id="reading-material-details">
								{!! $component !!}
							</div>
						</div>
						<br>
						@if($hasmore)
							<div class="col-md-12">
							<div style="width:200px; margin:0 auto;">
		            			<div class="text-center">
		                			<a href="javascript:;" class="btn btn-outline-info" data-trackid="{{ $track_id }}" data-moduleid="{{ $module_id }}" id="js-e-learning-material-loadmore" data-page='2'>Load more...</a>
		            			</div>
								</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>
<!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <form name="uploadForm" id="uploadForm" action="{{url('gold/candidate/track/assignments/assignment-submit')}}" enctype="multipart/form-data">
        <!-- Modal Header -->
        <div class="modal-header">
          <h5 class="">Upload Files For Assignments</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          	 @csrf
          	<div class="form-group">
			    <label for="email">Upload Files (Doc,PDF)</label>
			    <input type="hidden" name="hiremee_id">
			    <input type="hidden" name="track_id">
			    <input type="hidden" name="track_mapping_id">
			    <input type="hidden" name="candidate_id">
			    <input type="hidden" name="candidate_id">
			    <input type="hidden" name="candidate_id">
			    <input name="docFile[]" id="docFile" type="file" multiple="multiple" class="form-control"><br>
			    <button class="btn btn-sm btn-warning pull-right" id="uploadBtn">Upload</button>
			  </div>
			  <!-- <button type="button" id="submit-comments" class="btn btn-primary pull-right">Submit</button> -->
        </div>
        </form>
      </div>
    </div>
  </div>

   <!-- The Modal -->
  <div class="modal fade" id="scoreMdal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <form name="uploadForm" id="uploadForm" action="{{url('gold/candidate/track/assignments/upload')}}" enctype="multipart/form-data">
        <!-- Modal Header -->
        <div class="modal-header">
          <h5 class="">Score and comments</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
            
            <div class="form-group">
            	<label>Comments :</label>
          	<div class="well" id="comments"></div>
          <div><label>Score: <span class="badge badge-primary" id="score"></span></label></div>
         
       </div>
        <!-- <button type="button" id="submit-comments" class="btn btn-primary pull-right">Submit</button> -->
        </div>
        </form>
      </div>
    </div>
  </div>
  <script>
  	$(document).ready(function(){
      $('#assessmentDiv').on('click','.scoreBtn',function(e){
        e.preventDefault(); 
          /*$('#scoreMdal').modal('show');
          var score = $(this).data('score');
          var comments = $(this).data('comments');

          $('#comments').text(comments);
          $('#score').text(score);*/
          var url = $(this).data('url');
           $('#comments').text('')
		   $('#score').text('')
          var submitId = $(this).attr('rel');
           $.ajax({
		        url: url, 
		        dataType: 'json', 
		       /* cache: false,
		        contentType: false,
		        processData: false,*/
		        data: {'submitId':submitId},                         
		        type: 'post',
		        beforeSend:function(){
		        	$('.hme-loading-mask').fadeIn();
		        },
		        success: function(res){
		        	if(res.evaluate == true){
		        		$('#comments').text(res.score.score_comment)
		        		$('#score').text(res.score.score)
		        	}else{
		        		$('#comments').text('')
		        		$('#score').text('Assignment Under Evaluation')
		        	}
		            $('.hme-loading-mask').fadeOut();
		            $('#scoreMdal').modal('show');
		     	  },
				  error:function(){
				  	$('#docFile').val('');
		        	_this.attr('disabled',false);
		        	swal({
		              html: true, 
		              title: '', 
		              text: "Something Went Wrong1",
		              type: "error",
		              showCancelButton: false,
		              confirmButtonText: "OK",
		              closeOnConfirm: false,
		               confirmButtonColor: '#f0443a',
		            });
		            $('#myModal').modal('hide');
				  }
		    });

      })

   	$(document).find('#js-e-learning-material-loadmore').on('click',function(){
		$('.hme-loading-mask').fadeIn();
		var track_id  = $(this).data('trackid');
		var module_id = $(this).data('moduleid');
		$.ajax({
		    url: "{{ url('gold/candidate/track/assignments') }}"+'/'+track_id+'/'+module_id,
        	type: "get",
        	data: {'request_type':'remote','page':$(this).attr('data-page')},
        	success: function(response){
        		$('.js-gold-clg-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