@extends('layouts.auth')

@section('title')
    @lang('Verify Email')
@endsection

@section('content')

    <section class="account-section">
        <div class="account-wrapper auth--page login-wrapper" style="width:480px !important;">
            <div class="account-right">
                <div class="w-100">
                    <div class="section-title">
                        <h3 class="title">@lang('Email Verify Code')</h3>
                        <p>@lang('Enter the verification code that has been sent to your email. Please check your spam mailbox, if you cant find the mail')</p>
                    </div>
                    <form class="row g-4" action="{{route('user.verify.email')}}" method="post"  id="submit-form">
                        @csrf
<div class="mb-1">
    <label class="fw-bold my-1">@lang('Verification Code')</label>
    <div class="verification-code">
        <input type="text" name="code" id="verification-code" class="form-control overflow-hidden" required autocomplete="off">
        <div class="boxes">
            <span>-</span>
            <span>-</span>
            <span>-</span>
            <span>-</span>
            <span>-</span>
            <span>-</span>
        </div>
    </div>
</div>
                        <div class="col-xl-12 form-group">
                            <button type="submit" class="cmn--btn">@lang('Verify Code')</button>
                        </div>
                        <div class="col-sm-12 form-group">
                            <div class="d-flex flex-wrap justify-content-between">

                                        @lang('If you don\'t get any code'), <a href="{{route('user.verify.email.resend')}}">@lang('Resend Code')</a>

                            </div>
                        </div>
                    </form>



                </div>
            </div>
        </div>
    </section>

</@endsection
@push('style')
    <link rel="stylesheet" href="{{ asset('assets/verification-code.css') }}">
@endpush

@push('script')
    <script>
        $('#verification-code').on('input', function () {

            $(this).val(function(i, val){

                if (val.length >= 6) {

                    $('#submit-form').find('button[type=submit]').html('<i class="fa fa-spinner fa-spin"></i>');
                    $('#submit-form').submit()
                }
                if(val.length > 6){
                    return val.substring(0, val.length - 1);
                }
                return val;
            });
            for (let index = $(this).val().length; index >= 0 ; index--) {
                $($('.boxes span')[index]).html('');
            }
        });
    </script>
@endpush