@extends('layouts.site')

@section('title', 'Register')

@section('content')
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <div class="text-center">
            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
                Create your account
            </h2>
            <p class="mt-2 text-sm text-gray-600">
                Follow these simple steps to join our platform
            </p>
        </div>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <!-- Progress Steps -->
            <div class="flex justify-between mb-8">
                <div class="step flex flex-col items-center" data-step="1">
                    <div class="w-8 h-8 rounded-full bg-orange-600 text-white flex items-center justify-center mb-1">1</div>
                    <span class="text-xs font-medium text-orange-600">Personal Info</span>
                </div>
                <div class="step flex flex-col items-center" data-step="2">
                    <div class="w-8 h-8 rounded-full border-2 border-gray-300 text-gray-500 flex items-center justify-center mb-1">2</div>
                    <span class="text-xs font-medium text-gray-500">Account Type</span>
                </div>
                <div class="step flex flex-col items-center" data-step="3">
                    <div class="w-8 h-8 rounded-full border-2 border-gray-300 text-gray-500 flex items-center justify-center mb-1">3</div>
                    <span class="text-xs font-medium text-gray-500">Credentials</span>
                </div>
            </div>

            <form class="space-y-6" action="{{ route('register') }}" method="POST" id="registrationForm">
                @csrf

                <!-- Step 1: Personal Information -->
                <div class="step-content" data-step="1">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Personal Information</h3>
                    
                    <div class="space-y-4">
                        {{-- Name --}}
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700">
                                Full Name *
                            </label>
                            <div class="mt-1">
                                <input id="name" name="name" type="text" required 
                                       value="{{ old('name') }}"
                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm @error('name') border-red-300 @enderror">
                            </div>
                            @error('name')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Email --}}
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700">
                                Email Address *
                            </label>
                            <div class="mt-1">
                                <input id="email" name="email" type="email" required 
                                       value="{{ old('email') }}"
                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm @error('email') border-red-300 @enderror">
                            </div>
                            @error('email')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Mobile --}}
                        <div>
                            <label for="mobile" class="block text-sm font-medium text-gray-700">
                                Mobile Number *
                            </label>
                            <div class="mt-1">
                                <input id="mobile" name="mobile" type="tel" required 
                                       value="{{ old('mobile') }}"
                                       placeholder="+256700000000"
                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm @error('mobile') border-red-300 @enderror">
                            </div>
                            @error('mobile')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="mt-6">
                      <button type="button" onclick="nextStep(1, 2)" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
    Continue to Account Type
