@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.verify_phone')}}  </h2>
                            <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()" id="startButton" class="apply_butn underline fw-bold">{{__('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="">
                                    <p class="mt-3">{{__('web.resend_timer')}} <span id="countdowntimer">  </span> {{__('web.seconds')}} </p>

                                </div>
                                <button type="submit" 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('verify.visitor.phone')}}"
    </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)
                    {
                        $('.checkcode').show();
                        toasterSuccess(data.message);
                    }
                    else
                    {
                        toasterError(Object.values(data.errors)[0]);
                    }
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })
        }
    </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);
    });

    </script>
@endsection

@endsection