<div>
    <div class=" row center">
        <div class="title_header"><?php echo __('Verify PIN');?></div>
    </div>
    <div style="padding-top: 20px;"></div>

    <div class="col-md-12">
        <?php echo $this->Form->create(null, ['url' => ['controller' => 'Users', 'action' => 'pinCodepassword/'.$token],
            'id' => 'PinCode', 'name' => 'PinCode', 'role' => 'form']);
        ?>
        <div style="padding: 5px;">
            <?php echo $this->Flash->render(); ?>
        </div>
        <div class="row">
            <div class="form-group has-feedback">
                <div class="col-md-12">
                    <div class=" row center">
                    <?php echo __('4 digit PIN in the email address specified for access');?>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group has-feedback">
                <div class="col-md-12">  
                    <div class="data-pin" style=" text-align: center;">
                        <input type="hidden" name="token" value="<?php echo $token;?>">
                        <?php for($i=1;$i<=4;$i++){?>
                            <input type="password" pattern="[0-9]*" maxlength="1" min="0" name="pin_code_<?php echo $i;?>" id="pin_code_<?php echo $i;?>" onkeyup="verifyPinCode('pin_code')">
                        <?php }?>
                    </div> 
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group has-feedback">
                <div class="col-md-12">
                    <div class=" row center">
                        <?php
                            echo $this->Html->link('Re-send pin code', ['controller' => 'Users', 'action' => 'forgotsendpin/'.$token]);
                        ?>
                    </div>
                </div>
            </div>
        </div>
        <?php echo $this->Form->end(); ?>
    </div>
</div>


<!---------------------------------------------------------------------->
<style>
    input[type="number"], input[type="password"] {
    width: 50px;
    height: 50px;
    margin-right: 5px;
    margin-bottom: 0;
    text-align: center;
       /* font-size: 81px;
    padding: 0px 0px 30px 0px;*/
}
</style>

<script>
function verifyPinCode(obj) {

	if ($('#'+obj+'_1').val() != '' && $('#'+obj+'_2').val() != '' && $('#'+obj+'_3').val() != '' && $('#'+obj+'_4').val() != '') {	
		$("#PinCode").submit();
	}else{
		if ($('#'+obj+'_1').val() != '') $('#'+obj+'_2').focus(); 
		if ($('#'+obj+'_2').val() != '') $('#'+obj+'_3').focus();
		if ($('#'+obj+'_3').val() != '') $('#'+obj+'_4').focus();
		return false;
	}

}
</script>
