@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- ---------- login-pg ----------- -->
        <section class="login-pg">
            <div class="container">
                <div class="login-box col-lg-7 mx-auto pt-0">
                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active"
                                    id="pills-regist1-tab"
                                    data-bs-toggle="pill"
                                    data-bs-target="#pills-regist1">
                                {{ __('users::users.verification_code') }}
                            </button>
                        </li>
                    </ul>
                    @if(isset($data['sentCodeValue']))
                        <p class="text-center mb-2">({{ $data['sentCodeValue'] }})</p>
                    @endif
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-regist1">
                            <form method="POST" action="{{ $formAction }}" class="check-code-form">
                                @csrf
                                <div class="form-group">
                                    <!-- <h6> كود التحقق </h6> -->
                                    <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>
                                <small class="d-block text-center">
                                    <div id="resend-code"></div>
                                </small>
                                <div class="text-center">
                                    <div class="butn-presv mt-5 mb-3">
                                        <button type="submit" class="butn">
                                            <span> {{ __('users::users.confirm') }} </span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <form method="POST" action="" id="resend-code-form" class="resend-code-form">
                                @csrf
                                <div class="col-md-12 text-center mt-3">
                                    <div id="countdown"></div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')
    <script>
        let timeLeft = Number('{{ $data['seconds'] ?? 0 }}');
        let 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" 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="m-0">{{ __('users::users.remaining_time') }}</p><strong class="count_down d-block color-primary ms-2">' + timeLeft + ' {{ __('users::users.second') }}</strong>';
            }
            timeLeft -= 1;
        }, 1000);
    </script>
@endpush