<form wire:submit="save" class="space-y-6">
    <x-card title="Datos de la empresa">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre comercial *</label>
                <input type="text" wire:model="name" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500" required>
                @error('name') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                <input type="email" wire:model="email" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500" required>
                @error('email') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Teléfono</label>
                <input type="text" wire:model="phone" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">WhatsApp</label>
                <input type="text" wire:model="whatsapp" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">NIT / Documento</label>
                <input type="text" wire:model="document_number" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Ciudad</label>
                <input type="text" wire:model="city" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500">
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Dirección</label>
                <input type="text" wire:model="address" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500">
            </div>
        </div>
    </x-card>

    @if (! $company)
        <x-card title="Propietario / administrador">
            <div class="mb-5 rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm text-indigo-900">
                Este usuario será el propietario de la empresa y podrá entrar al panel administrativo con el email y la contraseña inicial.
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nombre del propietario *</label>
                    <input type="text" wire:model="admin_name" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500" required>
                    @error('admin_name') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email de acceso *</label>
                    <input type="email" wire:model="admin_email" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500" required>
                    @error('admin_email') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Celular</label>
                    <input type="text" wire:model="admin_phone" placeholder="+57 3001234567" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500">
                    @error('admin_phone') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Contraseña inicial *</label>
                        <input type="text" wire:model="admin_password" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 font-mono focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500" required>
                        @error('admin_password') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <button type="button" wire:click="generatePassword" class="self-end rounded-lg border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50">
                        Generar
                    </button>
                </div>

                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Confirmar contraseña *</label>
                    <input type="text" wire:model="admin_password_confirmation" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 font-mono focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500" required>
                    @error('admin_password_confirmation') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
                    <p class="mt-2 text-xs text-gray-500">Entrega esta contraseña al propietario. Luego podrá cambiarla desde su perfil.</p>
                </div>
            </div>
        </x-card>
    @else
        <x-card title="Administradores de la empresa">
            <div class="space-y-3">
                @forelse ($admins as $admin)
                    <div class="flex flex-col gap-3 rounded-xl border border-gray-200 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <p class="font-semibold text-gray-900">{{ $admin->name }}</p>
                            <p class="text-sm text-gray-500">{{ $admin->email }}</p>
                        </div>
                        <span class="inline-flex w-fit rounded-full px-3 py-1 text-xs font-semibold {{ $admin->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-600' }}">
                            {{ $admin->is_active ? 'Activo' : 'Inactivo' }}
                        </span>
                    </div>
                @empty
                    <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                        Esta empresa todavía no tiene un administrador propietario asignado.
                    </div>
                @endforelse
            </div>
        </x-card>
    @endif

    <x-card title="Plan y estado">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Plan *</label>
                <select wire:model="plan_id" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500" required>
                    @foreach ($plans as $plan)
                        <option value="{{ $plan->id }}">{{ $plan->name }} — $ {{ number_format($plan->price_monthly, 0, ',', '.') }}/mes</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Estado *</label>
                <select wire:model="status" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500">
                    <option value="trial">En prueba</option>
                    <option value="active">Activa</option>
                    <option value="suspended">Suspendida</option>
                    <option value="cancelled">Cancelada</option>
                </select>
            </div>
        </div>
    </x-card>

    <div class="flex items-center justify-end gap-2">
        <x-btn href="{{ route('superadmin.companies.index') }}" variant="secondary">Cancelar</x-btn>
        <x-btn type="submit" variant="primary">{{ $company ? 'Actualizar' : 'Crear empresa' }}</x-btn>
    </div>
</form>
