@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
        <section class="pg_header header section">
            <div class="container">
                @include('web.pages.components.header')
            </div>
            <img src="{{url('')}}/assets/web/images/cat_footer.svg" class="cat" alt="">
            <img src="{{url('')}}/assets/web/images/header_bg.png" class="bg" alt="" />
        </section>

        <!-- Start section -->
        <section class="auth_pg section">
            <div class="container">
                <form method="post" action="{{ $action }}" onsubmit="formAction(this)">
                    @CSRF
                    <div class="row justify-content-between align-items-center">
                        <div class="col-lg-5">
                            <div class="form_box wow slide_rtl">
                                <div class="section-title mb-5">
                                    <h6 class="sub-title color-primary fw-bold"> {{ __('web.verify_code') }}  </h6>
                                    <h2 class="fs-3 mt-4 fw-bold ">  {{ __('web.verify_code_desc') }} </h2>
                                    <div class="p color-primary dir_ltr text-start mt-4 fw-bold fs-4"> {{ $request->phone }} </div>
                                </div>
                                <div class="cont col-lg-11">
                                    <input type="hidden" name="phone" value="{{ $request->phone }}">
                                    <div class="form-group">
                                        <div class="code-group mb-4" dir="ltr">
                                            <input type="text" name="code_1" class="form-control" maxlength="1" placeholder="" autofocus>
                                            <input type="text" name="code_2" class="form-control" maxlength="1" placeholder="">
                                            <input type="text" name="code_3" class="form-control" maxlength="1" placeholder="">
                                            <input type="text" name="code_4" class="form-control" maxlength="1" placeholder="">
                                        </div>
                                    </div>

                                    <div class=" text-center w-100 my-5  ">
                                        <p class="txt_code m-0 fs-6">{{ __('web.code_will_finish') }}  <strong class="count_down color-primary ms-1">19</strong> </p>
                                        <a href="{{ $resend_link }}" id="resend_link" class="resend_link underline color-primary mt-3  fs-6">{{ __('web.resend_code') }}</a>
                                    </div>


                                    <button type="submit" class="submit_butn butn primary_butn w-100 fs-5 fw-bold  mt-5">
                                        <span>  {{ __('web.sure') }} </span>
                                    </button>


                                </div>

                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="img_box">
                                <dotlottie-player
                                    src="https://lottie.host/0e4ca19f-4b34-4905-ada0-2642d3da5410/vlhAftCMpT.lottie"
                                    background="transparent"  speed="1" style="width: 100%; height: 100%" loop autoplay>
                                </dotlottie-player>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>



    </main>

@endsection

@section('inject_js')
    <script>
        document.querySelectorAll('.code-group input').forEach((input, index, inputs) => {
            input.addEventListener('input', (e) => {
                // Move to the next input if a valid number is entered
                if (e.target.value.match(/^\d$/)) {
                    if (index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                } else {
                    e.target.value = ""; // Clear invalid input
                }
            });

            input.addEventListener('keydown', (e) => {
                if (e.key === "Backspace" && input.value === "") {
                    // Move to the previous input if backspace is pressed on an empty field
                    if (index > 0) {
                        inputs[index - 1].focus();
                        inputs[index - 1].value = ""; // Clear the previous input
                    }
                }
            });
        });
    </script>
    <script>
        let i = 180;
        $('#resend_link').hide()
        let a = setInterval(function() {
            if (i < 10)
                document.querySelector('.count_down').textContent = `0${i}`;
            else {
                document.querySelector('.count_down').textContent = `${i}`
            }
            i--;
            if (i < 0) {
                $('#resend_link').show()
                clearInterval(a);
            }
        }, 1000)
    </script>

@endsection