<div id="wrapper">
	<div id="content" class="container">
		<div class="row">
            <div class="col-xs-12 col-sm-12 col-md-7 col-lg-4 hidden-xs hidden-sm">				
			</div>
            
			<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
                <div class="card">
                    <div class="card-body">
					    <form action="" id="auth-form" class="smart-form client-form" method="POST">
    						<div class="text-center">
                                <img src="<?php echo site_url(); ?>assets/img/logo.png" style="width: 55%; margin: 0 auto;" alt="logo" />
                            </div>
                            <hr/>
                            <div class="form-group">
                                <h2>Type sms code</h2>
                            </div>
							<div class="form-group">
								<input type="text" name="code" class="form-control" minlength="6" maxlength="6" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
							</div>
							<?php if($error == true){ ?>
    							<div class="form-group">
    								<div class="alert alert-danger fade in">
                                        <i class="fas fa-info"></i>
                                    	<strong>שגיאה!</strong>  
                                    	<?php if( $error_code == 150 ){ ?>
                                    	    Code Error!
                                    	<?php }else if( $error_code == 401 ){ ?>
                                    	    Code Error!
                                    	<?php }; ?>
                        		    </div>
    							</div>
							<?php }; ?>
							<div class="form-group mt-3">
							    <button type="button" class="btn btn-warning w-100" id="send_new_code" disabled="disabled" rel-time="60" style="display:none;">
							        <span class="timer">60</span>
							        Send Code Again
						        </button>
							</div>
							<div class="form-group mt-3">
    							<button type="submit" class="btn btn-primary btn-block w-100">
    								Login
    							</button>
							</div>
					    </form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
    .alert-danger {
        text-align: right;
        direction: rtl;
    }
    div#main {
        background: transparent !important;
    }
    div#wrapper {
        padding-top: 80px !important;
    }
    body#login {
        background: #0b768c;
    }
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield;
    }
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $('#send_new_code').on('click', function(){
            $('.code_result').remove();
            var elem = $(this);
            elem.attr("disabled", true);
            $.post( root + 'login/sendNewSms', function(response){
                if(response.result){
                    var text = 'הקוד נשלח בהצלחה!';
                    $alert = '<div class="alert alert-success fade in code_result"><i class="fa-fw fa fa-info"></i> '+text+' </div>';
                    $('input[name="code"]').parent().parent().parent().append($alert);
                    setTimeout(function(){ $('.code_result').fadeOut() }, 3000);
                }else{
                    var text = 'לא נשלח קוד נא לרענן את הדף!';
                    $alert = '<div class="alert alert-danger fade in code_result"><i class="fa-fw fa fa-times"></i> '+text+' </div>';
                    $('input[name="code"]').parent().parent().parent().append($alert);
                    setTimeout(function(){ $('.code_result').fadeOut() }, 3000);
                }
            }, 'json');
        });
    });
</script>