</button>
                    </div>
                </div>

                <!-- Step 2: Account Type -->
                <div class="step-content hidden" data-step="2">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Account Type</h3>
                    
                    <div class="space-y-4">
                        {{-- User Type --}}
                  <div>
    <label for="user_type" class="block text-sm font-medium text-gray-700">
        Account Type *
    </label>
    <div class="mt-1">
        <select id="user_type" name="user_type" required 
                class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm @error('user_type') border-red-300 @enderror">
            <option value="property_owner" selected>
                Property Owner
            </option>
            <option value="property_manager" disabled>
                Property Manager
            </option>
            <option value="tenant" disabled>
                Tenant
            </option>
        </select>
    </div>
    @error('user_type')
        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

                        {{-- Package Selection (Hidden for tenants) --}}
                     <div id="package-selection">
                    <label class="block text-sm font-medium text-gray-700 mb-3">
                        Select Package *
                    </label>
                    <div class="space-y-3" id="packages-container">
                        @foreach($packages as $package)
                            <div class="relative">
                                <input type="radio" id="package_{{ $package['id'] }}" name="package_id" 
                                       value="{{ $package['id'] }}" 
                                       {{ old('package_id') == $package['id'] ? 'checked' : '' }}
                                       class="sr-only package-radio-input">
                                <label for="package_{{ $package['id'] }}" 
                                       class="relative block w-full bg-white border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-orange-300 transition-all duration-200 ease-in-out package-option">
                                    <div class="flex items-center justify-between">
                                        <div class="flex flex-col">
                                            <div class="flex items-center">
                                                <span class="text-sm font-medium text-gray-900 package-name">
                                                    {{ $package['name'] }}
                                                </span>
                                                @if($package['is_featured'])
                                                    <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                                        Popular
                                                    </span>
                                                @endif
                                            </div>
                                            <span class="text-lg font-bold text-orange-600 package-price">
                                                {{ $package['price_formatted'] }}
                                            </span>
                                            <div class="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-gray-500 package-features">
                                                <div class="flex items-center">
                                                    <svg class="h-3 w-3 text-gray-400 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                                    </svg>
                                                    {{ $package['duration_days'] }} days
                                                </div>
                                                <div class="flex items-center">
                                                    <svg class="h-3 w-3 text-gray-400 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                                    </svg>
                                                    {{ $package['property_limit'] }} properties
                                                </div>
                                                <div class="flex items-center">
                                                    <svg class="h-3 w-3 text-gray-400 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                                    </svg>
                                                    {{ $package['manager_limit'] }} managers
                                                </div>
                                                <div class="flex items-center">
                                                    <svg class="h-3 w-3 text-gray-400 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                                    </svg>
                                                    {{ $package['tenant_application_limit'] }} applications
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ml-4 flex-shrink-0">
                                            <div class="h-5 w-5 rounded-full border-2 border-gray-300 flex items-center justify-center package-radio-indicator">
                                                <div class="h-2 w-2 rounded-full bg-white"></div>
                                            </div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        @endforeach
                    </div>
                    @error('package_id')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                        {{-- Company Details (Optional) --}}
                        <div class="space-y-4">
                            <div>
                                <label for="company_name" class="block text-sm font-medium text-gray-700">
                                    Company Name (Optional)
                                </label>
                                <div class="mt-1">
                                    <input id="company_name" name="company_name" type="text" 
                                           value="{{ old('company_name') }}"
                                           class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm @error('company_name') border-red-300 @enderror">
                                </div>
                                @error('company_name')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="address" class="block text-sm font-medium text-gray-700">
                                    Address (Optional)
                                </label>
                                <div class="mt-1">
                                    <textarea id="address" name="address" rows="3" 
                                              class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm @error('address') border-red-300 @enderror">{{ old('address') }}</textarea>
                                </div>
                                @error('address')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="tax_id" class="block text-sm font-medium text-gray-700">
                                    Tax ID (Optional)
                                </label>
                                <div class="mt-1">
                                    <input id="tax_id" name="tax_id" type="text" 
                                           value="{{ old('tax_id') }}"
                                           class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm @error('tax_id') border-red-300 @enderror">
                                </div>
                                @error('tax_id')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 flex justify-between">
                        <button type="button" onclick="prevStep(2, 1)" class="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
                            Back
                        </button>
                        <button type="button" onclick="nextStep(2, 3)" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
                            Continue to Credentials
                        </button>
                    </div>
                </div>

                <!-- Step 3: Credentials -->
 <div class="step-content hidden" data-step="3">
    <div class="mb-6">
        <h3 class="text-lg font-medium text-gray-900">Create Secure Credentials</h3>
        <p class="mt-1 text-sm text-gray-600">
            Set up your password to complete your account registration
        </p>
    </div>

    <!-- Security Assurance Card -->
    <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h4 class="text-sm font-medium text-blue-800">Your Security is Our Priority</h4>
                <div class="mt-2 text-sm text-blue-700 space-y-1">
                    <p class="flex items-start">
                        <svg class="flex-shrink-0 h-4 w-4 mt-0.5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                        <span class="ml-2">We use bank-level encryption for all data</span>
                    </p>
                    <p class="flex items-start">
                        <svg class="flex-shrink-0 h-4 w-4 mt-0.5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                        <span class="ml-2">Payment details are processed securely by Flutterwave</span>
                    </p>
                    <p class="flex items-start">
                        <svg class="flex-shrink-0 h-4 w-4 mt-0.5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                        <span class="ml-2">We never store your card or bank details in our systems</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Password Fields -->
    <div class="space-y-4">
        <div>
            <label for="password" class="block text-sm font-medium text-gray-700">
                Create Password *
            </label>
            <div class="mt-1 relative">
                <input id="password" name="password" type="password" required 
                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm @error('password') border-red-300 @enderror"
                       placeholder="At least 8 characters">
                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                    </svg>
                </div>
            </div>
            @error('password')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="password_confirmation" class="block text-sm font-medium text-gray-700">
                Confirm Password *
            </label>
            <div class="mt-1 relative">
                <input id="password_confirmation" name="password_confirmation" type="password" required 
                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm"
                       placeholder="Re-enter your password">
                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Notice (shown only for paid packages) -->
    <div id="payment-info-message" class="hidden mt-6 p-4 bg-orange-50 border-l-4 border-orange-400 rounded">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm text-orange-700">
                    <span class="font-medium">Payment Notice:</span> After account creation, you'll be securely redirected to Flutterwave to complete your payment. This ensures your financial details are handled with the highest security standards.
                </p>
            </div>
        </div>
    </div>

    <!-- Navigation Buttons -->
    <div class="mt-6 flex justify-between space-x-4">
        <button type="button" onclick="prevStep(3, 2)" class="w-1/3 py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
            Back
        </button>
        <button type="submit" 
                class="w-2/3 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 disabled:opacity-50 disabled:cursor-not-allowed"
                id="submitBtn">
            <span id="submitText">Complete Registration</span>
        </button>
    </div>
