@extends('layouts.auth',["title"=>"login", "state"=>0, "showSteps"=> 0])
@section('content')
<style>
    .subTitel {
        width: 385.04px;
        height: 80px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        font-size: 17.6762px;
        text-align: center;
        color: #B5B5C3;

    }
</style>
<div class="w-full mt-6 lg:mt-12">
    <div class="w-full px-8">
        <div class="flex justify-center">
            <div class="create-account3">Verify Your Phone Number</div>
        </div>
        <div class="flex justify-center">
            <div class="subTitel">We have sent an email to ******{{substr (Auth::user()->phone, -4)}}
                Please enter your tokens to verify your phone number</div>
        </div>
        <div class="frame-167">
            @if(count($errors) > 0 )

            <ul class="flex justify-center w-full" style="list-style: none;">
                @foreach($errors->all() as $error)
                <li>
                    <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
                        <span class="font-medium">{{$error}}</span>
                    </div>
                </li>
                @endforeach
            </ul>

            @endif


            <div class="flex justify-center w-full">
                <input type="text" id="input1" name="input1" oninput="handleChange('1')" class="block mx-1 w-8 lg:w-14 px-4 py-2 text-gray-900 border border-yellow-300 rounded-lg bg-gray-50 text-base focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                <input type="text" id="input2" name="input2" oninput="handleChange('2')" class="block mx-1 w-8 lg:w-14 px-4 py-2 text-gray-900 border border-yellow-300 rounded-lg bg-gray-50 text-base focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                <input type="text" id="input3" name="input3" oninput="handleChange('3')" class="block mx-1 w-8 lg:w-14 px-4 py-2 text-gray-900 border border-yellow-300 rounded-lg bg-gray-50 text-base focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                <input type="text" id="input4" name="input4" oninput="handleChange('4')" class="block mx-1 w-8 lg:w-14 px-4 py-2 text-gray-900 border border-yellow-300 rounded-lg bg-gray-50 text-base focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                <input type="text" id="input5" name="input5" oninput="handleChange('5')" class="block mx-1 w-8 lg:w-14 px-4 py-2 text-gray-900 border border-yellow-300 rounded-lg bg-gray-50 text-base focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                <input type="text" id="input6" name="input6" oninput="handleChange('6')" class="block mx-1 w-8 lg:w-14 px-4 py-2 text-gray-900 border border-yellow-300 rounded-lg bg-gray-50 text-base focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>
            <form id="verifyForm" method="post" action="/phone-verification">
                @csrf
                <input type="hidden" id="token" name="token" />
            </form>
            <div class="flex justify-center w-full">
                <p class="mt-9 ">Did’t receive an SMS? <span class="text-yellow-500">Resend</span></p>
            </div>

            </form>
        </div>

        <div class="arrows mt-8 px-8">
            <button type="button" onclick="submiteForm()" class="button">
                <div class="next">Submit</div>
                <img class="arrow-right" src="/icons/Arrow-right.png" />
            </button>
        </div>
    </div>
    <script>
        const handleChange = (state) => {
            const inputState = document.getElementById(`input${state}`);
            if (inputState.value.length > 0 && parseInt(state) <= 6) {
                document.getElementById(`input${parseInt(state)+1}`).focus()
            } else if (inputState.value.length === 0 && parseInt(state) != 1 && parseInt(state) <= 6) {
                document.getElementById(`input${parseInt(state)-1}`).focus()
            }
        }
        const submiteForm = () => {
            let token = '';

            for (let index = 1; index <= 6; index++) {
                token = token + document.getElementById(`input${index}`).value;

            }
            document.getElementById(`token`).value = token;
            document.getElementById("verifyForm").submit();
        }
    </script>
    @stop