From 013061c1d6a646d45ab023a43fc91d62ed67b3b6 Mon Sep 17 00:00:00 2001
From: Juan Felipe Duarte <70235683+DuarteJFelipe@users.noreply.github.com>
Date: Fri, 17 Oct 2025 16:24:46 -0500
Subject: [PATCH] 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              | 17 ++++++++--
 .../views/livewire/show-ip-test.blade.php     | 34 +++++++++++++++++--
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/app/Http/Livewire/ShowIpTest.php b/app/Http/Livewire/ShowIpTest.php
index 7e621fd..ebf56ea 100644
--- a/app/Http/Livewire/ShowIpTest.php
+++ b/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');
     }
 }
diff --git a/resources/views/livewire/show-ip-test.blade.php b/resources/views/livewire/show-ip-test.blade.php
index db86de0..0ef3005 100644
--- a/resources/views/livewire/show-ip-test.blade.php
+++ b/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>