@extends('Client.layouts.layout')

@section('content')

    <section class="py-5">
        <div class="container">
        	<div class="row justify-content-center">
        		<div class="col-lg-8 col-xl-5 col-md-8 col-12">
        			<div class="card text-center p-4">
        				<div class="card-body">
        					<form action="{{ route('client.forget') }}" method="POST" class="appointment-form row mb-4 mt-5">
        					    @csrf
            					<h5 class="card-title h1 fw-semibold text-dark">@lang('trans.OTP_Verification')</h5>
            					<p class="card-text text-dark text-normal">@lang('trans.Enter_verification_code')</p>
            					<div class="row mb-4">
            						<label for="" class="text-dark d-flex justify-content-start mb-2 fw-semibold">@lang('trans.VerificationCode')</label>
            						<div class="col-2">
            							<input type="text" class="form-control verify text-center" name="code-1" id="code-1" data-id="1" maxlength="1" required>
            						</div>
            						<div class="col-2">
            							<input type="text" class="form-control verify text-center" name="code-2" id="code-2" data-id="2" maxlength="1" required>
            						</div>
            						<div class="col-2">
            							<input type="text" class="form-control verify text-center" name="code-3" id="code-3" data-id="3" maxlength="1" required>
            						</div>
            						<div class="col-2">
            							<input type="text" class="form-control verify text-center" name="code-4" id="code-4" data-id="4" maxlength="1" required>
            						</div>
            						<div class="col-2">
            							<input type="text" class="form-control verify text-center" name="code-5" id="code-5" data-id="5" maxlength="1" required>
            						</div>
            						<div class="col-2">
            							<input type="text" class="form-control verify text-center" name="code-6" id="code-6" data-id="6" maxlength="1" required>
            						</div>
            					</div>
            					<div class="mb-2">
            						<button id="VerifyCode" class="btn main_bt rounded-2 col-sm-12 fw-semibold">@lang('trans.VerifyCode')</button>
            					</div>
        					</form>
        				</div>
        			</div>
        		</div>
        	</div>
        </div>
    </section>

	
@endsection



@push('js')
<script>
        document.querySelectorAll(".verify").forEach(function (element,key) {
            element.addEventListener('keyup', function (event) {
                const key = event.key;
                if ((key != "Backspace") && (key != "Delete")) {
                    let id = parseInt(this.getAttribute('data-id'));
                    let next = id + 1;
                    if (id < 6) {
                        document.querySelector('input[data-id="' + (next) + '"]').focus();
                    }
                }
            });

            element.addEventListener('keydown', function (event) {
                const key = event.key;
                if ((key === "Backspace") || (key === "Delete")) {
                    this.value = '';
                    let id = parseInt(this.getAttribute('data-id'));
                    let previous = id - 1;
                    if (id > 0) {
                        document.querySelector('input[data-id="' + (previous) + '"]').focus();
                    }
                }
            });

            element.addEventListener('paste', function (event) {
                text = event.clipboardData.getData('text');
                paste(text);
            });
        });
        function paste(text) {
            if (text) {
                document.querySelectorAll(".verify").forEach(function (element,key) {
                    element.value = text[key];
                });
                document.querySelector('input[data-id="6"]').focus();
            }
        }


        document.getElementById('VerifyCode').addEventListener('click', function (event) {
            code = '';
            document.querySelectorAll(".verify").forEach(function (element,key) {
                code += element.value;
            });
            document.getElementById('code').value = code;
            document.getElementById("form-verify").submit();
        });

</script>
@endpush