</div>
            </form>

            {{-- Login Link --}}
            <div class="text-center pt-4">
                <div id="selected-package-info" class="mb-4 hidden">
                    <h4 class="text-sm font-medium text-gray-900">Selected Package:</h4>
                    <div class="mt-2 p-3 bg-gray-50 rounded-md">
                        <span id="package-name" class="block text-sm font-medium text-orange-600"></span>
                        <span id="package-price" class="block text-lg font-bold text-gray-900 mt-1"></span>
                        <div id="package-features" class="mt-2 text-sm text-gray-600"></div>
                    </div>
                </div>
                <span class="text-sm text-gray-600">
                    Already have an account? 
                    <a href=" {{ route('filament.admin.auth.login') }}" class="font-medium text-orange-600 hover:text-orange-500">
                        Sign in
                    </a>
                </span>
            </div>
        </div>
    </div>
</div>

<style>

/* Add to your existing styles */
input:invalid, select:invalid {
    border-color: #f56565 !important;
}

.error-message {
    color: #f56565;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.package-radio-input:checked + .package-option {
    border-color: #4f46e5;
    background-color: #f5f7ff;
    box-shadow: 0 0 0 1px #4f46e5;
}

.package-radio-input:checked + .package-option .package-radio-indicator {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

.package-radio-input:checked + .package-option .package-name {
    color: #4f46e5;
}

.package-radio-input:checked + .package-option .package-features div {
    color: #4f46e5;
}

.package-radio-input:checked + .package-option .package-features svg {
    color: #4f46e5;
}
</style>

<script>

document.addEventListener('DOMContentLoaded', function() {
    // Package selection logic remains the same
    const packageRadios = document.querySelectorAll('.package-radio-input');
    
    packageRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            // Update submit button text based on selected package
            const packagePrice = this.closest('.package-option').querySelector('.package-price').textContent;
            const submitText = document.getElementById('submitText');
            
            if (packagePrice.includes('0') && packagePrice.includes('UGX') && packagePrice.match(/^[^1-9]*0/)) {
                submitText.textContent = 'Create Account';
            } else {
                submitText.textContent = 'Proceed to Payment';
            }
        });
    });
});
// Step navigation functions
function nextStep(current, next) {
    // Validate current step before proceeding
    if (!validateStep(current)) {
        return;
    }
    
    document.querySelector(`.step-content[data-step="${current}"]`).classList.add('hidden');
    document.querySelector(`.step-content[data-step="${next}"]`).classList.remove('hidden');
    
    // Update progress steps
    document.querySelector(`.step[data-step="${current}"] div`).classList.remove('bg-orange-600', 'text-white');
    document.querySelector(`.step[data-step="${current}"] div`).classList.add('border-gray-300', 'text-gray-500');
    document.querySelector(`.step[data-step="${current}"] span`).classList.remove('text-orange-600');
    document.querySelector(`.step[data-step="${current}"] span`).classList.add('text-gray-500');
    
    document.querySelector(`.step[data-step="${next}"] div`).classList.remove('border-gray-300', 'text-gray-500');
    document.querySelector(`.step[data-step="${next}"] div`).classList.add('bg-orange-600', 'text-white');
    document.querySelector(`.step[data-step="${next}"] span`).classList.remove('text-gray-500');
    document.querySelector(`.step[data-step="${next}"] span`).classList.add('text-orange-600');
}

function prevStep(current, prev) {
    // No validation needed when going back
    document.querySelector(`.step-content[data-step="${current}"]`).classList.add('hidden');
    document.querySelector(`.step-content[data-step="${prev}"]`).classList.remove('hidden');
    
    // Update progress steps
    document.querySelector(`.step[data-step="${current}"] div`).classList.remove('bg-orange-600', 'text-white');
    document.querySelector(`.step[data-step="${current}"] div`).classList.add('border-gray-300', 'text-gray-500');
    document.querySelector(`.step[data-step="${current}"] span`).classList.remove('text-orange-600');
    document.querySelector(`.step[data-step="${current}"] span`).classList.add('text-gray-500');
    
    document.querySelector(`.step[data-step="${prev}"] div`).classList.remove('border-gray-300', 'text-gray-500');
    document.querySelector(`.step[data-step="${prev}"] div`).classList.add('bg-orange-600', 'text-white');
    document.querySelector(`.step[data-step="${prev}"] span`).classList.remove('text-gray-500');
    document.querySelector(`.step[data-step="${prev}"] span`).classList.add('text-orange-600');
}


