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


  <main>
        <!-- ----------  inner header ----------- -->   
        
        @include('web.pages.components.headerNav')
       
        <!-- ---------- register_page page ----------- -->   
        <section class="form_page section_padding bg-light">
            <div class="container">
                <div class="content">
                    <div class="text-center">
                        <div class="logo_login">
                            <img src="{{url('')}}/assets/web/images/logo_login.svg" alt="">
                        </div>
                    </div>
                    <div class="form_box text-center">
                        <div class="row gx-0">
                            <div class="col-lg-6">
                                <div class="img_with_shap">
                                    <img src="{{url('')}}/assets/web/images/prush.png" alt="" class="pruch">
                                    <img src="{{url('')}}/assets/web/images/logo/logo2.svg" alt="" class="login2_img">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <form action="{{url(getCurrentLocale().'/resetpassword')}}" method="POST" class="form_edit">
                                    @CSRF
                                        <input type="hidden" name="phone"value="{{$phone}}">
                                    <div class="tit_info mb-5">
                                        <h3 class="mainColor">{{$page->descriptions()->title}}</h3>
                                        <small> {!! $page->descriptions()->description !!} </small>
                                        
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group text-center">
                                                <label for=""> {{__('web.code')}} </label>
                                                <input type="text" name="code" placeholder=" " class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <p id="count_down"></p>
                                    <a href="{{$url}}" id="resend" style="display:none" class="mainColor mt-4 text-decoration-underline">{{__('web.resend')}} </a>
                                    <div class="text-center mt-4 position-relative">
                                        <button class="butn px-lg-5 shadow-lg py-3 w-100">
                                            <span class="px-lg-5"> {{__('web.sendcode')}} </span>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
   
 @push('js')
    <script>
        const codes = document.querySelectorAll('.code');
        codes[0].focus();
        codes.forEach((code, idx) => {
            code.addEventListener('keydown', (e) => {
                if (e.key >= 0 && e.key <= 9) {
                    codes[idx].value = '';
                    setTimeout(() => codes[idx + 1].focus(), 10);
                } else if (e.key === 'Backspace') {
                    setTimeout(() => codes[idx - 1].focus(), 10);
                }
            });
        });
    </script>
    <script>
   
    var timeleft = 120;
        var downloadTimer = setInterval(function() {
            if (timeleft <= 0) {
                clearInterval(downloadTimer);
                $('#resend').css('display','block');
                $('.timer').css('display','none');
                document.getElementById("count_down").innerHTML = '';
            } else {
                document.getElementById("count_down").innerHTML = ""+{!! json_encode(__('web.timeleft')) !!}+" " + timeleft + " "+{!! json_encode(__('web.seconds')) !!}+"  ";
            }
            timeleft -= 1;
        }, 1000);
</script>
    
   
    @endpush
@stop