@extends('admin.layouts.layout')

@section('container_content')

    <div class="login section-padding">
        <div class="container">
            <div class="border-item">
                <div class="row no-gutters justify-content-center">
                    <div class="col-lg-4">
                        <div class="form_logo">
                            <img src="{{ asset($logo ?? 'assets/admin/images/logo.png') }}" alt="">
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <form method="POST" action="{{ $formAction }}" class="check-code-form">
                            @csrf

                            @if (session('error'))
                                <div class="alert alert-danger">
                                    {{ session('error') }}
                                </div>
                            @endif

                            @if (session('message'))
                                <div class="alert alert-info">
                                    {{ session('message') }}
                                </div>
                            @endif

                            <div class="form-group">
                                <p>
                                    {{ __('users::users.enter_code_sent_to') }} {{ $data['field_value'] ?? "" }}
                                </p>
                                @if(isset($data['sentCodeValue']))
                                    <p>({{ $data['sentCodeValue'] }})</p>
                                @endif
                            </div> <!-- end form-group -->

                            <div class="form-group">
                                <label for="code" class="col-form-label text-md-right">{{__('users::users.code')}}</label>

                                <input id="code" type="text" class="form-control @error('code') is-invalid @enderror"
                                       name="code" placeholder="{{__('users::users.code')}}" value="{{ old('code') }}"
                                       required autocomplete="off" autofocus />

                                @error('code')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div> <!-- end form-group -->

                            <button type="submit" class="butn mt-3"><span>{{__('users::users.send_code')}}</span></button>
                        </form>
                        <form method="POST" action="" id="form" class="resend-code-form">
                            @csrf
                            <div class="col-md-12 text-center">
                                <div id="countdown"></div>
                                <div id="resend-code" class="mt-3"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--End-Contents-->
@endsection

@section('container_js')
    <script>
        var timeLeft = Number('{{ $data['seconds'] ?? 0 }}');
        var downloadTimer = setInterval(function() {
            if (timeLeft <= 0) {
                clearInterval(downloadTimer);
                document.getElementById("countdown").innerHTML = "{{ __('users::users.finished') }}";
                document.getElementById("resend-code").innerHTML
                    = '<button type="submit" class="underline color-secondary d-block text-center mt-3 m-auto" formaction="{{ route('resend.code', ['type' => $data['type'] ?? '']) }}">{{ __('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>
@endsection