@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.register')}} </h2>
                            <h6 class="small mb-5">{{__('web.regist_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()" 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" 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>
                                <a href="{{$login_action}}"
                                   class="underline fw-bold color-primary small">{{__('web.have_acc')}}</a>
                                <button type="submit" style="display: none"
                                        class="butn primary_butn px-5 py-3 mt-5 checkcode">{{__('web.enter')}}</button>
                            </form>
                        </div>
                    </div>

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


    @section('inject_js')

        <script>
            let send_action = "{{route('send.regist.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) {
                            $('#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>
    @endsection

@endsection