@extends('client/layouts/blankLayout')

@section('title', 'Validate email')

@section('page-style')
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-auth.css')}}">
<link rel="stylesheet" href="{{asset('css/clients/auth/validate-email.css')}}">
@endsection

@section('content')
<div class="container-xxl">
    <div class="authentication-wrapper authentication-basic container-p-y">
        <div class="authentication-inner py-4">

            <!-- Forgot Password -->
            <div class="card">
                <div class="card-body text-center">
                    <!-- Logo -->
                    <div class="app-brand justify-content-center">
                        <a href="{{url('/')}}" class="app-brand-link gap-2">
                            <span class="app-brand-logo demo">@include('client/_partials.macros',['width'=>25,'withbg' => "#696cff"])</span>
                        </a>
                    </div>
                    <!-- /Logo -->
                    <h4 class="mb-2"> {{ __('validate-email.title') }} </h4>
                    <p class="mb-4">{{ __('validate-email.description') }}</p>
                    @if($errors->any())
                    <div class="alert alert-danger alert-dismissible text-weight" role="alert">
                        {{ $errors->first() }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        </button>
                    </div>
                    @endif
                    @isset($error)
                    <div class="alert alert-danger alert-dismissible text-weight" role="alert">
                        {{ $error }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        </button>
                    </div>
                    @endisset
                    @isset($success)
                    <div class="alert alert-success alert-dismissible text-weight" role="alert">
                        {{ $success }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        </button>
                    </div>
                    @endisset
                    <form id="formAuthentication" class="mb-3" action="{{ route('client.email.validate') }}" method="POST">
                        @csrf
                        <div class="digit-group mb-4" data-group-name="digits" data-autosubmit="false" autocomplete="off">
                            <input type="text" id="digit-1" name="digit-1" data-next="digit-2" placeholder="-" required />
                            <input type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" placeholder="-" required/>
                            <input type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" placeholder="-" required/>
                            <input type="text" id="digit-4" name="digit-4" data-previous="digit-3" placeholder="-" required/>
                        </div>
                        <button class="btn btn-primary d-grid w-100">{{ __('validate-email.verify_email') }}</button>
                    </form>
                    <div class="text-center">
                        <span>{{ __('validate-email.span_mails_description') }}</span>
                        <form action="{{ route('client.email.otp.resend') }}" method="GET">
                            <button class="btn text-color" type="submit" id="send-otp" disabled>
                                {{ __('validate-email.resend_otp') }}
                            </button>
                            <div id="countdown" class="text-color"></div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- /Forgot Password -->
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $('.digit-group').find('input').each(function() {
        $(this).attr('maxlength', 1);
        $(this).on('keyup', function(e) {
            var parent = $($(this).parent());

            if (e.keyCode === 8 || e.keyCode === 37) {
                var prev = parent.find('input#' + $(this).data('previous'));

                if (prev.length) {
                    $(prev).select();
                }
            } else if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
                var next = parent.find('input#' + $(this).data('next'));

                if (next.length) {
                    $(next).select();
                } else {
                    if (parent.data('autosubmit')) {
                        parent.submit();
                    }
                }
            }
        });
    });
    var timeleft = 30;
    var downloadTimer = setInterval(function() {
        if (timeleft <= 0) {
            clearInterval(downloadTimer);
            document.getElementById("countdown").innerHTML = "";
            document.getElementById("send-otp").disabled = false;
        } else {
            document.getElementById("countdown").innerHTML = timeleft;
            document.getElementById("send-otp").disabled = true;
        }
        timeleft -= 1;
    }, 1000);

</script>
@endsection