@extends('layout.simpleapp')
@section('content')
    <style>
        .customBtn {
            border-radius: 0px;
            padding: 10px;
        }

        /* @media(max-width:437px) {
                    form input {

                        width: 46px !important;
                    }
                } */

        form input {
            display: inline-block;
            width: 50px;
            height: 44px;
            text-align: center;
            background-color: transparent;
        }

        .formclass2 {
            /* border-left: 0;
                    border-right: 0;
                    border-top: 0; */
            margin: 4px;
            border: none;
            border-radius: 5px;
            background-color: #6368ff59 !important;
        }

        .formclass2:valid {
            color: #000 !important;
            background-color: #6368ff93 !important;
            outline: 0 !important;
            border: 1px solid #6367FF;
            box-shadow: none !important;
            color: #6367FF;
        }

        .formclass2:focus {
            color: #000 !important;
            background-color: #6368ff93 !important;
            outline: 0 !important;
            border: 1px solid #6367FF;
            box-shadow: none !important;
            color: #6367FF;
        }
        @media only screen and (max-width: 770px) {

            /*Big smartphones [426px -> 600px]*/
            #removebkimg {
                background-image: url('{{ asset('employer-con/images/VerifyResponsive_bg.png') }}') !important;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: fixed;
            }

            .change_width {
                width: 80% !important;
            }

            form input {
                width: 36px;
                height: 40px;
            }
        }

        @media only screen and (max-width: 425px) {

            /*Small smartphones [325px -> 425px]*/
            #removebkimg {
                background-image: url('{{ asset('employer-con/images/VerifyResponsive_bg.png') }}') !important;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: fixed;
            }

            .change_width {
                width: 80% !important;
            }

            form input {
                width: 26px;
                height: 30px;
            }

            .button-change {
                background-color: transparent !important;
                border: 1px solid #6367FF;
                color: #6367FF;
            }
        }


        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url('{{ asset('employer-con/images/VerifyBg.png') }}') !important;
        }
    </style>

    @if (Session::has('error'))
        <style>
            .formclass2 {
                /* border-left: 0;
            border-right: 0;
            border-top: 0; */
                margin: 4px;
                border: none;
                border-radius: 5px;
                background-color: rgba(255, 0, 0, 0.198) !important;
            }
        </style>
    @endif

    <section>

        <div class="container-fluid main" id="removebkimg" style="height: 100vh;">

            <div class="card shadow change_width" style="width: 50%; border-radius: 10px">
                <div class="card-body d-flex flex-column align-items-center">
                    <img src="{{ asset('employer-con/images/icon2.jpg') }}" height="52px" width="64px" />
                    <div class="d-flex flex-column align-items-center">

                        <h1 class="text-primaryy"><b>{{ __('Verify') }}</b></h1>
                        <h5 class="text-capitalize">{{ __('Enter the OTP that been sent to you email address') }}</h5>


                        <!--@if (!empty($status))-->
                        <!--    <div class="alert alert-success">-->
                        <!--        <ul>-->
                        <!--            <li>{{ $status }}</li>-->
                        <!--        </ul>-->
                        <!--    </div>-->
                        <!--@endif-->

                        @if (Session::has('status'))
                            <div class="alert alert-success">
                                <ul>
                                    <li>{{ Session::get('status') }}</li>
                                </ul>
                            </div>
                        @endif

                        <form action="verify-em" method="POST">
                            <div class="d-flex align-items-center justify-content-center">
                            <input class="otp formclass2" name="one" type="text" oninput='digitValidate(this)'
                                onkeyup='tabChange(1)' maxlength=1 required>
                            <input class="otp formclass2" name="two" type="text" oninput='digitValidate(this)'
                                onkeyup='tabChange(2)' maxlength=1 required>
                            <input class="otp formclass2" name="three" type="text" oninput='digitValidate(this)'
                                onkeyup='tabChange(3)' maxlength=1 required>
                            <input class="otp formclass2" name="four" type="text"
                                oninput='digitValidate(this)'onkeyup='tabChange(4)' maxlength=1 required>
                            <input class="otp formclass2" name="five" type="text"
                                oninput='digitValidate(this)'onkeyup='tabChange(5)' maxlength=1 required>
                            <input class="otp formclass2" name="six" type="text"
                                oninput='digitValidate(this)'onkeyup='tabChange(6)' maxlength=1 required>
                            </div>
                            @csrf
                            <div class=" form-group row pt-4">
                                @if (Session::has('error'))
                                    <div class="col-2"></div>
                                    <div class="alert alert-danger col-8">

                                        {{ Session::get('error') }}

                                    </div>
                                    <div class="col-2"></div>
                                @endif
                                <div class="col pt-4 text-center">
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-lg btn-primaryy btn-block contact-form-field"
                                            style=""><b> {{ __('Done') }} </b></button>
                                        <div class="pt-2">
                                            <a href="resend-otp"
                                                class="btn btn-lg btn-primaryy btn-block contact-form-field button-change"
                                                style=""><b> {{ __('Resend') }}
                                                </b></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>


    </section>
@endsection
@section('script')
    <script>
        let digitValidate = function(ele) {
            console.log(ele.value);
            ele.value = ele.value.replace(/[^0-9]/g, '');
        }

        let tabChange = function(val) {
            let ele = document.querySelectorAll('input');
            if (ele[val - 1].value != '') {
                ele[val].focus()
            } else if (ele[val - 1].value == '') {
                ele[val - 2].focus()
            }
        }
    </script>
@endsection