@extends('layouts.app')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl w-full space-y-8">
        <!-- Logo/Brand Section -->
        <div class="text-center">
            <div class="mx-auto h-16 w-16 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg mb-4">
                <svg class="h-10 w-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
                </svg>
            </div>
            <h1 class="text-3xl font-extrabold bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
                Get Started
            </h1>
            <p class="mt-2 text-sm text-gray-600">Create your account to continue</p>
        </div>

        <!-- Registration Card -->
        <div class="bg-white rounded-2xl shadow-2xl p-8 border border-gray-100 backdrop-blur-sm">
            <form class="space-y-6" action="{{ route('register') }}" method="POST" id="registerForm">
                @csrf
                <input type="hidden" name="registration_type" id="hidden_registration_type" value="{{ old('registration_type', 'company') }}">
            
            <form class="space-y-6" action="{{ route('register') }}" method="POST" id="registerForm">
                @csrf
                <input type="hidden" name="registration_type" id="hidden_registration_type" value="{{ old('registration_type', 'company') }}">
                
                <!-- Registration Type Selection -->
                <div class="space-y-4" id="accountTypeSection">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-3">
                            Select Registration Type
                        </label>
                        <div class="grid grid-cols-2 gap-3">
                            <label class="relative flex cursor-pointer rounded-xl border-2 p-4 transition-all duration-200 hover:shadow-md group {{ old('registration_type') == 'company' || !old('registration_type') ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-blue-300' }}" id="companyTypeLabel">
                                <input type="radio" name="registration_type" value="company" class="sr-only" {{ old('registration_type') == 'company' || !old('registration_type') ? 'checked' : '' }} onchange="handleRegistrationTypeChange(this.value)">
                                <div class="flex flex-1 items-center justify-between">
                                    <div class="flex flex-col">
                                        <span class="block text-sm font-semibold text-gray-900">Register Company</span>
                                        <span class="mt-1 text-xs text-gray-500">Create a new company</span>
                                    </div>
                                    <svg class="h-5 w-5 text-blue-600 {{ old('registration_type') == 'company' || !old('registration_type') ? '' : 'hidden' }}" id="companyCheckIcon" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </label>
                            <label class="relative flex cursor-pointer rounded-xl border-2 p-4 transition-all duration-200 hover:shadow-md group {{ old('registration_type') == 'tenant' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-blue-300' }}" id="tenantTypeLabel">
                                <input type="radio" name="registration_type" value="tenant" class="sr-only" {{ old('registration_type') == 'tenant' ? 'checked' : '' }} onchange="handleRegistrationTypeChange(this.value)">
                                <div class="flex flex-1 items-center justify-between">
                                    <div class="flex flex-col">
                                        <span class="block text-sm font-semibold text-gray-900">Register as Tenant</span>
                                        <span class="mt-1 text-xs text-gray-500">Join existing company</span>
                                    </div>
                                    <svg class="h-5 w-5 text-blue-600 {{ old('registration_type') == 'tenant' ? '' : 'hidden' }}" id="tenantCheckIcon" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </label>
                        </div>
                        @error('registration_type')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>

                <!-- Company Registration Form -->
                <div id="companyRegistrationForm" class="transition-all duration-300" style="display: {{ old('registration_type') == 'tenant' ? 'none' : 'block' }};">
                    <div class="bg-gradient-to-br from-gray-50 to-blue-50/30 rounded-xl p-6 space-y-4 border border-gray-200 shadow-sm">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <div class="p-2 bg-blue-100 rounded-lg mr-3">
                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                </svg>
                            </div>
                            Company Information
                        </h3>
                    <div>
                        <label for="company_name" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.company_name') ?? 'Company Name' }}</label>
                        <input id="company_name" name="company_name" type="text" required 
                            class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400" 
                            value="{{ old('company_name') }}" placeholder="{{ __('messages.company_name') ?? 'Enter company name' }}">
                        @error('company_name')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label for="company_email" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.email') ?? 'Company Email' }}</label>
                        <input id="company_email" name="company_email" type="email" required 
                            class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400" 
                            value="{{ old('company_email') }}" placeholder="{{ __('messages.email') ?? 'Enter company email' }}">
                        @error('company_email')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label for="company_phone" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.phone') ?? 'Company Phone' }}</label>
                        <input id="company_phone" name="company_phone" type="text" 
                            class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400" 
                            value="{{ old('company_phone') }}" placeholder="{{ __('messages.phone') ?? 'Enter company phone' }}">
                    </div>
                    <div>
                        <label for="subscription_plan_id" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.plan') ?? 'Subscription Plan' }}</label>
                        <select id="subscription_plan_id" name="subscription_plan_id"
                            class="appearance-none relative block w-full px-4 py-3 border border-gray-300 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 bg-white shadow-sm hover:border-gray-400">
                            <option value="">Select a plan</option>
                            @foreach($plans as $plan)
                                <option value="{{ $plan->id }}" {{ old('subscription_plan_id') == $plan->id ? 'selected' : '' }}>{{ $plan->name }} - {{ number_format($plan->price) }} {{ $plan->currency }}/{{ $plan->interval }}</option>
                            @endforeach
                        </select>
                        @error('subscription_plan_id')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    </div>

                    <div class="bg-gradient-to-br from-gray-50 to-blue-50/30 rounded-xl p-6 space-y-4 border border-gray-200 shadow-sm mt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <div class="p-2 bg-blue-100 rounded-lg mr-3">
                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                </svg>
                            </div>
                            Admin Account
                        </h3>
                    <div>
                        <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.name') ?? 'Full Name' }}</label>
                        <input id="name" name="name" type="text" required 
                            class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400" 
                            value="{{ old('name') }}" placeholder="{{ __('messages.name') ?? 'Enter your full name' }}">
                        @error('name')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.email') ?? 'Email Address' }}</label>
                        <input id="email" name="email" type="email" required 
                            class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400" 
                            value="{{ old('email') }}" placeholder="{{ __('messages.email') ?? 'Enter your email' }}">
                        @error('email')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.password') ?? 'Password' }}</label>
                        <input id="password" name="password" type="password" required 
                            class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400" 
                            placeholder="{{ __('messages.password') ?? 'Enter your password' }}">
                        @error('password')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    <div>
                        <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.confirm_password') ?? 'Confirm Password' }}</label>
                        <input id="password_confirmation" name="password_confirmation" type="password" required 
                            class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400" 
                            placeholder="{{ __('messages.confirm_password') ?? 'Confirm your password' }}">
                    </div>
                </div>
                </div>

                <!-- Tenant Registration Form -->
                <div id="tenantRegistrationForm" class="transition-all duration-300" style="display: {{ old('registration_type') == 'tenant' ? 'block' : 'none' }};">
                    <div class="bg-gradient-to-br from-gray-50 to-blue-50/30 rounded-xl p-6 space-y-4 border border-gray-200 shadow-sm">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <div class="p-2 bg-blue-100 rounded-lg mr-3">
                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                </svg>
                            </div>
                            Company Selection
                        </h3>
                        <div>
                            <label for="tenant_company_id" class="block text-sm font-semibold text-gray-700 mb-2">Select Company <span class="text-red-500">*</span></label>
                            <select id="tenant_company_id" name="tenant_company_id" required
                                class="appearance-none relative block w-full px-4 py-3 border border-gray-300 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 bg-white shadow-sm hover:border-gray-400">
                                <option value="">-- Select Company --</option>
                                @foreach($companies as $company)
                                    <option value="{{ $company->id }}" {{ old('tenant_company_id') == $company->id ? 'selected' : '' }}>
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('tenant_company_id')
                                <p class="mt-2 text-sm text-red-600 flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                    </div>

                    <div class="bg-gradient-to-br from-gray-50 to-blue-50/30 rounded-xl p-6 space-y-4 border border-gray-200 shadow-sm mt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <div class="p-2 bg-blue-100 rounded-lg mr-3">
                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                </svg>
                            </div>
                            Tenant Information
                        </h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label for="tenant_first_name" class="block text-sm font-semibold text-gray-700 mb-2">First Name <span class="text-red-500">*</span></label>
                                <input id="tenant_first_name" name="tenant_first_name" type="text" required
                                    class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400"
                                    value="{{ old('tenant_first_name') }}" placeholder="First Name">
                                @error('tenant_first_name')
                                    <p class="mt-2 text-sm text-red-600 flex items-center">
                                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                        {{ $message }}
                                    </p>
                                @enderror
                            </div>
                            <div>
                                <label for="tenant_last_name" class="block text-sm font-semibold text-gray-700 mb-2">Last Name <span class="text-red-500">*</span></label>
                                <input id="tenant_last_name" name="tenant_last_name" type="text" required
                                    class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400"
                                    value="{{ old('tenant_last_name') }}" placeholder="Last Name">
                                @error('tenant_last_name')
                                    <p class="mt-2 text-sm text-red-600 flex items-center">
                                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                        {{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <label for="tenant_phone" class="block text-sm font-semibold text-gray-700 mb-2">Phone <span class="text-red-500">*</span></label>
                            <input id="tenant_phone" name="tenant_phone" type="text" required
                                class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400"
                                value="{{ old('tenant_phone') }}" placeholder="Phone Number">
                            @error('tenant_phone')
                                <p class="mt-2 text-sm text-red-600 flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                        <div>
                            <label for="tenant_id_number" class="block text-sm font-semibold text-gray-700 mb-2">ID Number (Optional)</label>
                            <input id="tenant_id_number" name="tenant_id_number" type="text"
                                class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400"
                                value="{{ old('tenant_id_number') }}" placeholder="ID Number">
                            @error('tenant_id_number')
                                <p class="mt-2 text-sm text-red-600 flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                    </div>

                    <div class="bg-gradient-to-br from-gray-50 to-blue-50/30 rounded-xl p-6 space-y-4 border border-gray-200 shadow-sm mt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <div class="p-2 bg-blue-100 rounded-lg mr-3">
                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                </svg>
                            </div>
                            Account Credentials
                        </h3>
                        <div>
                            <label for="tenant_email" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.email') ?? 'Email Address' }} <span class="text-red-500">*</span></label>
                            <input id="tenant_email" name="tenant_email" type="email" required
                                class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400"
                                value="{{ old('tenant_email') }}" placeholder="{{ __('messages.email') ?? 'Enter your email' }}">
                            @error('tenant_email')
                                <p class="mt-2 text-sm text-red-600 flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                        <div>
                            <label for="tenant_password" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.password') ?? 'Password' }} <span class="text-red-500">*</span></label>
                            <input id="tenant_password" name="tenant_password" type="password" required
                                class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400"
                                placeholder="{{ __('messages.password') ?? 'Enter your password' }}">
                            @error('tenant_password')
                                <p class="mt-2 text-sm text-red-600 flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                        <div>
                            <label for="tenant_password_confirmation" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('messages.confirm_password') ?? 'Confirm Password' }} <span class="text-red-500">*</span></label>
                            <input id="tenant_password_confirmation" name="tenant_password_confirmation" type="password" required
                                class="appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400"
                                placeholder="{{ __('messages.confirm_password') ?? 'Confirm your password' }}">
                        </div>
                    </div>
                </div>

            <!-- Submit Button -->
            <div class="pt-4">
                <button type="submit" 
                    class="group relative w-full flex justify-center items-center py-3.5 px-4 border border-transparent text-base font-semibold rounded-xl text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                    <span class="absolute left-0 inset-y-0 flex items-center pl-4">
                        <svg class="h-5 w-5 text-blue-200 group-hover:text-white transition duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                        </svg>
                    </span>
                    {{ __('messages.register') ?? 'Create Account' }}
                </button>
            </div>

            <!-- Login Link -->
            <div class="text-center pt-6 border-t border-gray-200">
                <p class="text-sm text-gray-600 mb-3">Already have an account?</p>
                <a href="{{ route('login') }}" 
                    class="inline-flex items-center justify-center w-full py-3 px-4 border-2 border-blue-600 text-base font-semibold rounded-xl text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm hover:shadow-md">
                    {{ __('messages.login') ?? 'Sign In' }}
                </a>
            </div>
        </form>
    </div>
