<section x-data="{ userType: '{{ $user->user_type ?? 'individual' }}' }">


    <form id="send-verification" method="post" action="{{ route('verification.send') }}">
        @csrf
    </form>

    <form method="post" action="{{ route('profile.update') }}" class="mt-6 space-y-6">
        @csrf
        @method('patch')

        <!-- Tip Utilizator -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                {{ __('profile.account_type') }} *
            </label>
            <div class="grid grid-cols-2 gap-3">
                <label class="relative">
                    <input type="radio" name="user_type" value="individual" x-model="userType"
                           class="sr-only" {{ $user->user_type === 'individual' ? 'checked' : '' }}>
                    <div :class="userType === 'individual' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600'"
                         class="border-2 rounded-lg p-3 cursor-pointer hover:border-blue-300 transition-colors">
                        <div class="flex items-center">
                            <i class="fas fa-user mr-2 text-blue-500"></i>
                            <span class="text-sm font-medium">{{ __('profile.individual') }}</span>
                        </div>
                    </div>
                </label>

                <label class="relative">
                    <input type="radio" name="user_type" value="company" x-model="userType"
                           class="sr-only" {{ $user->user_type === 'company' ? 'checked' : '' }}>
                    <div :class="userType === 'company' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600'"
                         class="border-2 rounded-lg p-3 cursor-pointer hover:border-blue-300 transition-colors">
                        <div class="flex items-center">
                            <i class="fas fa-building mr-2 text-blue-500"></i>
                            <span class="text-sm font-medium">{{ __('profile.company') }}</span>
                        </div>
                    </div>
                </label>
            </div>
            <x-input-error class="mt-2" :messages="$errors->get('user_type')" />
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                {{ __('profile.change_type_info') }}
            </p>
        </div>

        <!-- Informații Personale -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Nume -->
            <div>
                <x-input-label for="last_name" :value="__('profile.last_name') . ' *'" />
                <x-text-input id="last_name" name="last_name" type="text" class="mt-1 block w-full"
                              :value="old('last_name', $user->last_name)" required />
                <x-input-error class="mt-2" :messages="$errors->get('last_name')" />
            </div>

            <!-- Prenume -->
            <div>
                <x-input-label for="first_name" :value="__('profile.first_name') . ' *'" />
                <x-text-input id="first_name" name="first_name" type="text" class="mt-1 block w-full"
                              :value="old('first_name', $user->first_name)" required />
                <x-input-error class="mt-2" :messages="$errors->get('first_name')" />
            </div>
        </div>

        <!-- Telefon -->
        <div>
            <x-input-label for="phone" :value="__('profile.phone') . ' *'" />
            <x-text-input id="phone" name="phone" type="tel" class="mt-1 block w-full"
                          :value="old('phone', $user->phone)" placeholder="0745997837" required />
            <x-input-error class="mt-2" :messages="$errors->get('phone')" />
        </div>

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

            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                <div>
                    <p class="text-sm mt-2 text-gray-800 dark:text-gray-200">
                        {{ __('Your email address is unverified.') }}

                        <button form="send-verification" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
                            {{ __('Click here to re-send the verification email.') }}
                        </button>
                    </p>

                    @if (session('status') === 'verification-link-sent')
                        <p class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
                            {{ __('A new verification link has been sent to your email address.') }}
                        </p>
                    @endif
                </div>
            @endif
        </div>

        <!-- Câmpuri Companie - vizibile doar dacă user_type = company -->
        <div x-show="userType === 'company' || '{{ $user->user_type }}' === 'company'"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 transform scale-95"
             x-transition:enter-end="opacity-100 transform scale-100">

            <div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
                <h3 class="text-base font-medium text-gray-900 dark:text-gray-100 mb-4">
                    <i class="fas fa-building mr-2 text-blue-500"></i>
                    {{ __('profile.company_information') }}
                </h3>

                <div class="space-y-4">
                    <!-- CUI -->
                    <div>
                        <x-input-label for="company_cui" :value="__('profile.cui') . ' *'" />
                        <x-text-input id="company_cui" name="company_cui" type="text" class="mt-1 block w-full"
                                      :value="old('company_cui', $user->company_cui)" placeholder="000000000000" />
                        <x-input-error class="mt-2" :messages="$errors->get('company_cui')" />
                    </div>

                    <!-- Nume Companie -->
                    <div>
                        <x-input-label for="company_name" :value="__('profile.company_name') . ' *'" />
                        <x-text-input id="company_name" name="company_name" type="text" class="mt-1 block w-full"
                                      :value="old('company_name', $user->company_name)" />
                        <x-input-error class="mt-2" :messages="$errors->get('company_name')" />
                    </div>

                    <!-- Registrul Comerțului -->
                    <div>
                        <x-input-label for="company_reg_com" :value="__('profile.company_reg_com')" />
                        <x-text-input id="company_reg_com" name="company_reg_com" type="text" class="mt-1 block w-full"
                                      :value="old('company_reg_com', $user->company_reg_com)" placeholder="J40/123456/2020" />
                        <x-input-error class="mt-2" :messages="$errors->get('company_reg_com')" />
                    </div>
                </div>
            </div>
        </div>

        <!-- Nume complet generat automat (hidden field pentru compatibilitate) -->
        <input type="hidden" name="name" id="full_name" value="{{ $user->first_name }} {{ $user->last_name }}" />

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const firstNameInput = document.getElementById('first_name');
                const lastNameInput = document.getElementById('last_name');
                const fullNameInput = document.getElementById('full_name');

                function updateFullName() {
                    const firstName = firstNameInput.value || '';
                    const lastName = lastNameInput.value || '';
                    fullNameInput.value = firstName + ' ' + lastName;
                }

                if (firstNameInput && lastNameInput) {
                    firstNameInput.addEventListener('input', updateFullName);
                    lastNameInput.addEventListener('input', updateFullName);
                }
            });
        </script>

        <div class="flex items-center gap-4">
            <x-primary-button>{{ __('profile.save') }}</x-primary-button>

            @if (session('status') === 'profile-updated')
                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 2000)"
                    class="text-sm text-gray-600 dark:text-gray-400"
                >{{ __('profile.saved') }}</p>
            @endif
        </div>
    </form>
</section>
