up

app/Http/Livewire/ShowIpTest.php

@@ -9,6 +9,12 @@ class ShowIpTest extends Component
 {
     public string $ipId = '';
 
+    public function mount()
+    {
+        // Obtener la IP del servidor como fallback
+        $this->ipId = Request::ip();
+    }
+
     public function render()
     {
         return view('livewire.show-ip-test');

resources/views/livewire/show-ip-test.blade.php

@@ -1,8 +1,63 @@
-<div x-data>
-    <div x-data="{ ipId: @entangle('ipId').live }" x-init="fetch('https://api.ipify.org/?format=json').then(res => res.json()).then(data => ipId = data.ip);">
-        <!-- Puedes mostrarla si quieres -->
-        <p class="">Tu IP es: <span x-text="ipId"></span></p>
-    </div>
+<div>
+    <div x-data="{ 
+        clientIp: @entangle('ipId').live,
+        publicIp: '',
+        loading: true,
+        error: null
+    }" x-init="
+        // Obtener IP pública del cliente
+        fetch('https://api.ipify.org/?format=json')
+            .then(res => res.json())
+            .then(data => {
+                publicIp = data.ip;
+                loading = false;
+            })
+            .catch(err => {
+                error = 'Error al obtener IP pública';
+                loading = false;
+                console.error('Error:', err);
+            });
+    ">
+        <div class="space-y-4 p-4 border rounded-lg">
+            <h3 class="text-lg font-semibold">Información de IP</h3>
+            
+            <!-- IP detectada por el servidor -->
+            <div>
+                <p class="text-sm text-gray-600">IP detectada por el servidor:</p>
+                <p class="font-mono text-blue-600"><span x-text="clientIp || 'No disponible'"></span></p>
+            </div>
 
-    <script type="text/javascript" src="https://api.ipify.org/?format=jsonp&callback=get_ip"></script>
+            <!-- IP pública real -->
+            <div>
+                <p class="text-sm text-gray-600">Tu IP pública real:</p>
+                <div x-show="loading" class="text-gray-500">
+                    <span>Cargando...</span>
+                </div>
+                <div x-show="!loading && !error">
+                    <p class="font-mono text-green-600"><span x-text="publicIp"></span></p>
+                </div>
+                <div x-show="error" class="text-red-600">
+                    <span x-text="error"></span>
+                </div>
+            </div>
+
+            <!-- Botón para refrescar -->
+            <button @click="
+                loading = true;
+                error = null;
+                fetch('https://api.ipify.org/?format=json')
+                    .then(res => res.json())
+                    .then(data => {
+                        publicIp = data.ip;
+                        loading = false;
+                    })
+                    .catch(err => {
+                        error = 'Error al obtener IP pública';
+                        loading = false;
+                    });
+            " class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
+                Actualizar IP
+            </button>
+        </div>
+    </div>
 </div>