From d7015345376b5e41591db654a9ed4919be6e1b6d Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Sat, 6 Jun 2026 21:57:30 -0500
Subject: [PATCH] Update hostinger.html

---
 resources/views/hostinger.html | 66 +++++++++++++++++++++++++++++++---
 1 file changed, 62 insertions(+), 4 deletions(-)

diff --git a/resources/views/hostinger.html b/resources/views/hostinger.html
index c000758..e3981ca 100644
--- a/resources/views/hostinger.html
+++ b/resources/views/hostinger.html
@@ -57,8 +57,12 @@
         <!-- ─── TAB: VPS ─── -->
         <div x-show="activeTab==='vps'">
             <div x-show="vps.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
+            <div x-show="vps.length > 0" class="mb-4">
+                <input x-model="vpsSearch" type="text" placeholder="Buscar por hostname, IP, plan, datacenter..."
+                    class="w-full border rounded-lg px-3 py-2 text-sm" />
+            </div>
             <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-                <template x-for="v in vps" :key="v.id">
+                <template x-for="v in filteredVPS" :key="v.id">
                     <div class="border rounded-xl p-4 bg-white shadow-sm hover:shadow-md transition">
                         <div class="flex items-center justify-between mb-3">
                             <span class="font-semibold text-sm truncate" x-text="v.hostname"></span>
@@ -122,6 +126,10 @@
         <!-- ─── TAB: Dominios ─── -->
         <div x-show="activeTab==='domains'">
             <div x-show="domains.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
+            <div x-show="domains.length > 0" class="mb-4">
+                <input x-model="domainsSearch" type="text" placeholder="Buscar dominio o estado..."
+                    class="w-full border rounded-lg px-3 py-2 text-sm" />
+            </div>
             <div class="overflow-x-auto">
                 <table class="table-auto w-full text-sm">
                     <thead>
@@ -134,7 +142,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <template x-for="(d, dIdx) in domains" :key="d.domain + '_' + dIdx">
+                        <template x-for="(d, dIdx) in filteredDomains" :key="d.domain + '_' + dIdx">
                             <tr class="border-b hover:bg-gray-50">
                                 <td class="py-2 px-3 font-mono text-xs" x-text="d.domain"></td>
                                 <td class="py-2 px-3">
@@ -181,6 +189,10 @@
         <!-- ─── TAB: Hosting ─── -->
         <div x-show="activeTab==='hosting'">
             <div x-show="hosting.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
+            <div x-show="hosting.length > 0" class="mb-4">
+                <input x-model="hostingSearch" type="text" placeholder="Buscar por dominio, tipo o usuario..."
+                    class="w-full border rounded-lg px-3 py-2 text-sm" />
+            </div>
             <div class="overflow-x-auto">
                 <table class="table-auto w-full text-sm">
                     <thead>
@@ -193,7 +205,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <template x-for="(h, hIdx) in hosting" :key="h.domain + '_' + hIdx">
+                        <template x-for="(h, hIdx) in filteredHosting" :key="h.domain + '_' + hIdx">
                             <tr class="border-b hover:bg-gray-50">
                                 <td class="py-2 px-3 font-mono text-xs" x-text="h.domain || '—'"></td>
                                 <td class="py-2 px-3 text-xs" x-text="h.vhost_type || '—'"></td>
@@ -214,6 +226,10 @@
         <!-- ─── TAB: Facturación ─── -->
         <div x-show="activeTab==='orders'">
             <div x-show="orders.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
+            <div x-show="orders.length > 0" class="mb-4">
+                <input x-model="ordersSearch" type="text" placeholder="Buscar por nombre, ID o estado..."
+                    class="w-full border rounded-lg px-3 py-2 text-sm" />
+            </div>
             <div class="overflow-x-auto">
                 <table class="table-auto w-full text-sm">
                     <thead>
@@ -227,7 +243,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <template x-for="o in orders" :key="o.id">
+                        <template x-for="o in filteredOrders" :key="o.id">
                             <tr class="border-b hover:bg-gray-50">
                                 <td class="py-2 px-3 text-xs" x-text="o.name || '—'"></td>
                                 <td class="py-2 px-3">
@@ -567,6 +583,10 @@ document.addEventListener('alpine:init', () => {
         domains: [],
         hosting: [],
         orders: [],
+        vpsSearch: '',
+        domainsSearch: '',
+        hostingSearch: '',
+        ordersSearch: '',
         dnsRecords: [],
         dnsDomain: '',
         dnsNameServers: null,
@@ -602,6 +622,44 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
+        get filteredVPS() {
+            if (!this.vpsSearch) return this.vps;
+            const q = this.vpsSearch.toLowerCase();
+            return this.vps.filter(v =>
+                (v.hostname && v.hostname.toLowerCase().includes(q)) ||
+                (v.plan && v.plan.toLowerCase().includes(q)) ||
+                (v.data_center && v.data_center.toLowerCase().includes(q)) ||
+                (v.state && v.state.toLowerCase().includes(q)) ||
+                (v.ipv4 && v.ipv4.some(ip => ip.address && ip.address.includes(q)))
+            );
+        },
+        get filteredDomains() {
+            if (!this.domainsSearch) return this.domains;
+            const q = this.domainsSearch.toLowerCase();
+            return this.domains.filter(d =>
+                (d.domain && d.domain.toLowerCase().includes(q)) ||
+                (d.status && d.status.toLowerCase().includes(q))
+            );
+        },
+        get filteredHosting() {
+            if (!this.hostingSearch) return this.hosting;
+            const q = this.hostingSearch.toLowerCase();
+            return this.hosting.filter(h =>
+                (h.domain && h.domain.toLowerCase().includes(q)) ||
+                (h.vhost_type && h.vhost_type.toLowerCase().includes(q)) ||
+                (h.username && h.username.toLowerCase().includes(q))
+            );
+        },
+        get filteredOrders() {
+            if (!this.ordersSearch) return this.orders;
+            const q = this.ordersSearch.toLowerCase();
+            return this.orders.filter(o =>
+                (o.name && o.name.toLowerCase().includes(q)) ||
+                (o.status && o.status.toLowerCase().includes(q)) ||
+                (o.id && o.id.toLowerCase().includes(q))
+            );
+        },
+
         async loadTab() {
             this.loading = true;
             try {