@extends('web.layouts.layout')

@section('content')

    <main class="mt-100">
        <!-- contact section-->
        <section class="section_padding contact-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 wow slow fadeInUp pe-5">
                        <form method="POST" action="{{ $formAction }}" class="ajax-form check-code-form">
                            @csrf
                            <h3 class="d-flex fw-bold orange-color mb-2">
                                {{ __('main.welcome_message') }}
                                <img
                                    data-src="{{ asset('assets/web/images/icons/welcome.svg') }}"
                                    src="{{ asset('assets/web/images/icons/welcome.svg') }}"
                                    width="20px"
                                    height="25px"
                                    class="img_contain lazyloaded ms-1 mt-1 slide_left_right"
                                    alt="..."
                                />
                            </h3>
                            <p class="fs-4">{{ __('users::users.enter_code_sent_phone') }}</p>
                            <p class="text-center mb-2 code-result">{{ $data['sentCodeValue'] ?? null }}</p>
                            <div class="mt-4 code-form d-flex" style="direction: ltr;">
                                <input
                                    type="text"
                                    maxlength="1"
                                    class="form-control mx-2 code-input"
                                    id="code1"
                                    name="code1"
                                    placeholder=""
                                    required
                                />
                                <input
                                    type="text"
                                    maxlength="1"
                                    class="form-control mx-2 code-input"
                                    id="code2"
                                    name="code2"
                                    placeholder=""
                                    required
                                />
                                <input
                                    type="text"
                                    maxlength="1"
                                    class="form-control mx-2 code-input"
                                    id="code3"
                                    name="code3"
                                    placeholder=""
                                    required
                                />
                                <input
                                    type="text"
                                    maxlength="1"
                                    class="form-control mx-2 code-input"
                                    id="code4"
                                    name="code4"
                                    placeholder=""
                                    required
                                />
                            </div>
                            {{-- <input type="text"
                                   class="form-control text-center @error('code') is-invalid @enderror"
                                   name="code" placeholder="{{__('users::users.code')}}"
                                   value="{{ old('code') }}"
                                   required autocomplete="off" autofocus/> --}}
                            <div class="row mt-4">
                                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                                    <div id="countdown"></div>
                                </div>
                                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12 text-end">
                                    <div id="resend-code"></div>
                                </div>
                            </div>
                            <div class="nav_btns d-inline mt-5">
                                <button type="submit"
                                        class="btn btn-primary half-rounded hvr-txt-trans">
                                    <div class="txt" data-text="{{ __('users::users.verify_now') }}">
                                        <span class="fs-7">
                                          {{ __('users::users.verify_now') }}
                                          <img
                                              data-src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                              src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                              alt="arrows"
                                              class="lazyload img_contain ms-2"/>
                                        </span>
                                    </div>
                                </button>
                            </div>
                        </form>
                        <form method="POST" action="" id="resend-code-form" class="resend-code-form">
                            @csrf
                        </form>
                    </div>
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 wow slow fadeInUp">
                        <img
                            data-src="{{ asset('assets/web/images/login/code.svg') }}"
                            src="{{ asset('assets/web/images/login/code.svg') }}"
                            width="814px"
                            height="619px"
                            class="img_contain lazyloaded slide_up_down"
                            alt="..."/>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')
    <script>
        let downloadTimer;
        let timeLeft;

        function startCountdown(seconds) {
            timeLeft = seconds;

            $('.resend-code-btn').remove();

            // Clear any existing timer
            clearInterval(downloadTimer);

            downloadTimer = setInterval(function () {
                if (timeLeft <= 0) {
                    clearInterval(downloadTimer);
                    document.getElementById("countdown").innerHTML = "{{ __('users::users.finished') }}";
                    document.getElementById("resend-code").innerHTML
                        = '<button type="submit" class="resend-code-btn orange-color underline-text" data-load-text="{{ __('general.processing') }}" form="resend-code-form" formaction="{{ route('web.resend.code', ['type' => $data['type'] ?? '']) }}"> <i class="fal fa-repeat"></i> {{ __('users::users.resend_code') }} </button>';
                } else {
                    document.getElementById("countdown").innerHTML = '<p class="grey-text">{{ __('users::users.code_expire_after') }} <span id="timer" class="mainColor fw-bold"> ' + timeLeft + ' </span> {{ __('users::users.second') }}</p>';
                }
                timeLeft -= 1;
            }, 1000);
        }

        startCountdown(Number('{{ $data['seconds'] ?? 0 }}'));
    </script>

    <script>
        $(document).on('click', '.resend-code-btn', function (e) {
            e.preventDefault();

            let btn = $(this);
            let btnText = btn.text().trim();
            let loadText = btn.data('loadText');
            let $form = $('#resend-code-form');
            let url = $form.attr('action') || btn.attr('formaction');
            let method = $form.attr('method'); // usually "POST"
            let formData = $form.serialize();

            $.ajax({
                url: url,
                type: method,
                data: formData,
                headers: {
                    'Accept': 'application/json'
                },
                beforeSend: function () {
                    btn.prop('disabled', true).text(loadText);
                },
                success: function (response) {
                    toasterSuccess(response.message);
                    let data = response.data;
                    $('.code-result').text(data.sentCodeValue);

                    // Reset and start the countdown timer with new seconds value
                    if (data.seconds) {
                        startCountdown(data.seconds);
                    }
                },
                error: function (xhr) {
                    displayAjaxError(xhr);
                },
                complete: function () {
                    btn.prop('disabled', false).text(btnText);
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const inputs = document.querySelectorAll('.code-input');

            // Focus the first input on load
            //inputs[0].focus(); //not working with wow
            setTimeout(() => inputs[0].focus(), 200);

            inputs.forEach((input, index) => {
                // Handle typing and move to next
                input.addEventListener('input', (e) => {
                    const value = e.target.value;
                    if (value.length === 1 && index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                });

                // Handle backspace and move to previous
                input.addEventListener('keydown', (e) => {
                    if (e.key === 'Backspace' && !input.value && index > 0) {
                        inputs[index - 1].focus();
                    }
                });

                // Handle paste of full code
                input.addEventListener('paste', (e) => {
                    e.preventDefault();
                    const pasteData = e.clipboardData.getData('text').trim();
                    if (/^\d{4}$/.test(pasteData)) {
                        for (let i = 0; i < 4; i++) {
                            inputs[i].value = pasteData[i];
                        }
                        inputs[3].focus();
                    }
                });
            });
        });
    </script>
@endpush