@extends('layouts.app')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
@section('content')
@if (session('status'))
<div class="alert alert-success">
    {{ session('status') }}
</div>
@endif
@if (session('warning'))
<div class="alert alert-warning">
    {{ session('warning') }}
</div>
@endif
@if(Session::has('sucessMessage'))

    <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('sucessMessage') }}</p>

@endif
    <div class="login_area">
        <div class="container">
            
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default login_section">
                        <h1 class="panel-heading">ShipJunction</h1>
                        <h2 class="sub-heading">Verification Code</h2>
                        <p class="login-text">Please type the verification code sent to +91-{{ $existingUser->mobile_no }}</p>

                        <div class="panel-body">
                            <form class="form-horizontal" method="POST" action="{{ url('/user/verification_pin') }}">
                                {{ csrf_field() }}
                                {!! Form::hidden('id', $existingUser->id) !!}

                                <div class="text-center verify_opt_field form-group">
                                    <input type="text" maxLength="6" class="form-control" name="otp" id="otp" size="1" min="0" max="9"/>
                                </div>
                                
                                
                                {!! Form::hidden('sms_pin', $sndopt) !!}

                                <!-- <div class="form-group">
                                	<a href="" class="text-center d-block">Re-send OTP?</a>
                                </div> -->

                                <div class="form-group login_submit_btn">
                                    <button type="submit" id="submit" class="btn btn-primary login-button m-auto d-block">Verify OTP</button>
                                </div>
                            </form>

                            <div class="form-group">
                                <form class="form-horizontal" method="POST" action="{{ url('/user/pin_resend') }}">
                                    {{ csrf_field() }}
                                    {!! Form::hidden('id', $existingUser->id) !!}
                            	    <span class="text-center d-block">didn't receive it?  <button class="resend_btn" type="submit">Resend</button></span>
                            	</form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script type="text/javascript">
$(document).ready(function () {
    $flag = 1;
    /***** Personal Data Validation ****/
    $("#otp").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_name").text("* You have to enter your first name!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_name").text("");

        }
    });
   
    /***+* Submit Validation ****/
    $("#submit").click(function () {
        if ($("#otp").val() == '') {
            $("#otp").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_name").text("* You have to enter your first name!");
        }

    });

});
</script>