@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>Write Assignment</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 class="col-md-12">
							<div id="reading-material-details">
								<form method="post" id="submitForm" action="{{url('gold/candidate/track/assignments/assignment-submit')}}">
									<input type="hidden" name="assignment_id" id="assignment_id" value="{{$mapping->assignment->id}}">
									<input type="hidden" name="track_id" id="track_id" value="{{$mapping->track_id}}">
									<input type="hidden" name="module_id" value="{{$mapping->module_id}}">
									<input type="hidden" name="track_mapping_id" id="track_mapping_id" value="{{$candidate_mapping->id}}">
									<input type="hidden" name="answerid" id="answerid" value="{{$answer->id ?? ''}}">
									@csrf
									<div class="col-md-12">
										<p><strong>{{$mapping->assignment->assignment_title}}</strong></p>
										
									 <div class="form-group">
									    <label for="pwd">Write Assignment:</label>
									    <textarea class="js-pro-ass-instructions" name="assignment_answer" id="js-pro-ass-instructions">{{$answer->assignment_answer ?? ''}}</textarea>
									    <span id="js-pro-ass-instructions-error"></span>
									  </div>
									  <div class="form-group well">
									    <label for="pwd">Add File:</label>
									    @for($i=0;$i<=4;$i++)
									    <div class="row">
										    <div class="col-md-6 form-group">
										    @if(\Carbon\Carbon::parse($mapping->assignment->end_date)->format('Y-m-d H:i:s') > \Carbon\Carbon::now())
										    		@if(isset($doc[$i]))
										    			<button class="btn btn-sm btn-warning addFile" data-id="{{$i}}" rel={{$doc[$i]->id ?? ''}}>Change</button>
										    		@else
										    			<button class="btn btn-sm btn-info addFile" data-id="{{$i}}" rel={{$doc[$i]->id ?? ''}}>Add File</button>
										    		@endif
										    @endif	
										        
										        &nbsp;&nbsp;@if(isset($doc[$i])) 
										    	<span class="span_{{$i}}"><a target="_blank" href="{{HireMeeHelper::getAWSImageUrl($doc[$i]->s3_file,config('filesystems.disks.hiremeegolddev.bucket'),'hiremeegolddev')}}">{{$doc[$i]->s3_file}}</a></span>
										    	@else
										    	<span class="span_{{$i}}"> No file Uploaded</span>
										    	@endif
										    </div>	
										</div>
									    @endfor
									    
									  </div>
									  @if(\Carbon\Carbon::parse($mapping->assignment->end_date)->format('Y-m-d H:i:s') > \Carbon\Carbon::now())
									  	<input type="submit" id="submit" class="btn btn-md btn-info pull-right" value="Submit">
									  @endif
									</div>
								</form>
							</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/upload')}}" enctype="multipart/form-data">
        <!-- Modal Header -->
        <div class="modal-header">
          <h5 class="">Upload Files For Assignments</h5>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          	 @csrf
          	<div class="form-group">
			    <label for="email">Upload Files (Doc,PDF)</label>
			    <input type="hidden" id="upload_id" name="upload_id">
			    <input type="hidden" id="spanid" name="spanid">
			    <input name="docFile[]" id="docFile" type="file" multiple="multiple" class="form-control">
			    <span class="text-danger" id="fileErr"></span>
			    <br>
			    <button class="btn btn-sm btn-warning pull-right" id="uploadBtn">Ok</button>
			  </div>
			  <!-- <button type="button" id="submit-comments" class="btn btn-primary pull-right">Submit</button> -->
        </div>
        </form>
      </div>
    </div>
  </div>
 
  <script>
$(document).ready(function(){
  		$('.addFile').click(function(e){
		e.preventDefault();
			$('#spanid').val('');
			$('#upload_id').val('');
			$('#spanid').val($(this).data('id'));
			$('#upload_id').val($(this).attr('rel'));
			$('#myModal').modal('show');
		})
		$( "#submit" ).submit(function( event ) {
			event.preventDefault();
			$(this).attr('disabled',true);
  			return true;	
		});
  
	$('#myModal').on('click','#uploadBtn',function(e){
		e.preventDefault();
		if($('#docFile').val() != ''){
			var form_data 	= new FormData();
		    var _this 	  	= $(this);
		   	var spanid		= $('#spanid').val();     
		   	var file_data 	= $('#docFile').prop('files')[0]; 
		   	form_data.append('docFile', file_data);   
		   	/*if($('#answerid').val() !== ''){
		   		var answerId = $('#answerid').val();
		   	}else{
		   		var answerId = 0
		   	}*/
		   	form_data.append('track_id', $('#track_id').val());
		   	form_data.append('assignment_id', $('#assignment_id').val());
		   	form_data.append('track_mapping_id', $('#track_mapping_id').val());
		   	form_data.append('upload_id', $('#upload_id').val());  
		    $.ajax({
		        url: $('#uploadForm').attr('action'), 
		        dataType: 'json', 
		        cache: false,
		        contentType: false,
		        processData: false,
		        data: form_data,                         
		        type: 'post',
		        beforeSend:function(){
		        	$('.hme-loading-mask').fadeIn();
		        	_this.attr('disabled',true);
		        },
		        success: function(res){
		        	$('#docFile').val('');
		        	$('#myModal').modal('hide');
		            $('.hme-loading-mask').fadeOut();
		            _this.attr('disabled',false);
		            	$('.span_'+spanid).text(file_data.name);
		            	$('.span_'+spanid).closest('.form-group').find('.addFile').attr('rel',res.upload_id)
		     	  },
				  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');
				  }
		     });
		 }else{
		 	$('#fileErr').text('Please Select File');
		 }
	})

	$('#myModal').on('change','#docFile',function(e){
		e.preventDefault();
		  var validExtensions = ['pdf','doc','docx'];  
		  var fileName = e.originalEvent.target.files[0].name;
		  console.log(fileName);
		  var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
		  if ($.inArray(fileNameExt, validExtensions) == -1) {
		    swal({
	              html: true, 
	              title: '', 
	              text: "Only these file types are accepted: "+validExtensions.join(', '),
	              type: "error",
	              showCancelButton: false,
	              confirmButtonText: "OK",
	              closeOnConfirm: false,
	               confirmButtonColor: '#f0443a',
	            });
	       $('#docFile').val('');
	        return false;
		  }
		  var files = e.originalEvent.target.files;
		  s = files[0].size;
		const file = Math.round((s / 1024));
		  console.log(s);
		  if (parseInt(file) > 5120) {
             swal({
	              html: true, 
	              title: '', 
	              text: "Maximum file size 5MB",
	              type: "error",
	              showCancelButton: false,
	              confirmButtonText: "OK",
	              closeOnConfirm: false,
	               confirmButtonColor: '#f0443a',
	            });
	       	$('#docFile').val('');
	        return false;
          }
	})

	$('.note-placeholder').html('Write assignment content here');
})
  </script>
@endsection