@extends('web.layouts.container')

@section('content')
    <section class="register-pg">
        <div class="container">
            <div class="inner">
                <div class="row">
                    <div class="col-md-6">
                        <div class="logo-box">
                            <img src="{{asset('assets/web/images/logo.svg')}}" alt="" class="logo"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-box">
                            <div class="links-top mb-5">
                                <h5 class="title mb-0"><b>{{__('members.verification_code')}}</b></h5>
                            </div>
{{--                            <h5 class="p text-center mt-4 mb-4">Verification code: {{session('verify_code')}}</h5>--}}
                            <p class="p text-center mt-4 mb-4">{{__('members.verification_code_hint')}} </p>
                            <form method="post" action="{{route('user.verifyCode')}}" class="verify_code_form">
                                <div class="form-group code-form-group">
                                    <div class="row justify-content-center mb-4">
                                        <input name="code[]" maxlength="1" class="form-control code-input code">
                                        <input name="code[]" maxlength="1" class="form-control code-input code">
                                        <input name="code[]" maxlength="1" class="form-control code-input code">
                                        <input name="code[]" maxlength="1" class="form-control code-input code">
                                    </div>
                                    <div class="countdown-wrapper text-center">
{{--                                        <p class="countdown-p">ستنتهي صلاحية الكود خلال</p>--}}
                                        <p class="countdown-num"><span id="countdown">0:0:0</span></p>
                                    </div>
                                </div>
                                <div class="mt-5">
                                    <button class="butn m-auto d-block verify_code_button"><span><b> {{__('members.verify')}} </b></span></button>
                                </div>
                                <a disabled href="#" class="resend-link mt-3 resend_code_link d-none">{{__('members.resend')}}</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

    <script>
        let resendCodeLink = "{{route('user.resendCode')}}";

        $('.verify_code_button').click(async function (e) {
            e.preventDefault();
            $(this).attr('disabled', true);
            let form = $('.verify_code_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                $(this).attr('disabled', false);
                toasterError(response.errors);
            }
            if (response.url) {
                window.location.href = response.url;
            }
        });

        $('.resend_code_link').click(async function (e) {
            e.preventDefault();

            let url = $(this).attr('href'),
                method = 'get';

            const response=await ajax({
                url,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                toasterError(response.errors);
            }
            if (response.success) {
                $('.resend_code_link').attr('href', '#').addClass('d-none');
                startTimer(5);
            }

        });

        function startTimer(countDown = null) {
            let countDownElement = $('#countdown'),
                countDownDate = countDown ? countDown : 120,
                interval = setInterval(function () {
                    countDownDate--;
                    let days = Math.floor( countDownDate/(60*60*24) ),
                        hours = Math.floor( (countDownDate/(60*60)) % 24 ),
                        minutes = Math.floor( (countDownDate/60) % 60 ),
                        seconds = Math.floor( (countDownDate) % 60 );
                    countDownElement.html(hours + ':' + minutes + ":" + seconds);

                    if (countDownDate === 0) {
                        clearInterval(interval);
                        $('.resend_code_link').removeClass('d-none').attr('href', resendCodeLink);

                    }
                }, 1000);
        }
        startTimer();


        $('input[name="code[]"]').keyup(function () {
            if ($(this).val() !== ''){
                $(this).prev().focus();
            }
        });

        document.addEventListener('paste', function (event) {
            let clipText = event.clipboardData.getData('Text');
            clipText = clipText.split('', 4);
            clipText.reverse();
            $('input[name="code[]"]').each(function (index, element) {
                $(element).val(clipText[index])
            })
        });

    </script>


@endsection