@extends('layouts.site')

@section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- breadcrumb start -->

<div class="breadcrumb-area bg-overlay-2 direction" style="background-image:url({{asset('assets/front/img/contact.png')}}">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="section-title">
                {{-- <h2 class="page-title">     {{__('Verification Code')}}</h2> --}}
                <ul class="page-list">
                    <li><a href="{{route('home_index')}}">{{__('Home')}}</a></li>
                    <li> {{__('Verification Code')}}  </li>
                </ul>
            </div>
        </div>
    </div>
</div>



<div class="signin-page-area pd-top-120 pd-bottom-120" id="particles-js" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1200">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-7">
                <form method="get" id="form_otp" class="signin-inner" action="  {{ route('home_index') }}">
                @csrf
<div id="otp-error-message" class="col-md-12">
 
                        </div>
                    <div class="row">
                        <div class="col-12 login">
                            <h3 class="weight">   {{ $verification_code }}  {{__('Enter Verification Code')}}</h3>
                        </div>
                        
                        <div class="col-12">
                            <label class="single-input-inner style-bg-border">

                                <input type="text"  name="otp" value=""  id="otp" required>

                                @error('username')
                                <span class="invalid-feedback text-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </label>
                        </div>
                        
                        <div class="col-12 mb-4">
                            <button value="check" class="btn btn-base width call-btn2" id="call-btn2"  >
                                  {{__('Confirm')}}</button>
                            {{-- <button class="btn btn-base w-100" type="submit">   </button> --}}
                        </div>
                        

                        <div class="col-12">
                            <p>     {{__('Resend Otp')}}    <a href="{{route('resend-otp')}}" class="clrregister"><strong> {{__('Resend Otp')}}    </strong></a></p>
                        </div>
                        
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


@stop

@section('scripts')

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>

<script type="text/javascript">
    $(document).ready(function() {
        
        $(".call-btn2").click(function(e) {
            e.preventDefault();
            // alert('You have successfully call the function!');

              var otp =$('#otp').val();;
            
        
        
            $.ajax({
                type: 'POST',
                data: {
                    'otp': otp ,
                    _token: "{{ csrf_token() }}",

                },
                url: "{{url('verify-otp')}}",
                
                success: function(data) {
                     alert("success"+data.message);
                    if (data.message != "") {

                        $('#otp-error-message').html("<span style='color:brown;font-weight:bold'>" + data.message + "</span>");
                        if (data.status == true) {

                            // window.location = "{{-- route('site.cart.add',$advertisment-> id)--}}"
                            $('#form_otp').trigger("submit");
                        }else{
                            $('#otp-error-message').html("<span style='color:brown;font-weight:bold'>" + data.message + "</span>");

                        }
                    }
                },
                error: function() {
                    alert('Error');
                }
            });

        });
    });
</script>
@stop