@extends('backend.includes.panel')

@section('page_css')
<link href="{{ BE_URL.'plugins/bootstrap-switch/bootstrap-switch.min.css' }}" rel="stylesheet">
<link href="{{ BE_URL.'plugins/sweetalert/sweetalert.css' }}" rel="stylesheet" type="text/css">
@stop

@section('inner_page_link')
    <li class="breadcrumb-item"><a href="{{ route('contractor_invitation.invite') }}">Contractor Invitation</a></li>
    <li class="breadcrumb-item active">Sending Invitations</li>
@stop

@section('main_content')
   	<!-- ============================================================== -->
	<!-- Start Page Content -->
	<!-- ============================================================== -->
	<div class="row">
	    <div class="col-6" style="margin: 0 auto;">
	    	<div class="card">
	            <div class="card-body">
	                <h4 class="card-title">Contractor Invitations
	                	<input type="button" name="start_sending_mails" class="btn btn-sm btn-success" style="float: right;" id="start_sending_mails" data-status="0" class="" value="Send">
	                </h4>
			       	@if(isset($invitation_emails))	       		
		                <div class="table-responsive">
		                    <table id="invitation-emails-table" class="table table-bordered table-striped">
		                        <thead>
		                            <tr>
		                                <th>#</th>
		                                <th>Email</th>
		                                <th>Status</th>
		                            </tr>
		                        </thead>
		                        <tbody>
		                        	@if(!empty($invitation_emails))
			                        	@foreach($invitation_emails as $key => $email)		                        	
			                            <tr>
			                                <td>{{ ($key+1) }}</td>
			                                <td class="email">{{ $email }}</td>
			                                <td class="status" style="font-weight: bold;letter-spacing: 1px;"><code class="text-warning">Pending</code></td>
			                            </tr>
		                        		@endforeach
		                        	@else
		                        		<tr class="text-center">
		                        			<td colspan="3"><code>No emails found to send invitation</code></td>
		                        		</tr>
		                        	@endif
		                        </tbody>
		                    </table>
		                </div>	                
			       	@else
			       		<code>No emails found to send invitation</code>
			       	@endif
	       		</div>
            </div>
	    </div>
	</div>
	<!-- ============================================================== -->
	<!-- End PAge Content -->
	<!-- ============================================================== -->
@stop

@section('page_script')
<script src="{{ BE_URL.'plugins/sweetalert/sweetalert.min.js' }}"></script>
<script src="{{ BE_URL.'js/company_common.js' }}"></script>
<script type="text/javascript">
	$(document).ready(function(){		
		var invitation_number = 1;
		if($('#invitation-emails-table tbody tr').length){
			function sendInvitation(invitation_number){

				var TR = $('#invitation-emails-table tbody tr:eq('+(invitation_number-1)+')');
				if(TR.length == 0){
					invitation_number = -1;
					return;
				}
				TR.find('.status code').addClass('text-danger').removeClass('text-success');
				TR.find('.status code').text('Sending...');
				setTimeout(function(){
					var status_class = 'text-danger';
					$.ajax({
						url:'{{ route("company_invitation.send") }}',
						type:'POST',
						data:{email:TR.find('.email').html(),company_id:'{{ $company_id }}'},
						dataType:'JSON',
						success:function(response){
							invitation_number+=1;
							if(response.status){
								if(response.code == 1){
									status_class = 'text-success';
								}
							}else{
								//flash(response.message, 'error');
							}
							TR.find('.status').html('<code class="'+status_class+'">'+response.message+'</code>');							
							sendInvitation(invitation_number);
						},
						error:function(){
							invitation_number+=1;
							sendInvitation();
							TR.find('.status').html('<code class="'+status_class+'">Something went wrong!</code>');
						},
						complete: function (data) {
					      	if($('#invitation-emails-table tbody tr').length == invitation_number){
					      		$('#start_sending_mails').val('Completed')
					      	}
				     	}
					});
				},1000);				
			}

			$(document).on('click','#start_sending_mails',function(){
				var self = this;
				swal({
			        title: "Are you sure?",
			        text: "After starting you will not be able to stop it!",
			        type: "warning",
			        showCancelButton: true,
			        confirmButtonColor: "#DD6B55",
			        confirmButtonText: "Yes, Start Sending!",
			        closeOnConfirm: true
			    }, function () {
					$(self).prop('disabled','disabledte');
					$(self).css('cursor','not-allowed');
					$(self).val('In Progress');
					sendInvitation(invitation_number);	
				});
			});
			
		}
	});
</script>
@stop