<x-guest-layout>
    @section('pageTitle', 'Înregistrare')

    <!-- Header -->
    <div class="text-center mb-6">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-green-500 to-teal-600 mb-4 shadow-lg">
            <i class="fas fa-user-plus text-white text-2xl"></i>
        </div>
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Creează un cont nou</h2>
        <p class="mt-2 text-gray-500 dark:text-gray-400">Înregistrează-te pentru a începe</p>
    </div>

    <form method="POST" action="{{ route('register') }}" x-data="{ userType: '{{ old('user_type', 'individual') }}', showPassword: false }">
        @csrf

        <!-- Tip Utilizator - Tabs moderne -->
        <div class="mb-6">
            <div class="flex rounded-xl bg-gray-100 dark:bg-gray-700 p-1">
                <button type="button"
                        @click="userType = 'individual'"
                        :class="userType === 'individual'
                            ? 'bg-white dark:bg-gray-600 text-blue-600 dark:text-blue-400 shadow-sm'
                            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                        class="flex-1 py-2.5 px-4 text-center font-medium text-sm rounded-lg transition-all duration-200">
                    <i class="fas fa-user mr-2"></i>
                    Persoană fizică
                </button>
                <button type="button"
                        @click="userType = 'company'"
                        :class="userType === 'company'
                            ? 'bg-white dark:bg-gray-600 text-blue-600 dark:text-blue-400 shadow-sm'
                            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                        class="flex-1 py-2.5 px-4 text-center font-medium text-sm rounded-lg transition-all duration-200">
                    <i class="fas fa-building mr-2"></i>
                    Persoană juridică
                </button>
            </div>
            <input type="hidden" name="user_type" :value="userType">
            <x-input-error :messages="$errors->get('user_type')" class="mt-2" />
        </div>

        <!-- Informații Personale -->
        <div class="mb-6">
            <h3 class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">
                <i class="fas fa-id-card text-blue-500"></i>
                Informații personale
            </h3>

            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-3">
                    <!-- Nume -->
                    <div>
                        <label for="last_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nume *</label>
                        <input id="last_name"
                               type="text"
                               name="last_name"
                               value="{{ old('last_name') }}"
                               required
                               autofocus
                               placeholder="Popescu"
                               class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                        <x-input-error :messages="$errors->get('last_name')" class="mt-1" />
                    </div>

                    <!-- Prenume -->
                    <div>
                        <label for="first_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Prenume *</label>
                        <input id="first_name"
                               type="text"
                               name="first_name"
                               value="{{ old('first_name') }}"
                               required
                               placeholder="Ion"
                               class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                        <x-input-error :messages="$errors->get('first_name')" class="mt-1" />
                    </div>
                </div>

                <!-- Email -->
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        <i class="fas fa-envelope text-gray-400 mr-1"></i>Email *
                    </label>
                    <input id="email"
                           type="email"
                           name="email"
                           value="{{ old('email') }}"
                           required
                           autocomplete="username"
                           placeholder="email@exemplu.ro"
                           class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                    <x-input-error :messages="$errors->get('email')" class="mt-1" />
                </div>

                <!-- Telefon -->
                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        <i class="fas fa-phone text-gray-400 mr-1"></i>Telefon *
                    </label>
                    <input id="phone"
                           type="tel"
                           name="phone"
                           value="{{ old('phone') }}"
                           required
                           placeholder="+40 7XX XXX XXX"
                           class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                    <x-input-error :messages="$errors->get('phone')" class="mt-1" />
                </div>

                <!-- Parole -->
                <div class="grid grid-cols-2 gap-3">
                    <!-- Password -->
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            <i class="fas fa-lock text-gray-400 mr-1"></i>Parola *
                        </label>
                        <div class="relative">
                            <input id="password"
                                   :type="showPassword ? 'text' : 'password'"
                                   name="password"
                                   required
                                   autocomplete="new-password"
                                   placeholder="••••••••"
                                   class="input-focus-animation w-full px-3 py-2.5 pr-10 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                            <button type="button"
                                    @click="showPassword = !showPassword"
                                    class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" class="text-sm"></i>
                            </button>
                        </div>
                        <x-input-error :messages="$errors->get('password')" class="mt-1" />
                    </div>

                    <!-- Confirm Password -->
                    <div>
                        <label for="password_confirmation" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirmă *</label>
                        <input id="password_confirmation"
                               :type="showPassword ? 'text' : 'password'"
                               name="password_confirmation"
                               required
                               autocomplete="new-password"
                               placeholder="••••••••"
                               class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                        <x-input-error :messages="$errors->get('password_confirmation')" class="mt-1" />
                    </div>
                </div>
            </div>
        </div>

        <!-- Informații Companie (doar pentru persoană juridică) -->
        <div x-show="userType === 'company'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="mb-6">
            <h3 class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">
                <i class="fas fa-building text-purple-500"></i>
                Informații companie
            </h3>

            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-3">
                    <!-- CUI -->
                    <div>
                        <label for="company_cui" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">CUI *</label>
                        <input id="company_cui"
                               type="text"
                               name="company_cui"
                               value="{{ old('company_cui') }}"
                               placeholder="RO12345678"
                               class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                        <x-input-error :messages="$errors->get('company_cui')" class="mt-1" />
                    </div>

                    <!-- Nume Societate -->
                    <div>
                        <label for="company_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nume Societate *</label>
                        <input id="company_name"
                               type="text"
                               name="company_name"
                               value="{{ old('company_name') }}"
                               placeholder="S.C. Exemplu S.R.L."
                               class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                        <x-input-error :messages="$errors->get('company_name')" class="mt-1" />
                    </div>
                </div>

                <!-- Reg Com -->
                <div>
                    <label for="company_reg_com" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Registrul Comerțului *</label>
                    <input id="company_reg_com"
                           type="text"
                           name="company_reg_com"
                           value="{{ old('company_reg_com') }}"
                           placeholder="J40/1234/2020"
                           class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                    <x-input-error :messages="$errors->get('company_reg_com')" class="mt-1" />
                </div>

                <!-- Adresa -->
                <div class="grid grid-cols-3 gap-3">
                    <div class="col-span-2">
                        <label for="company_address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Adresa *</label>
                        <input id="company_address"
                               type="text"
                               name="company_address"
                               value="{{ old('company_address') }}"
                               placeholder="Str. Exemplu"
                               class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                        <x-input-error :messages="$errors->get('company_address')" class="mt-1" />
                    </div>
                    <div>
                        <label for="company_number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nr. *</label>
                        <input id="company_number"
                               type="text"
                               name="company_number"
                               value="{{ old('company_number') }}"
                               placeholder="123"
                               class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                        <x-input-error :messages="$errors->get('company_number')" class="mt-1" />
                    </div>
                </div>

                <!-- Oras, Judet, Cod Postal -->
                <div class="grid grid-cols-3 gap-3">
                    <div>
                        <label for="company_city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Oraș *</label>
                        <input id="company_city"
                               type="text"
                               name="company_city"
                               value="{{ old('company_city') }}"
                               placeholder="București"
                               class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                        <x-input-error :messages="$errors->get('company_city')" class="mt-1" />
                    </div>
                    <div>
                        <label for="company_county" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Județ *</label>
                        <input id="company_county"
                               type="text"
                               name="company_county"
                               value="{{ old('company_county') }}"
                               placeholder="București"
                               class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                        <x-input-error :messages="$errors->get('company_county')" class="mt-1" />
                    </div>
                    <div>
                        <label for="company_postal_code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cod Poștal *</label>
                        <input id="company_postal_code"
                               type="text"
                               name="company_postal_code"
                               value="{{ old('company_postal_code') }}"
                               placeholder="010101"
                               class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                        <x-input-error :messages="$errors->get('company_postal_code')" class="mt-1" />
                    </div>
                </div>

                <!-- Tara -->
                <div>
                    <label for="company_country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Țara *</label>
                    <input id="company_country"
                           type="text"
                           name="company_country"
                           value="{{ old('company_country', 'Romania') }}"
                           class="input-focus-animation w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
                    <x-input-error :messages="$errors->get('company_country')" class="mt-1" />
                </div>
            </div>
        </div>

        <!-- Terms and Conditions -->
        <div class="mb-5">
            <label class="flex items-start cursor-pointer group">
                <input type="checkbox"
                       name="terms_accepted"
                       value="1"
                       {{ old('terms_accepted') ? 'checked' : '' }}
                       required
                       class="w-4 h-4 mt-0.5 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-700">
                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-200">
                    Accept <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">termenii și condițiile</a>
                </span>
            </label>
            <x-input-error :messages="$errors->get('terms_accepted')" class="mt-1" />
        </div>

        <!-- CAPTCHA -->
        <div class="mb-5">
            <x-captcha location="register" />
        </div>

        <!-- Submit Button -->
        <button type="submit"
                class="w-full py-3.5 px-4 bg-gradient-to-r from-green-500 to-teal-600 hover:from-green-600 hover:to-teal-700 text-white font-semibold rounded-xl shadow-lg shadow-green-500/30 hover:shadow-green-500/50 transition-all duration-300 flex items-center justify-center gap-2">
            <i class="fas fa-user-plus"></i>
            Creează cont
        </button>

        <!-- Divider -->
        <div class="relative my-5">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-200 dark:border-gray-700"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-4 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">sau</span>
            </div>
        </div>

        <!-- Login Link -->
        <a href="{{ route('login') }}"
           class="w-full py-3 px-4 border-2 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-300 flex items-center justify-center gap-2">
            <i class="fas fa-sign-in-alt"></i>
            Am deja cont
        </a>
    </form>
</x-guest-layout>
