@extends('Template::layouts.app')

@php
    $bgImage = getContent('backgroundImage.content', true);
@endphp

@section('panel')
    <section class="account--section bg_img bg--overlay pb-80 pt-80" data-background="{{ getImage('assets/images/frontend/backgroundImage/' . @$bgImage->data_values->image, '1920x1080') }}">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="contact-wrapper bg--glass">

                        <div class="d-flex justify-content-center">
                            <div class="verification-code-wrapper">
                                <div class="verification-area">
                                    <h5 class="pb-3 text-center border-bottom">@lang('Verify Email Address')</h5>
                                    <form action="{{ route('user.password.verify.code') }}" method="POST" class="submit-form">
                                        @csrf
                                        <p class="verification-text">@lang('A 6 digit verification code sent to your email address') : {{ showEmailAddress($email) }}</p>
                                        <input type="hidden" name="email" value="{{ $email }}">
                                        @include('Template::partials.verification_code')
                                        <div class="form-group">
                                            <button type="submit" class="cmn--btn w-100">@lang('Submit')</button>
                                        </div>
                                        <div class="form-group">
                                            <p class="verification-info">@lang('Please check including your Junk/Spam Folder. if not found, you can') <a href="{{ route('user.password.request') }}">@lang('Try to send again')</a></p>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script-lib')
    <script src="{{ asset($activeTemplateTrue . 'js/jquery.inputLettering.js') }}"></script>
@endpush
@push('style')
    <style>
        .verification-code-wrapper {
            background-color: #042656;
            border-color: #346dff4d;
        }

        .verification-area h5 {
            color: #fff;
            border-bottom-color: rgba(255, 255, 255, 0.15) !important;
        }

        .verification-area .verification-text {
            color: rgba(255,255,255,0.8);
            margin-top: 8px;
        }

        .verification-area .verification-info {
            color: rgba(255,255,255,0.6);
            margin-top: 0px;
        }

        .verification-area .form-label {
            color: rgba(255,255,255,0.8);
        }

        .verification-code::after {
            background-color: #042656;
        }

        .verification-code span {
            color: #fff;
            background: transparent;
            border-radius: 3px;
            border-color: rgba(255,255,255,0.15);
        }
        .verification-code input {
            color: #fff !important;
        }

        #phoneInput .field-wrapper {
            position: relative;
            text-align: center;
        }

        #phoneInput .form-group {
            min-width: 300px;
            width: 50%;
            margin: 4em auto;
            display: flex;
            border: 1px solid rgba(96, 100, 104, 0.3);
        }

        #phoneInput .letter {
            height: 50px;
            border-radius: 0;
            text-align: center;
            max-width: calc((100% / 10) - 1px);
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: calc(100% / 10);
            outline-style: none;
            padding: 5px 0;
            font-size: 18px;
            font-weight: bold;
            color: red;
            border: 1px solid #0e0d35;
        }

        #phoneInput .letter+.letter {}

        @media (max-width: 480px) {
            #phoneInput .field-wrapper {
                width: 100%;
            }

            #phoneInput .letter {
                font-size: 16px;
                padding: 2px 0;
                height: 35px;
            }
        }
    </style>
@endpush