@extends('layouts.app')
@section('title')
@endsection
@section('content')

    <div class="card card-white mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-normal text-head-color"><b>Validate OTP 
                 </b></h6>
                 @if (Session::has('mobile'))
                <center>OTP has been send your Mobile No : +91{{ Session::get('mobile') }} </center>

               @endif
            <span > <a class="btn btn-danger btn-sm btn-rounded" href="{{ route('logout')}}">Back </a></span>
        </div>

       
            <div class="body-content">
               
                <br>
                @if (Session::has('otperror'))
                 <div class="alert alert-danger">{{ Session::get('otperror') }}</div>
                @endif
                @if (Session::has('otpsend'))
                <div class="alert alert-success">{{ Session::get('otpsend') }}</div>
               @endif

                

                <form id="ValidateOTPForm" action="{{ route('validateotp') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                   
                    <div class="row">
                         
                        <div class=" form-group col-md-4 text-center"></div>
                        <div class=" form-group col-md-4 text-center">
                            <label> OTP  <span class="astric-sign">*</span></label>
                            <input type="text"  placeholder="Enter OTP" maxlength="4" name="otp" value="{{ old('otp') }}" class="form-control" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
                            @error('otp')
                            <div class="text-danger">{{ $message }}
                            </div>
                            @enderror
                            
                        </div>
                        
    
                        <div class="form-group col-md-12 serch-button text-center">
                            

                                <button type="submit" id="ValidateOTPSubmit" class="btn btn-success btn-sm btn-rounded">
                                Validate OTP</button>
                        </div>

                    </div>
                    
                </form>


            </div>
</div>

    @endsection
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script>
       
        $(document).ready(function () {
            
                $("#ValidateOTPSubmit").click(function (e) 
                {     
                    e.preventDefault();
                    var form = $("#ValidateOTPForm");
                    form.validate({
                        rules: {
                            otp: {
                                required: true
                            },
                        
                        },
                        messages: {
                            otp: {
                                required: "Please Enter 4 digit OTP."
                            }
                        
                        },
                        errorElement: 'span',
                        errorPlacement: function (error, element) {
                            error.addClass('invalid-feedback');
                            element.closest('.form-group').append(error);
                        },
                        highlight: function (element, errorClass, validClass) {
                        $(element).addClass('is-invalid');            
                        },
                        unhighlight: function (element, errorClass, validClass) {
                        $(element).removeClass('is-invalid');
                        }
    
                    });
                    if (form.valid() === true) {
                        $("#ValidateOTPForm").submit();
                    }  
                });


               
         
        });
    
    </script>