@extends('staff.auth.partials.app')
@push('styles')
@endpush
@section('content')
<div class="common-page">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-5 col-md-12 col-12">
                <div class="log-in-left">
                    <img src="{{ asset('assets/school-admin/assets_school_admin/img/log-in.png')}}" class="img-fluid" alt="">
                </div>
            </div>

            <div class="col-lg-7 col-md-6 col-12">
                <div class="log-in-right ">
                    <h1>OTP</h1>

                    <form form action="{{ route('otp.verify') }}" method="post">
                        @csrf
                        <div class="col-lg-12 col-md-12 col-12 mb-4">
                            <div class="custom-input">
                          <label for="exampleInputEmail1" class="form-label mb-3">Enter OTP that sent to your registered email id </label>
                          <div class="otp-field">
                            <input type="text" maxlength="1" />
                            <input type="text" maxlength="1" />
                            <input type="text" maxlength="1" />
                            <input type="text" maxlength="1" />
                        </div>
                        </div>
                    </div>

                        <div class="col-lg-12 col-12 mt-5">
                        <button type="submit" class="btn btn-primary ">LOG IN</button>
                        </div>
                      </form>

                      {{-- <p class="login-para">Have not receive any OTP yet?<a href="">Resend</a> </p> --}}

                </div>

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

@endsection

@push('scripts')

<script>
    const inputs = document.querySelectorAll(".otp-field input");

    inputs.forEach((input, index) => {
        input.dataset.index = index;
        input.addEventListener("keyup", handleOtp);
        input.addEventListener("paste", handleOnPasteOtp);
    });

    function handleOtp(e) {

        const input = e.target;
        let value = input.value;
        let isValidInput = value.match(/[0-9a-z]/gi);
        input.value = "";
        input.value = isValidInput ? value[0] : "";

        let fieldIndex = input.dataset.index;
        if (fieldIndex < inputs.length - 1 && isValidInput) {
            input.nextElementSibling.focus();
        }

        if (e.key === "Backspace" && fieldIndex > 0) {
            input.previousElementSibling.focus();
        }

        if (fieldIndex == inputs.length - 1 && isValidInput) {
            submit();
        }
    }

    function handleOnPasteOtp(e) {
        const data = e.clipboardData.getData("text");
        const value = data.split("");
        if (value.length === inputs.length) {
            inputs.forEach((input, index) => (input.value = value[index]));
            submit();
        }
    }

    function submit() {
        console.log("Submitting...");
        let otp = "";
        inputs.forEach((input) => {
            otp += input.value;
            input.disabled = true;
            input.classList.add("disabled");
        });
        console.log(otp);
    }
  </script>


@endpush