</div>

<script>
function handleRegistrationTypeChange(value) {
    const registrationType = value || document.querySelector('input[name="registration_type"]:checked')?.value;
    const hiddenInput = document.getElementById('hidden_registration_type');
    if (hiddenInput && registrationType) {
        hiddenInput.value = registrationType;
    }
    const companyForm = document.getElementById('companyRegistrationForm');
    const tenantForm = document.getElementById('tenantRegistrationForm');
    const companyLabel = document.getElementById('companyTypeLabel');
    const tenantLabel = document.getElementById('tenantTypeLabel');
    const companyCheck = document.getElementById('companyCheckIcon');
    const tenantCheck = document.getElementById('tenantCheckIcon');
    
    if (!registrationType) return;
    
    // Update visual selection
    if (registrationType === 'company') {
        if (companyLabel) {
            companyLabel.classList.add('border-blue-500', 'bg-blue-50');
            companyLabel.classList.remove('border-gray-200');
        }
        if (companyCheck) companyCheck.classList.remove('hidden');
        if (tenantLabel) {
            tenantLabel.classList.remove('border-blue-500', 'bg-blue-50');
            tenantLabel.classList.add('border-gray-200');
        }
        if (tenantCheck) tenantCheck.classList.add('hidden');
        if (companyForm) companyForm.style.display = 'block';
        if (tenantForm) tenantForm.style.display = 'none';
        
        // Make company fields required
        const companyName = document.getElementById('company_name');
        const companyEmail = document.getElementById('company_email');
        const subscriptionPlan = document.getElementById('subscription_plan_id');
        if (companyName) companyName.setAttribute('required', 'required');
        if (companyEmail) companyEmail.setAttribute('required', 'required');
        if (subscriptionPlan) subscriptionPlan.setAttribute('required', 'required');
        
        // Remove required from tenant fields (they're hidden anyway, but just to be safe)
        const tenantCompanyId = document.getElementById('tenant_company_id');
        const tenantFirstName = document.getElementById('tenant_first_name');
        const tenantLastName = document.getElementById('tenant_last_name');
        const tenantEmail = document.getElementById('tenant_email');
        const tenantPassword = document.getElementById('tenant_password');
        const tenantPasswordConfirmation = document.getElementById('tenant_password_confirmation');
        const tenantPhone = document.getElementById('tenant_phone');
        if (tenantCompanyId) tenantCompanyId.removeAttribute('required');
        if (tenantFirstName) tenantFirstName.removeAttribute('required');
        if (tenantLastName) tenantLastName.removeAttribute('required');
        if (tenantEmail) tenantEmail.removeAttribute('required');
        if (tenantPassword) tenantPassword.removeAttribute('required');
        if (tenantPasswordConfirmation) tenantPasswordConfirmation.removeAttribute('required');
        if (tenantPhone) tenantPhone.removeAttribute('required');
    } else if (registrationType === 'tenant') {
        if (tenantLabel) {
            tenantLabel.classList.add('border-blue-500', 'bg-blue-50');
            tenantLabel.classList.remove('border-gray-200');
        }
        if (tenantCheck) tenantCheck.classList.remove('hidden');
        if (companyLabel) {
            companyLabel.classList.remove('border-blue-500', 'bg-blue-50');
            companyLabel.classList.add('border-gray-200');
        }
        if (companyCheck) companyCheck.classList.add('hidden');
        if (companyForm) companyForm.style.display = 'none';
        if (tenantForm) tenantForm.style.display = 'block';
        
        // Make tenant fields required (they should already have required, but ensure they do)
        const tenantCompanyId = document.getElementById('tenant_company_id');
        const tenantFirstName = document.getElementById('tenant_first_name');
        const tenantLastName = document.getElementById('tenant_last_name');
        const tenantEmail = document.getElementById('tenant_email');
        const tenantPassword = document.getElementById('tenant_password');
        const tenantPasswordConfirmation = document.getElementById('tenant_password_confirmation');
        const tenantPhone = document.getElementById('tenant_phone');
        if (tenantCompanyId) tenantCompanyId.setAttribute('required', 'required');
        if (tenantFirstName) tenantFirstName.setAttribute('required', 'required');
        if (tenantLastName) tenantLastName.setAttribute('required', 'required');
        if (tenantEmail) tenantEmail.setAttribute('required', 'required');
        if (tenantPassword) tenantPassword.setAttribute('required', 'required');
        if (tenantPasswordConfirmation) tenantPasswordConfirmation.setAttribute('required', 'required');
        if (tenantPhone) tenantPhone.setAttribute('required', 'required');
        
        // Remove required from company fields
        const companyName = document.getElementById('company_name');
        const companyEmail = document.getElementById('company_email');
        const subscriptionPlan = document.getElementById('subscription_plan_id');
        const name = document.getElementById('name');
        const email = document.getElementById('email');
        const password = document.getElementById('password');
        const passwordConfirmation = document.getElementById('password_confirmation');
        if (companyName) companyName.removeAttribute('required');
        if (companyEmail) companyEmail.removeAttribute('required');
        if (subscriptionPlan) subscriptionPlan.removeAttribute('required');
        if (name) name.removeAttribute('required');
        if (email) email.removeAttribute('required');
        if (password) password.removeAttribute('required');
        if (passwordConfirmation) passwordConfirmation.removeAttribute('required');
    }
}

