@extends('layouts.auth')
@section('title', 'Login')
@section('content')
{{-- <center><img style="width: 200px" alt="" class="img-fluid mb-4" src="{{asset('assets/vidiyal/img/brand/favicon-white.png')}}" class="sign-favicon ht-40 logo-dark" alt="logo"></center>
<h4 class="mb-3 f-w-400">Enter Your OTP</h4>


 <form method="post" action="{{ _route('client.client-otp') }}">
 <form id="myForm">
   
   @include('common.alert')
   <div class="input-group mb-2">
      <input id="otp" type="text" class="form-control"  name="otp"  required  placeholder="Enter OTP">
     
      @error('email')
      <span class="invalid-feedback" role="alert">
      <strong>{{ $message }}</strong>
      </span>
      @enderror
   </div>
   <p id="message"></p>
   <button type="submit" class="btn btn-primary">
   {{ __('Verify') }}
   </button>

</form> --}}


<div class="authentication-wrapper authentication-2 ui-bg-cover ui-bg-overlay-container px-4" >
   <div class="ui-bg-overlay bg-dark opacity-25"></div>
   <div class="authentication-inner py-5">
      <div class="card">
        <div class="card-body">
        <h4 class="tx-primary mb-3 f-w-400">Enter Your OTP</h4>
        <form class=" text-center" id="myForm"  method="post" action="{{ _route('client.client-otp') }}">
            @include('common.alert')
            <div class="input-group mb-2">
                <input id="otp" type="text" class="form-control"  name="otp"  required  placeholder="Enter OTP">
                
                @error('email')
                <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
            <p id="message"></p>
            <button type="submit" class="btn btn-primary">
            {{ __('Verify') }}
            </button>

            </form>
        </div>
      </div>
   </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $('#myForm').on('submit',function(e){
        e.preventDefault();
        var otp_code = $('#otp').val();
        var _token = "{{ csrf_token() }}";

    $.ajax({
        url: "{{ _route('client.client-otp') }}",
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:"POST",
        data:{
            otp:otp_code,
            user_id: {{user()->id}},
            _token: '{{csrf_token()}}'
        },
        success:function(response){
            if(response.status == 'success'){
                window.location = "{{_route('client.dashboard')}}";
                // window.location.reload(true); 
            } else {
                document.getElementById('message').innerHTML = "<font color='red'> OTP is wrong </font>";
            }
           
        },
        error: function(response) {
            document.getElementById('message').innerHTML = "<font color='red'> OTP is wrong </font>";
        },
      });

    });

</script> 
@endsection