@extends('guest-master')

@section('content')

    <div class="w-full max-w-md bg-white rounded-lg shadow-md p-8">

        <form id="register-form" method="POST" action="{{ route('register') }}">
            @csrf

            <div class="mb-4">
                <x-input-label for="first_name" :value="__('First Name')" :required="true" />
                <x-text-input id="first_name" class="block mt-1 w-full text-xs" type="text" name="first_name" :value="old('first_name')" required autofocus autocomplete="first_name" />
                <x-input-error :messages="$errors->get('first_name')" class="mt-2" />
            </div>

            <div class="mb-4">
                <x-input-label for="middle_name" :value="__('Middle Name')" />
                <x-text-input id="middle_name" class="block mt-1 w-full text-xs" type="text" name="middle_name" :value="old('middle_name')" autocomplete="middle_name" />
                <x-input-error :messages="$errors->get('middle_name')" class="mt-2" />
            </div>

            <div class="mb-4">
                <x-input-label for="last_name" :value="__('Last Name')" :required="true"/>
                <x-text-input id="last_name" class="block mt-1 w-full text-xs" type="text" name="last_name" :value="old('last_name')" required autocomplete="last_name" />
                <x-input-error :messages="$errors->get('last_name')" class="mt-2" />
            </div>

            <div class="mb-4">
                <x-input-label for="suffix" :value="__('Suffix')" />
                <x-text-input id="suffix" class="block mt-1 w-full text-xs" type="text" name="suffix" :value="old('suffix')" autocomplete="suffix" />
                <x-input-error :messages="$errors->get('suffix')" class="mt-2" />
            </div>

            <div class="mb-4">
                <x-input-label for="email" :value="__('Email')" :required="true"/>
                <x-text-input id="email" class="block mt-1 w-full text-xs" type="email" name="email" :value="old('email')" required autocomplete="email" />
                <x-input-error :messages="$errors->get('email')" class="mt-2" />
            </div>

            <div class="mb-4">
                <x-input-label for="otp" :value="__('OTP')" :required="true"/>
                <x-text-input id="otp" class="block mt-1 w-full text-xs" type="text" minlength="6" maxlength="6" name="otp" :value="old('otp')" required/>
                <x-input-error :messages="$errors->get('otp')" class="mt-2" />
            </div>

            <div class="mb-4">
                <x-input-label for="password" :value="__('Password')" :required="true"/>
                <x-text-input id="password" class="block mt-1 w-full text-xs" type="password" name="password" required />
                <x-input-error :messages="$errors->get('password')" class="mt-2" />
            </div>

            <div class="mb-4">
                <x-input-label for="password_confirmation" :value="__('Confirm Password')" :required="true"/>
                <x-text-input id="password_confirmation" class="block mt-1 w-full " type="password" name="password_confirmation" required />
                <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
            </div>
        </form>
        <div class="flex items-center justify-between mt-4 mb-4">
            <form id="send-otp-form" method="POST" action="{{ route('send-otp.store') }}">
                @csrf
                <input id="hidden-email" type="hidden" name="email" value="{{ old('email') }}">
                <input id="hidden-first_name" type="hidden" name="first_name" value="{{ old('first_name') }}">
                <input id="hidden-middle_name" type="hidden" name="middle_name" value="{{ old('middle_name') }}">
                <input id="hidden-last_name" type="hidden" name="last_name" value="{{ old('last_name') }}">
                <input id="hidden-suffix" type="hidden" name="suffix" value="{{ old('suffix') }}">
                <input id="hidden-otp" type="hidden" name="otp" value="{{ old('otp') }}">
                <button type="submit" class="bg-main-dark text-main-light hover:bg-main-light hover:text-main-dark inline-flex items-center px-6 py-2 border border-transparent rounded-md font-semibold text-sm uppercase tracking-widest transition ease-in-out duration-150">
                    {{ __('Send OTP') }}
                </button>
            </form>
            <button onclick="document.getElementById('register-form').submit()" class="bg-main-dark text-main-light hover:bg-main-light hover:text-main-dark inline-flex items-center px-6 py-2 border border-transparent rounded-md font-semibold text-sm uppercase tracking-widest transition ease-in-out duration-150">
                {{ __('Register') }}
            </button>
        </div>
        <div class="flex items-center justify-between mt-4 mb-4">
            <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}">
                {{ __('Already registered?') }}
            </a>
        </div>

    </div>

@endsection


@section('scripts')
    <script>
        document.getElementById('send-otp-form').addEventListener('submit', function (event) {
            const emailValue = document.getElementById('email').value;
            const otpValue = document.getElementById('otp').value;
            const firstNameValue = document.getElementById('first_name').value;
            const middleNameValue = document.getElementById('middle_name').value;
            const lastNameValue = document.getElementById('last_name').value;
            const suffixValue = document.getElementById('suffix').value;

            document.getElementById('hidden-email').value = emailValue;
            document.getElementById('hidden-otp').value = otpValue;
            document.getElementById('hidden-first_name').value = firstNameValue;
            document.getElementById('hidden-middle_name').value = middleNameValue;
            document.getElementById('hidden-last_name').value = lastNameValue;
            document.getElementById('hidden-suffix').value = suffixValue;

            if (!emailValue) {
                event.preventDefault();
                alert('Please enter an email address in the registration form before sending OTP.');
            }
        });
    </script>
@endsection