// Add form submission handler to ensure registration_type is always sent
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('registerForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            const registrationType = document.querySelector('input[name="registration_type"]:checked')?.value;
            const hiddenInput = document.getElementById('hidden_registration_type');
            
            if (!registrationType) {
                e.preventDefault();
                alert('Please select a registration type (Company or Tenant)');
                return false;
            }
            
            // Ensure hidden input has the value
            if (hiddenInput) {
                hiddenInput.value = registrationType;
            }
            
            // Remove required from hidden form fields before submission to prevent validation errors
            const companyForm = document.getElementById('companyRegistrationForm');
            const tenantForm = document.getElementById('tenantRegistrationForm');
            
            if (registrationType === 'company' && tenantForm) {
                // Hide tenant form and remove required attributes
                tenantForm.style.display = 'none';
                const tenantInputs = tenantForm.querySelectorAll('input[required], select[required]');
                tenantInputs.forEach(input => {
                    input.removeAttribute('required');
                    input.setAttribute('data-was-required', 'true');
                });
            } else if (registrationType === 'tenant' && companyForm) {
                // Hide company form and remove required attributes
                companyForm.style.display = 'none';
                const companyInputs = companyForm.querySelectorAll('input[required], select[required]');
                companyInputs.forEach(input => {
                    input.removeAttribute('required');
                    input.setAttribute('data-was-required', 'true');
                });
            }
        });
    }
    
    // Initialize on page load
    handleRegistrationTypeChange();
    
    // Set initial border styles
    const registrationType = document.querySelector('input[name="registration_type"]:checked')?.value;
    if (registrationType === 'company') {
        const companyLabel = document.getElementById('companyTypeLabel');
        const companyCheck = document.getElementById('companyCheckIcon');
        if (companyLabel) companyLabel.classList.add('border-blue-500', 'bg-blue-50');
        if (companyCheck) companyCheck.classList.remove('hidden');
    } else if (registrationType === 'tenant') {
        const tenantLabel = document.getElementById('tenantTypeLabel');
        const tenantCheck = document.getElementById('tenantCheckIcon');
        if (tenantLabel) tenantLabel.classList.add('border-blue-500', 'bg-blue-50');
        if (tenantCheck) tenantCheck.classList.remove('hidden');
    }
});
</script>
@endsection