function validateStep(stepNumber) {
    let isValid = true;
    
    if (stepNumber === 1) {
        // Validate Step 1: Personal Information
        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const mobile = document.getElementById('mobile').value.trim();
        
        if (!name) {
            showError('name', 'Full name is required');
            isValid = false;
        }
        
        if (!email) {
            showError('email', 'Email is required');
            isValid = false;
        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            showError('email', 'Please enter a valid email address');
            isValid = false;
        }
        
        if (!mobile) {
            showError('mobile', 'Mobile number is required');
            isValid = false;
        } else if (!/^\+?\d{10,15}$/.test(mobile)) {
            showError('mobile', 'Please enter a valid mobile number');
            isValid = false;
        }
    } else if (stepNumber === 2) {
        // Validate Step 2: Account Type
        const userType = document.getElementById('user_type').value;
        
        if (!userType) {
            showError('user_type', 'Account type is required');
            isValid = false;
        }
        
        // Only validate package if user is owner or manager
        if (userType === 'property_owner' || userType === 'property_manager') {
            const packageSelected = document.querySelector('input[name="package_id"]:checked');
            if (!packageSelected) {
                showError('package_id', 'Please select a package');
                isValid = false;
            }
        }
    }
    
    return isValid;
}

function showError(fieldId, message) {
    // Remove any existing error messages
    const existingError = document.querySelector(`.error-${fieldId}`);
    if (existingError) {
        existingError.remove();
    }
    
    // Create error message element
    const errorElement = document.createElement('p');
    errorElement.className = `mt-2 text-sm text-red-600 error-${fieldId}`;
    errorElement.textContent = message;
    
    // Insert after the field
    const field = document.getElementById(fieldId);
    if (field) {
        field.closest('div').appendChild(errorElement);
    } else {
        // For radio/checkbox groups, insert after the container
        const container = document.querySelector(`input[name="${fieldId}"]`)?.closest('div');
        if (container) {
            container.appendChild(errorElement);
        }
    }
    
    // Scroll to the first error
    if (isValid === false) {
        const firstError = document.querySelector('.text-red-600');
        if (firstError) {
            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const userTypeSelect = document.getElementById('user_type');
    const packageSelection = document.getElementById('package-selection');
    const submitBtn = document.getElementById('submitBtn');
    const submitText = document.getElementById('submitText');
    const loadingText = document.getElementById('loadingText');
    const form = document.getElementById('registrationForm');

    // Show/hide package selection based on user type
    userTypeSelect.addEventListener('change', function() {
        const userType = this.value;
        
        if (userType === 'property_owner' || userType === 'property_manager') {
            packageSelection.classList.remove('hidden');
            // Make package selection required
            document.querySelectorAll('input[name="package_id"]').forEach(input => {
                input.required = true;
            });
        } else {
            packageSelection.classList.add('hidden');
            // Remove package selection requirement
            document.querySelectorAll('input[name="package_id"]').forEach(input => {
                input.required = false;
                input.checked = false;
            });
            // Remove selected styling
            document.querySelectorAll('.package-option').forEach(option => {
                option.classList.remove('selected');
            });
        }
    });

    // Handle package selection styling
    document.querySelectorAll('input[name="package_id"]').forEach(input => {
        input.addEventListener('change', function() {
            // Remove selected class from all options
            document.querySelectorAll('.package-option').forEach(option => {
                option.classList.remove('selected');
            });
            
            // Add selected class to chosen option
            if (this.checked) {
                this.closest('.package-option').classList.add('selected');
                
                // Update submit button text for paid packages
                const packagePrice = this.closest('label').querySelector('.text-orange-600').textContent;
                if (packagePrice.includes('0') && packagePrice.includes('UGX') && packagePrice.match(/^[^1-9]*0/)) {
                    submitText.textContent = 'Create Account';
                } else {
                    submitText.textContent = 'Proceed to Payment';
                }
            }
        });
    });

    // Handle form submission
    form.addEventListener('submit', function() {
        submitBtn.disabled = true;
        submitText.classList.add('hidden');
        loadingText.classList.remove('hidden');
    });

    // Initialize based on old input
    if (userTypeSelect.value === 'property_owner' || userTypeSelect.value === 'property_manager') {
        packageSelection.classList.remove('hidden');
    }

    // Mark selected package if exists
    const selectedPackage = document.querySelector('input[name="package_id"]:checked');
    if (selectedPackage) {
        selectedPackage.closest('.package-option').classList.add('selected');
    }
});
</script>
@endsection