@extends('webUser.layouts.auth')
@section('contents')
<!-- Right Side -->
 <div class="w-full lg:w-1/2 flex  justify-center items-center px-3 sm:px-20 xl:px-36 pb-5 lg:pb-0">
    <div class="w-full rounded-xl h-[80%] relative card-shadow bg-white p-5 px-8 py-10">
        <img src="{{asset('user/images/smallCircle.svg')}}" alt="" class="w-16 h-16 absolute -top-4 -right-4" />
        <img src="{{asset('user/images/enterCode.svg')}}" alt="" class="mb-5" />

        <h2 class="text-3xl font-bold text-gray-800 mb-1">Enter the one time code</h2>
        <p class="text-sm text-gray-500 mb-6">
            Enter the 4 digit code we just sent on your email.
        </p>
        <form id="otp-form">
            <input type="hidden" name="id" value="{{ encrypt($user->id) }}">
            <div class="mb-5">
                <div class="flex  justify-between w-full digitGroup">
                    <input type="text" maxlength="1" id="first" name="digit[]" data-next="second" maxlength="1"
                        class="w-14 h-14 sm:w-16 sm:h-16 text-center text-2xl font-semibold text-gray-800 border border-gray-300 rounded-2xl focus:outline-none focus:ring-2 focus:ring-teal-500" />
                    <input type="text" maxlength="1" id="second" name="digit[]" data-previous="first" data-next="third" maxlength="1"
                        class="w-14 h-14 sm:w-16 sm:h-16 text-center text-2xl font-semibold text-gray-800 border border-gray-300 rounded-2xl focus:outline-none focus:ring-2 focus:ring-teal-500" />
                    <input type="text" maxlength="1" id="third" name="digit[]" data-previous="second" data-next="fourth" maxlength="1"
                        class="w-14 h-14 sm:w-16 sm:h-16 text-center text-2xl font-semibold text-gray-800 border border-gray-300 rounded-2xl focus:outline-none focus:ring-2 focus:ring-teal-500" />
                    <input type="text" maxlength="1" id="fourth" name="digit[]" data-previous="third" maxlength="1"
                        class="w-14 h-14 sm:w-16 sm:h-16 text-center text-2xl font-semibold text-gray-800 border border-gray-300 rounded-2xl focus:outline-none focus:ring-2 focus:ring-teal-500" />
                </div>
                <span class="text-red-500 text-sm mb-4 validations" id="otp-validation"></span>

            </div>

        <!-- Login Button -->
            <button type="submit" id="verify-button"
                class="w-full btn-shadow bg-[#009696] mt-10 hover:bg-teal-600 text-white py-3 rounded-lg font-semibold flex justify-center items-center gap-2">
                Verify
                <img src="{{asset('user/images/Arrow - Right.svg')}}" alt="Show" class="w-5 h-5" />
            </button>
        </form>
        <div class="flex items-center justify-center gap-1 pt-5 font-semibold">
            <p class="text-[#173636] text-sm">Don’t received?</p>
            <button id="resend-btn" onclick="resend(event, '{{encrypt($user->id)}}', '{{$type}}')" class="text-sm underline text-[#009696]">Resend</button>
        </div>

        <div class="flex items-center justify-center gap-1 pt-20 font-semibold">
            <img src="{{asset('user/images/grayArrow.svg')}}" alt="Main Logo" class="mt-1" />
            <p class="text-[#748383] text-sm">Back to</p>
            <a href="{{route('user.login')}}" class="text-sm underline text-[#009696]">Login</a>
        </div>
    </div>


</div>
<script>
    $(document).ready(function () {
      $('.digitGroup').find('input').each(function () {
        $(this).attr('maxlength', 1);
        // Allow only digits
        $(this).on('keypress', function (e) {
            if (e.which < 48 || e.which > 57) {
                e.preventDefault();
            }
        });
        // Handle key navigation and deletion
        $(this).on('keyup', function (e) {
          let currentValue = $(this).val();
          let prevInput = $(this).closest('.digitGroup').find(`input#${$(this).data('previous')}`);
          let nextInput = $(this).closest('.digitGroup').find(`input#${$(this).data('next')}`);

          if (e.keyCode === 8) {  // Backspace
              $(this).val('');
              if (prevInput.length) prevInput.focus();
          }

          if (/^\d$/.test(currentValue)) {
            if (nextInput.length) {
                nextInput.focus();
            } else if ($('.digitGroup').data('autosubmit')) {
                $('.digitGroup').submit();
            }
          }
        });
        // Improved paste event handling
        $(this).on('paste', function (e) {
          e.preventDefault();
          let pasteData = (e.originalEvent || e).clipboardData.getData('text').trim();

          if (/^\d+$/.test(pasteData)) {
            let inputs = $('.digitGroup').find('input');
            // Clear all inputs before filling
            inputs.val('');
            // Fill the inputs sequentially with pasted digits
            for (let i = 0; i < pasteData.length && i < inputs.length; i++) {
              inputs.eq(i).val(pasteData[i]);
            }
            // Focus the last filled input
            inputs.eq(Math.min(pasteData.length, inputs.length) - 1).focus();
          }
        });
      });
    });
  </script>
  <script>
      $(document).ready(function () {
          $('#otp-form').on('submit', function (e) {
            e.preventDefault(); 
            $('#otpError').text('');
            const formData = $(this).serialize();
            const webUrl = "{{ route('user.verify-otp-post') }}";
              $.ajax({
                  url: webUrl,
                  method: "POST",
                  data: formData,
                  beforeSend: function() {
                    $('#verify-button').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
                  },
                  headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                  },
                  success: function (response) {
                    $('#verify-button').prop('disabled', false).html(`Verify <img src="{{asset('user/images/Arrow - Right.svg')}}" alt="Show" class="w-5 h-5" />`);
                    window.location.href = response.data.redirect_url || location.href;
                  },
                  error: function (xhr) {
                      $('#verify-button').prop('disabled', false).html(`Verify <img src="{{asset('user/images/Arrow - Right.svg')}}" alt="Show" class="w-5 h-5" />`);
                      if (xhr.status === 422) {
                        const errors = xhr.responseJSON.error;
                        var errorMessages = '';
                        $.each(errors, function (key, value) {
                            errorMessages = value[0]; 
                            $('#otp-validation').text(errorMessages); 
                            return false; 
                        });
                      }  else{
                        toastr.error(xhr.responseJSON.message);
                      }
                  }
              });
          });
      });
  </script>
  <script>
    function resend(event, id, type){
      event.preventDefault();  
      $.ajax({
        url: "{{ route('user.resend-otp') }}",
        method: "GET",
        data: {
          id: id,
          type: type
        },
        beforeSend: function() {
          $('#resend-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
        },
        headers: {
          'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function (response) {
          $('#resend-btn').prop('disabled', false).html(`Resend`);
          toastr.success(response.message);
        },
        error: function (xhr) {
          $('#resend-btn').prop('disabled', false).html(`Resend`);
          toastr.error(xhr.responseJSON.message);
        }
      });
    }     
  </script>
@endsection