@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="register_pg section">
            <div class="container">
                <h2 class="title_w_shape w-fit mx-auto mb-5"> {{ $title ?? "" }} </h2>
                <div class="col-lg-6 mx-auto">
                    <div class="inner">
                        <div class="form_box">
                            <p class="text-center mb-2 code-result">{{ $pageData['sentCodeValue'] ?? null }}</p>
                            <form method="POST" action="{{ $checkCodeAction }}" class="check-code-form" id="form">
                                @csrf
                                <div class="form-group phone_group">
                                    <input type="text"
                                           name="{{ $field_key }}"
                                           required
                                           class="form-control digitsOnly @error($field_key) is-invalid @enderror"
                                           value="{{ old($field_key, $pageData['national_phone_number'] ?? null) }}"
                                           placeholder="XXX-XXX-XXX"/>
                                    <span class="icon"> <i class="fa-light fa-mobile"></i> </span>
                                    <select name="country_code" class="code_select">
                                        @if(isset($countries))
                                            @foreach($countries as $country)
                                                <option
                                                    value="{{ $country->iso2 }}" @selected(old('country_code') == $country->iso2)>
                                                    {{ $country->country_code }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <div id="verify-btn-wrapper">
                                        @if(empty($pageData))
                                            <button type="button"
                                                    data-load-text="{{ __('general.processing') }}"
                                                    class="apply_butn verify-button">
                                                {{ __('users::users.verify') }}
                                            </button>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input type="text"
                                           class="form-control @error('code') is-invalid @enderror"
                                           name="code" placeholder="{{__('users::users.code')}}"
                                           value="{{ old('code') }}"
                                           autocomplete="off" required/>
                                    <span class="icon"> <i class="fa-light fa-flag"></i> </span>
                                </div>
                                <div class="d-flex w-100 my-4 mb-5 align-items-center justify-content-between">
                                    <p class="txt_code m-0 fs-6" id="countdown">

                                    </p>
                                    <div id="resend-code">
                                        @if(!empty($pageData) && $pageData['seconds'] <= 0)
                                            <button type="button"
                                                    class="resend_link underline color-secondary fs-6 resend-code-btn"
                                                    data-load-text="{{ __('general.processing') }}">
                                                {{ __('users::users.resend_code') }}
                                            </button>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-7 mx-auto">
                                    <button type="submit" class="butn primary_butn w-100">
                                        <span> {{ __('users::users.confirm') }} </span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/web/images/vector_login_1.svg')}}" class="vector" alt=""/>
            <img src="{{asset('assets/web/images/vector_login_2.svg')}}" class="vector2" alt=""/>
        </section>
    </main>

@endsection

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

        function startCountdown(seconds) {
            timeLeft = seconds;

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

            // Clear any existing timer
            clearInterval(downloadTimer);

            // Start a new timer
            downloadTimer = setInterval(function () {
                if (timeLeft <= 0) {
                    clearInterval(downloadTimer);
                    document.getElementById("countdown").innerHTML = "{{ __('users::users.finished') }}";
                    document.getElementById("resend-code").innerHTML =
                        `<button type="button" class="resend_link underline color-secondary fs-6 resend-code-btn" data-load-text="{{ __('general.processing') }}">{{ __('users::users.resend_code') }}</button>`;
                    /*document.getElementById("verify-btn-wrapper").innerHTML =
                        `<button type="button" data-load-text="{{ __('general.processing') }}" class="apply_butn verify-button">{{ __('users::users.verify') }}</button>`;*/
                } else {
                    document.getElementById("countdown").innerHTML =
                        `{{__('users::users.code_expire_after')}} <strong class="count_down color-primary ms-1">${timeLeft}</strong>`;
                }
                timeLeft -= 1;
            }, 1000);
        }

        $(document).on('click', '.verify-button, .resend-code-btn', function (e) {
            e.preventDefault();

            let formData = $('#form').serialize();
            let btn = $(this);
            let btnText = btn.text().trim();
            let loadText = btn.data('loadText');

            $.ajax({
                url: "{{ route('web.users.post_forget_password') }}",
                type: "POST",
                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);
                }
            });
        });

        @if(!empty($pageData['seconds']))
        startCountdown(Number('{{ $pageData['seconds'] }}'));
        @endif
    </script>
@endpush