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

    <main>
        <!-- Start section -->
    @include('web.layouts.header')

    <!-- Start section -->

        <section class="login_pg section">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-6 m-auto">
                        <div class="form_box">
                            <h2 class="sec_title bb fw-bold mb-4"> {{__('web.forgetpassword')}}  </h2>
                            <h6 class="small mb-5">{{__('web.forgetpassword_desc')}}</h6>
                            <form id="form" method="post" action="{{$action}}" onsubmit="formAction(this)">
                                @CSRF
                                <div class="form-group mb-4">
                                    <label class="inputLabel"> {{__('web.phone')}}  <span class="text-danger">*</span>  </label>
                                    <div class="phone_group">
                                        <select class="form-control form-select codeSelect">
                                            <option>+966</option>
                                        </select>
                                        <input type="number" name="phone" class="form-control numInput" placeholder="" autofocus>
                                        <a style="cursor: pointer" onclick="sendCode()"  class="apply_butn underline fw-bold" id="startButton">{{__('web.sure')}}</a>
                                    </div>
                                </div>
                                <div class="form-group mb-4 checkcode"  style="display: none">
                                    <label class="inputLabel"> {{__('web.code_verify')}}    <span class="text-danger">*</span>  </label>
                                    <input type="number" name="code" class="form-control" placeholder="">
                                        <div class="d-flex w-100 justify-content-between align-items-center mt-3">
                                            <p class="mb-0" id="timer">{{__('web.resend_timer')}} <span id="countdowntimer">  </span> {{__('web.seconds')}} </p>
                                            <p class="resendButn color-primary small underline fw-bold" id="resend_code" onclick='sendCode()' style='cursor:pointer'>{{__('web.resend_code')}}  </p>
                                        </div>
                                </div>
                         
                                <button style="display: none" class="butn primary_butn px-5 py-3 mt-5 checkcode">{{__('web.sure')}}</button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </main>


@section('inject_js')

    <script>
        let send_action = "{{route('forgettingpassword')}}"
    </script>
    <script>
        function sendCode()
        {
            event.preventDefault();
            var dataform = new FormData( $('#form')[0]);
            $.ajax
            ({
                url : send_action,
                type: 'POST',
                data: dataform,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType:'json',
                contentType: false,
                processData: false,
                success:function(data)
                {
                    if('data' in data)
                    {
                        $('#timer').show();
                        $('#resend_code').hide();
                        timerStart();
                        $('.checkcode').show();
                        toasterSuccess(data.message);
                    }
                    else
                    {
                        toasterError(Object.values(data.errors)[0]);
                    }
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })
        }
    </script>
    
    <script>
        function timerStart()
        {
            var timeleft = 121;
            var downloadTimer = setInterval(function(){
                timeleft--;
                document.getElementById("countdowntimer").textContent = timeleft;
                if(timeleft <= 0) {
                    $('#resend_code').show();
                    $('#timer').hide();
                    clearInterval(downloadTimer);
                    document.getElementById("myDiv").classList.add("show");
                }
            }, 1000);
        }

    </script>
    <!--<script>-->
    <!--    document.getElementById("startButton").addEventListener("click", function() {-->
    <!--        var timeleft = 120;-->
    <!--        var downloadTimer = setInterval(function(){-->
    <!--            timeleft--;-->
    <!--            document.getElementById("countdowntimer").textContent = timeleft;-->
    <!--            if(timeleft <= 0) {-->
    <!--                clearInterval(downloadTimer);-->
    <!--                document.getElementById("myDiv").classList.add("show");-->
    <!--            }-->
    <!--        }, 1000);-->
    <!--    });-->
        
        <!--// $(".resendButn").classList.add("d-none");-->
        <!--// if(timeleft == 0) {-->
        <!--//     $(".resendButn").classList.remove("d-none");-->
        <!--//     $(".resendButn").classList.add("d-block");-->

        <!--// }-->

    <!--</script>-->

@endsection

@endsection