@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
            @if(Str::contains(url()->current(), '/admin'))

                <div class="card-header "><h4 class='text-center'>Admin Verify</h4></div>
            
           @endif
                <div class="card-body">
                
                <form id="verificationForm" class="user">
                                        <div class="verification-code">
                                        <input type="text" maxlength="1" name="digit1" oninput="moveToNext(this, 'digit2')" onkeydown="moveToPrevious(this, 'digit1', event)" onkeypress="return avoidSpace(event)" required>
            <input type="text" maxlength="1" name="digit2" oninput="moveToNext(this, 'digit3')" onkeydown="moveToPrevious(this, 'digit1', event)" onkeypress="return avoidSpace(event)" required>
            <input type="text" maxlength="1" name="digit3" oninput="moveToNext(this, 'digit4')" onkeydown="moveToPrevious(this, 'digit2', event)" onkeypress="return avoidSpace(event)" required>
            <input type="text" maxlength="1" name="digit4" oninput="moveToNext(this, 'digit5')" onkeydown="moveToPrevious(this, 'digit3', event)" onkeypress="return avoidSpace(event)" required>
            <input type="text" maxlength="1" name="digit5" oninput="moveToNext(this, 'digit6')" onkeydown="moveToPrevious(this, 'digit4', event)" onkeypress="return avoidSpace(event)" required>
            <input type="text" maxlength="1" name="digit6" oninput="moveToNext(this, null)" onkeydown="moveToPrevious(this, 'digit5', event)" onkeypress="return avoidSpace(event)" required>
                    </div>
                                       
                                    
                                    <div class="row mb-0">
                            <div class="col-md-12">
                                <button type="submit" class="btn-gazna">
                                    {{ __('Verify') }}
                                </button>
</div></div>
                                        
                                        <p class="verification-code" id="verification-message"></p>
                              
                                <hr>
                                <div class="text-center">
                                    <a class="small" href="{{route('admin.login')}}">Back To Login?</a>
                                </div>
                                <hr>
                                <div class="text-center">
                                    <a class="small send_mail" href="#">Resend OTP?</a>
                                </div>

                        
                              
                               
                          
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="loader"></div>
@endsection


<script type="text/javascript">
     var email = "{{ $email }}";
     function avoidSpace(event) {
            if (event.keyCode === 32) {
                event.preventDefault();
                return false;
            }
            return true;
        }

        function moveToNext(currentInput, nextInputName) {
            if (currentInput.value.length === 1 && nextInputName) {
                document.querySelector(`input[name=${nextInputName}]`).focus();
            }
        }

        function moveToPrevious(currentInput, previousInputName, event) {
            if (event.keyCode === 8 && currentInput.value.length === 0) {
                event.preventDefault();
                document.querySelector(`input[name=${previousInputName}]`).focus();
            }
        }
        document.addEventListener("DOMContentLoaded", function() {
      var form = document.getElementById('verificationForm');
      if (form) {
        form.addEventListener('submit', function(event) {
    event.preventDefault(); 
   
    $('.loader').show();
    
    const code = [
        document.getElementsByName('digit1')[0].value,
        document.getElementsByName('digit2')[0].value,
        document.getElementsByName('digit3')[0].value,
        document.getElementsByName('digit4')[0].value,
        document.getElementsByName('digit5')[0].value,
        document.getElementsByName('digit6')[0].value
    ].join('');
 const verifyCodeUrl = '{{ route('admin.verifycode') }}';
 var email = "{{ $email }}";
    fetch(verifyCodeUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ code: code ,email:email})
    })
    .then(response => response.json())
    .then(data => {
       
        if (data.success) {
            $('.loader').hide();
              Swal.fire({
                title: 'Success!',
                text:"Code verified successfully!",
                icon: 'success',
                confirmButtonText: 'OK'
            }).then((result) => {
                if (result.isConfirmed) {
                    const token = code;
                    
    window.location.href = '{{ route('admin.newpassword.page') }}' +'?email='+email;
                }
            });
            // document.getElementById('verification-message').textContent = 'Code verified successfully!';
        } else {
            $('.loader').hide();
             Swal.fire({
                title: 'Error!',
                text:data.message,
                icon: 'error',
                confirmButtonText: 'OK'
            })
            .then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "{{ route('admin.verifycode.page', ['email' => '']) }}" + email;
                }
            });
            // document.getElementById('verification-message').textContent = 'Invalid code. Please try again.';
        }
    })
    .catch(error => {
        $('.loader').hide();
        console.log(error);
         Swal.fire({
                title: 'Error!',
                text:"An error occurred. Please try again.",
                icon: 'error',
                confirmButtonText: 'OK'
            })
            .then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "{{ route('admin.verifycode.page', ['email' => '']) }}" + email;
                }
            });
        // document.getElementById('verification-message').textContent = 'An error occurred. Please try again.';
    });
});
      }
});




    
    </script>