<x-guest-layout bg-image="https://jfi.lk/images/gallery/Panagoda-01.jpg">
    <form method="POST" action="{{ route('register') }}">
        @csrf

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

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

        <!-- Phone Number -->
        <div class="mt-4">
             <x-input-label for="phone_number" :value="__('Phone Number')" />
             <div class="flex gap-2">
                 <!-- Country Code -->
                 <div class="w-1/4">
                     <x-text-input id="country_code" class="block mt-1 w-full text-center" type="text" name="country_code" value="94" required />
                 </div>
                 <!-- Number -->
                 <div class="w-3/4 relative">
                     <x-text-input id="phone_number" class="block mt-1 w-full" type="text" name="phone_number" :value="old('phone_number')" required placeholder="7XXXXXXXX" maxlength="9" />
                     <div id="phone-error" class="hidden text-red-500 text-xs mt-1 absolute -bottom-5 left-0"></div>
                 </div>
             </div>
             <x-input-error :messages="$errors->get('country_code')" class="mt-2" />
             <x-input-error :messages="$errors->get('phone_number')" class="mt-2" />
        </div>

        <script>
            const phoneInput = document.getElementById('phone_number');
            const phoneError = document.getElementById('phone-error');
            const submitBtn = document.querySelector('button[type="submit"]');

            phoneInput.addEventListener('input', function(e) {
                const value = e.target.value;
                
                // Clear non-numeric chars
                if (/\D/.test(value)) {
                    e.target.value = value.replace(/\D/g, '');
                }

                // Check starting with 0
                if (value.startsWith('0')) {
                    phoneError.textContent = "Cannot start with 0";
                    phoneError.classList.remove('hidden');
                    e.target.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
                    submitBtn.disabled = true;
                    submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
                } 
                // Check length (real-time feedback if > 9, but maxlength handles input prevention)
                else if (value.length > 0 && value.length !== 9) {
                     // We don't error immediately on length unless it's too long or on blur, 
                     // but user asked for "errors immediately when the users enters the data".
                     // So we can show "Must be 9 digits" as they type if they pause? 
                     // Or just clear error if valid so far.
                     // Let's stick to the 0 rule immediately. Length is enforced by maxlength=9.
                     // But we should validate 9 digits before submit enabled.
                     
                     if(value.length === 9) {
                         phoneError.classList.add('hidden');
                         e.target.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
                         submitBtn.disabled = false;
                         submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                     } else {
                         // Optional: could indicate incomplete
                     }
                }
                else {
                    phoneError.classList.add('hidden');
                    e.target.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
                     if(value.length === 9) {
                        submitBtn.disabled = false;
                        submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                     }
                }
            });
            
            // Additional check on blur
            phoneInput.addEventListener('blur', function(e) {
                 if (e.target.value.length > 0 && e.target.value.length !== 9) {
                    phoneError.textContent = "Must be 9 digits";
                    phoneError.classList.remove('hidden');
                    submitBtn.disabled = true;
                    submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
                 }
            });
        </script>

        <!-- Password -->
        <div class="mt-4">
            <x-input-label for="password" :value="__('Password')" />

            <x-text-input id="password" class="block mt-1 w-full"
                            type="password"
                            name="password"
                            required autocomplete="new-password" />

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Confirm Password -->
        <div class="mt-4">
            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />

            <x-text-input id="password_confirmation" class="block mt-1 w-full"
                            type="password"
                            name="password_confirmation" required autocomplete="new-password" />

            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
        </div>

        <div class="flex items-center justify-end mt-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>

            <x-primary-button class="ms-4">
                {{ __('Register') }}
            </x-primary-button>
        </div>
    </form>
</x-guest-layout>
