@extends('admin::layouts.login')

@section('content')

<div class="py-6  h-100 bg-cover bg-center  d-flex align-items-center" style="background-image: url({{staticAsset('assets/img/majarat-background.png') }})">
    <div class="container">
        <div class="row">
            <div class="col-xxl-5 col-xl-6 col-md-8 mx-auto">
                <div class="bg-white rounded shadow-sm p-4 text-left">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif
                    @if (session('danger'))
                        <div class="alert alert-danger">
                            {{ session('danger') }}
                        </div>
                    @endif

                        <!-- For ajax -->
                        <div class="ajax_status">

                        </div>
                        <!-- For ajax -->

                    <h1 class="h3 fw-600"></h1>
                    <p class="mb-4 opacity-60"> </p>
                    <form method="POST" action="{{ route('admin.validate_reset_otp') }}">
                        @csrf
                        <input type="hidden" name="email" value="{{session()->get('email') ?? ''}}" />
                        <div class="form-group">
                            <!--  -->
                            <div class="container height-100 d-flex justify-content-center align-items-center">
                                 <div class="position-relative">
                                     <div class="card p-2 text-center">
                                         <h6>Please enter the one time password <br> to verify your account</h6>
                                          <div> <span>A code has been sent to your registered email</span></div>
                                                <div id="otp" class="inputs d-flex flex-row justify-content-center mt-2"> 
                                                    <input name="otp[]" class="m-2 text-center form-control rounded otp_field" type="text" id="first" maxlength="1" required /> 
                                                    <input  name="otp[]" class="m-2 text-center form-control rounded otp_field" type="text" id="second" maxlength="1" required />
                                                    <input  name="otp[]"  class="m-2 text-center form-control rounded otp_field" type="text" id="third" maxlength="1" required  />
                                                    <input  name="otp[]" class="m-2 text-center form-control rounded otp_field" type="text" id="fourth" maxlength="1" required />
                                                    <input  name="otp[]" class="m-2 text-center form-control rounded otp_field" type="text" id="fifth" maxlength="1" required />
                                                    <input  name="otp[]" class="m-2 text-center form-control rounded otp_field" type="text" id="sixth" maxlength="1" required />
                                                </div> 
                                              
                                            </div>
                                        </div>
                                             
                            </div>
                            <!--  -->

                            @if ($errors->has('email'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('email') }}</strong>
                                </span>
                            @endif
                        </div>
                        <div class="form-group text-right">
                            <button class="btn btn-primary btn-block" type="submit">
                                {{ translate('Verify') }}
                            </button>
                        </div>
                        
                    </form>
                    <div class="mt-3">
                        <a href="{{route('admin.login')}}" class="text-reset opacity-60">{{translate('Back to Login')}}</a>
                        <a href="javascript:void(0)" onclick="resendOtpInit()" class="text-reset opacity-60 float-right">{{translate('Resend OTP')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ staticAsset('assets/js/vendors.js') }}"></script>
<script src="{{ staticAsset('assets/js/aiz-core.js') }}"></script>
<script>

$(function() {

   

    $('.otp_field').on('keyup', function () {
        if (this.value != "") {
             $(this).next().focus();
        }
    });
});

    function resendOtpInit(){
        var userURL = "{{route('admin.resend_otp', session()->get('email') ?? '')}}"
        $.ajax({
            url: userURL,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
               $(".alert").hide();
                if(data.status == "status"){

                    let html = '<div class="alert alert-success status-status">'+data.message+'</div>' 
                    $('.ajax_status').html(html);
                }else{
                    let html = '<div class="alert alert-success status-danger">'+data.message+'</div>' 
                    $('.ajax_status').html(html);
                }
            }

        });
    }
   
</script>

@endsection