From c502a57a51af2ec93ebd9b938c1fff1f871b24e2 Mon Sep 17 00:00:00 2001
From: lizandrogd <77708265+lizandrogd@users.noreply.github.com>
Date: Mon, 7 Jul 2025 15:34:01 -0500
Subject: [PATCH] Update show-roles.blade.php

---
 resources/views/livewire/show-roles.blade.php | 75 ++++++++++++-------
 1 file changed, 50 insertions(+), 25 deletions(-)

diff --git a/resources/views/livewire/show-roles.blade.php b/resources/views/livewire/show-roles.blade.php
index d508d15..30f3bdc 100755
--- a/resources/views/livewire/show-roles.blade.php
+++ b/resources/views/livewire/show-roles.blade.php
@@ -30,33 +30,58 @@
                 </a>
                 @endif
             </div>
-
             @if (auth()->user()->rol_id == 5)
-            <!-- Buscador -->
-            <div x-data="{ open: false, search: '', selectedId: @entangle('filtro_id'), usuarios: @js($usuarios) }" class="relative w-full max-w-md sm:max-w-xs">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Buscar subvendedor</label>
-                <input
-                    type="text"
-                    placeholder="Escribe nombre o correo..."
-                    x-model="search"
-                    @input="open = true"
-                    @click.away="open = false"
-                    class="w-full border border-gray-300 rounded-xl shadow-sm px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
+<!-- Buscador -->
+<div x-data="{
+        open: false,
+        search: '',
+        selectedId: @entangle('filtro_id'),
+        usuarios: @js($usuarios),
+        reset() {
+            this.search = '';
+            this.selectedId = null;
+        }
+    }" 
+    class="relative w-full max-w-md sm:max-w-xs">
+    
+    <label class="block text-sm font-medium text-gray-700 mb-1">Buscar subvendedor</label>
+
+    <div class="relative">
+        <input
+            type="text"
+            placeholder="Escribe nombre o correo..."
+            x-model="search"
+            @input="open = true; if (search === '') selectedId = null"
+            @focus="open = true"
+            @click.away="open = false"
+            class="w-full border border-gray-300 rounded-xl shadow-sm px-4 py-2 text-sm pr-10 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
+
+        <!-- Botón X -->
+        <button
+            type="button"
+            x-show="search !== ''"
+            @click="reset"
+            class="absolute inset-y-0 right-2 text-gray-500 hover:text-gray-700 text-xl"
+        >
+            &times;
+        </button>
+    </div>
+
+    <ul x-show="open" x-transition class="absolute z-50 mt-2 w-full bg-white border border-gray-300 rounded-xl shadow-lg max-h-60 overflow-y-auto text-sm">
+        <template x-for="user in usuarios.filter(u => search === '' || (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase()))" :key="user.id">
+            <li
+                @click="selectedId = user.id; search = user.name + ' - ' + user.email; open = false"
+                class="px-4 py-2 hover:bg-blue-100 hover:text-blue-800 cursor-pointer"
+                :class="{ 'bg-blue-50 text-blue-700 font-medium': selectedId === user.id }"
+                x-text="user.name + ' - ' + user.email"></li>
+        </template>
+        <li x-show="usuarios.filter(u => search === '' || (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase())).length === 0" class="px-4 py-2 text-gray-500 italic">
+            No se encontraron resultados.
+        </li>
+    </ul>
+</div>
+@endif
 
-                <ul x-show="open && search.length > 0" x-transition class="absolute z-50 mt-2 w-full bg-white border border-gray-300 rounded-xl shadow-lg max-h-60 overflow-y-auto text-sm">
-                    <template x-for="user in usuarios.filter(u => (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase()))" :key="user.id">
-                        <li
-                            @click="selectedId = user.id; search = user.name + ' - ' + user.email; open = false"
-                            class="px-4 py-2 hover:bg-blue-100 hover:text-blue-800 cursor-pointer"
-                            :class="{ 'bg-blue-50 text-blue-700 font-medium': selectedId === user.id }"
-                            x-text="user.name + ' - ' + user.email"></li>
-                    </template>
-                    <li x-show="usuarios.filter(u => (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase())).length === 0" class="px-4 py-2 text-gray-500 italic">
-                        No se encontraron resultados.
-                    </li>
-                </ul>
-            </div>
-            @endif
         </div>
 
         <!-- Tabla usuarios -->