@extends('frontend.partials.master')

@push('css')
<style>
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }

  button {
    background-color: blue;
    border: none;
    color: white;
    padding: 5px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }

  .error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
    display: block;
  }
</style>
@endpush

@section('content')
<div class="center">
  <form id="otpForm" action="{{ route('otpVerify', session()->get('id')) }}" method="POST">
    @csrf
    <div class="form-group">
      <label for="verify">OTP Code</label>
      <input type="number" id="verify" name="verify" class="form-control" placeholder="Enter 6-digit OTP" required>
      <span class="error" id="verifyError"></span>
    </div>
    <button type="submit">Verify</button>
  </form>
</div>
@endsection

@push('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
  $('#otpForm').on('submit', function (e) {
    e.preventDefault();

    $('#verifyError').text(''); // Clear any previous error

    $.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      data: $(this).serialize(),
      success: function (response) {
        if (response.success) {
          window.location.href = response.redirect;
        }
      },
      error: function (xhr) {
        if (xhr.status === 422) {
          const errors = xhr.responseJSON.errors;
          if (errors.verify) {
            $('#verifyError').text(errors.verify[0]);
          }
        } else {
          alert('An error occurred. Please try again.');
        }
      }
    });
  });
});
</script>
@endpush