@extends('layouts.innermasterWoithoutLogo')

@section('content')
<style>
    p {
        margin: 0 !important;
    }
</style>
{{-- {{$password}} --}}

<div class="empty-space col-xs-b15 col-sm-b30"></div>

{{-- <div class="empty-space col-xs-b15 col-sm-b50 col-md-b100"></div> --}}
<div class="container otp">

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="h3 text-center">Verify your mobile number</div>
            <div class="empty-space col-xs-b10 col-sm-b25"></div>

            <p class="text-center">
                Thanks for giving your details. An OTP has been sent to your Mobile Number <span class="h6">+94 ({{Session::get('user')->phone}})</span>. Please enter the 4 digit OTP
                below for Successful Registration
            </p>
            <div class="empty-space col-xs-b10 col-sm-b25"></div>

            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <form class="form-horizontal" method="post" id="veryfyotp" action="/auth/otpvalidate">
                        {!! csrf_field() !!}

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-3 mb-20">
                                <input type="text" class="form-control input-lg valotp" maxlength="4" name="otp">
                                <div class="empty-space col-xs-b5 col-sm-b15"></div>

                                <a href="/auth/otp"
                                    style=" "
                                    class="pull-right h6">
                                    <strong>
                                        Resend
                                    </strong>
                                </a>
                                <a href="javascript:void(0)" style="color: black; margin-top:-150px; margin-bottom: 8px " class=""
                                    id="chnage">
                                    <strong>Change Phone no</strong>
                                </a>
                            </div>
                            <script>
                                $("#chnage").click(function(){
                                
                                $(".modal").modal();
                                        
                            })
                            </script>
                                
                                
                            <div class="row">
                                <div class="col-md-4 col-md-offset-4">
                                    <a class="button size-2 style-3 btn-block submit-otp" otp={{$password}}>
                                        <span class="button-wrapper">
                                            <span class="icon"> <i class="fa fa-angle-right"></i> </span>
                                            <span class="text">Verify</span>
                                        </span>
                                    </a>
                                </div>
                                {{-- <div class="col-md-4">
                                    <a href="/Seller/validate">
                                        <button class="button size-2 style-2 btn-block" type="button" id="resend">
                                            <span class="button-wrapper">
                                                <span class="icon"> <i class="fa fa-angle-right"></i> </span>
                                                <span class="text">Resend</span>
                                            </span>
                                        </button>
                                    </a>
                            </div> --}}
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <p class="text-center text-red">
                After the verification you will be directed to home page. If failed please click resend button. We will
                send a new OTP to your mobile number.
            </p>
            <div class="empty-space col-xs-b15 "></div>


        </div>
    </div>

    <div class="row mb-20">
        <div class="col-md-4 col-md-offset-4">
            <img src="{{url().'/img/rsz_logo2.png'}}" class="img-responsive center-block" alt="logo" width="180">
        </div>
    </div>

</div>
<div class="modal fade" tabindex="-1" role="dialog">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <form action="{{url('auth/otp/change')}}" method="post">
                                
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                                                aria-hidden="true">&times;</span></button>
                                                        <h4 class="modal-title">Change Phone Number</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <input type="tel" name="phone" placeholder="Enter phone no">
                                                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                        <button type="submit" class="btn btn-primary">Save changes</button>
                                                    </div>
                                                </form>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal-dialog -->
                                    </div><!-- /.modal -->
<script>
    $('.submit-otp').click(function(event) {
       
var otp=$(this).attr('otp');

var enteredotp=$('.valotp').val();


if (otp==enteredotp) {

$('#veryfyotp').submit();
// console,log('a')
}else{
    alert('invalid otp');
      // $('#veryfyotp').submit(function(evt){
      //     evt.preventDefault();// to stop form submitting
      // });
}


    });

// $('.valotp').keypress(function (e) {
//   if (e.which == 13) {
//      $('#veryfyotp').submit(function(evt){
//           evt.preventDefault();// to stop form submitting
//       });
//   }
// });
</script>

{{-- @endsection --}}
@endsection