@extends('layouts.app')

  
@section('content')
<section class="text-center container col-4 h-100 mt-5">
    <div class="row align-items-center h-100">
        <div class="col-12 mx-auto">
        <i class="fa fa-mobile text-primary h1"></i>    
        <h2 class="fw-light text-title">Enter your Phone Number</h2>
            <div class="row py-lg-4">
            <p>We will send you a One Time Password  on this mobile number</p>
            <form action="javascript:void(0)" id="enterMobileVerificationForm" method="post">
                <input type="text" autofocus="" value="" name="location" id="location" class="form-rounded form-control pac-target-input" style="text-align: center" placeholder="Enter your Phone Number" autocomplete="off">
                <div class="d-grid mt-4">
                        <a class="btn  btn-primary btn-rounded mb-3" onkeydown="return event.key != 'Enter';" id="btnEnterLocation" href="#">Get OTP</a>
                        <a href="location" id="skip_mobile_number" class="text-muted h6">Skip</a>
                </div>
            </form>
        </div>
    </div>   
</section>

 @include('includes.footer1') 
@endsection
<script src="../public/assets/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script>
    $(document).ready(function(){
        $(document).on("click", "#skip_mobile_number", function (e) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });   
            e.preventDefault();
            $.ajax({
                url: "update-mobile-verification-status",
                type: "POST",
                dataType: 'json',
                beforeSend: function(){
                  $('#skip_mobile_number').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading..')
                },
                success: function(result) {
                    window.location.href = 'location';
                },
                error:function (response){},
                complete:function(data){
                   
                }
            });
        });
    })
</script>
<style>
#focus-area .card-body{
    min-height: 100px;
}

</style>