Show public and local IP addresses in Livewire view

Added properties and event listener to ShowIpTest component to display both public IP (from Laravel) and local IP (from JavaScript). Updated Blade view to show both IPs and included a script to detect local IP using WebRTC and dispatch it to Livewire.

app/Http/Livewire/ShowIpTest.php

@@ -7,10 +7,23 @@ use Illuminate\Support\Facades\Request;
 
 class ShowIpTest extends Component
 {
+    public $public_ip;
+    public $local_ip;
+
+    protected $listeners = ['setLocalIP' => 'setLocalIP'];
+
+    public function mount()
+    {
+        $this->public_ip = Request::ip();
+    }
+
+    public function setLocalIP($data)
+    {
+        $this->local_ip = $data['ip'];
+    }
+
     public function render()
     {
-        dd($ip = Request::ip());
-
         return view('livewire.show-ip-test');
     }
 }

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

@@ -1,3 +1,33 @@
-<div>
-    {{-- Close your eyes. Count to one. That is how long forever feels. --}}
+<div x-data>
+    <div class="p-6 bg-white shadow rounded">
+        <h2 class="text-xl font-bold mb-4">IPs del Usuario</h2>
+
+        <div class="space-y-2">
+            <p><strong>IP pública (Laravel):</strong> {{ $public_ip }}</p>
+            <p><strong>IP local (JavaScript):</strong> {{ $local_ip ?? 'Detectando...' }}</p>
+        </div>
+    </div>
+
+    <script>
+        async function getLocalIP(callback) {
+            const pc = new RTCPeerConnection({ iceServers: [] });
+            pc.createDataChannel('');
+            pc.createOffer().then(offer => pc.setLocalDescription(offer));
+            pc.onicecandidate = event => {
+                if (!event || !event.candidate) return;
+                const candidate = event.candidate.candidate;
+                const ipMatch = candidate.match(/([0-9]{1,3}(\.[0-9]{1,3}){3})/);
+                if (ipMatch) {
+                    callback(ipMatch[1]);
+                    pc.close();
+                }
+            };
+        }
+
+        document.addEventListener('livewire:load', () => {
+            getLocalIP(ip => {
+                window.Livewire.dispatch('setLocalIP', { ip });
+            });
+        });
+    </script>
 </div>