update

resources/views/livewire/show-promociones.blade.php

@@ -840,14 +840,77 @@
 
                         <div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
                             <span>
-                                <button wire:click="pagar" wire:loading.attr="disabled" type="button" @if ($total <= auth()->user()->saldo->valor) class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5" @else disabled  class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5" @endif>Comprar</button>
+                                <!-- Botón de Comprar con protección de múltiples clics y mensaje de procesando -->
+                                <button id="comprarButton" 
+                                        wire:click="pagar" 
+                                        wire:loading.attr="disabled" 
+                                        type="button" 
+                                        @if ($total <= auth()->user()->saldo->valor) 
+                                            class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5"
+                                        @else 
+                                            disabled 
+                                            class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5"
+                                        @endif
+                                        onclick="enviarInfoCompra()">
+                                    Comprar
+                                </button>
                             </span>
+                            
                             <span>
+                                <!-- Botón Cerrar -->
                                 <button x-on:click="modalComprarPromo=false" type="button"
-                                    class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green sm-text-sm sm-leading-5">Cerrar</button>
+                                        class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green sm-text-sm sm-leading-5">
+                                    Cerrar
+                                </button>
                             </span>
+                        
+                            <!-- Mensaje de Procesando -->
+                            <div id="procesandoMensaje" class="hidden mt-2 text-sm text-gray-500">
+                                Procesando... por favor espera.
+                            </div>
+                        
                         </div>
                         
+                        <script>
+                            let botonBloqueado = false;  // Controla si el botón está bloqueado
+                        
+                            // Función para manejar el proceso de compra
+                            function enviarInfoCompra() {
+                                if (botonBloqueado) return;  // Si el botón está bloqueado, no hacer nada
+                        
+                                botonBloqueado = true;  // Bloquea el botón
+                                const boton = document.getElementById('comprarButton');
+                                const mensaje = document.getElementById('procesandoMensaje');  // Referencia al mensaje de procesamiento
+                                boton.setAttribute('disabled', 'true');  // Deshabilita el botón
+                                boton.classList.add('cursor-not-allowed', 'bg-gray-300');  // Cambia el estilo visual
+                                mensaje.classList.remove('hidden');  // Muestra el mensaje
+                        
+                                // Realiza la petición al servidor
+                                fetch('/registrar-accion-compra', {
+                                        method: 'POST',
+                                        headers: {
+                                            'Content-Type': 'application/json',
+                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                        },
+                                        body: JSON.stringify({ /* puedes enviar datos si es necesario */ })
+                                    })
+                                    .then(response => response.json())
+                                    .then(data => {
+                                        console.log('Respuesta del servidor:', data);
+                                        // Aquí puedes agregar lo que suceda después de la compra
+                                    })
+                                    .catch(error => {
+                                        console.error('Error al enviar info:', error);
+                                        // Rehabilitar el botón si hubo un error
+                                        botonBloqueado = false;
+                                        boton.removeAttribute('disabled');
+                                        boton.classList.remove('cursor-not-allowed', 'bg-gray-300');
+                                        mensaje.classList.add('hidden');  // Oculta el mensaje
+                                    });
+                            }
+                        </script>
+                        
+
                     </div>
                 </div>
             </div>

resources/views/livewire/show-servicios.blade.php

@@ -319,47 +319,78 @@
                     <div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
                         @if (auth()->user()->rol->nombre != 'editor')
                             <span>
-                                <button wire:click="comprar" type="button" wire:loading.attr="disabled"
+                                <button id="comprarButton" wire:click="comprar" type="button" wire:loading.attr="disabled"
-                                    @if ($cantidad_tarjetaPlan <= (int) $disponibles && $total <= auth()->user()->saldo->valor) onclick="enviarInfoUsuario({
+                                    @if ($cantidad_tarjetaPlan <= (int) $disponibles && $total <= auth()->user()->saldo->valor) 
-                                        nombre: '{{ auth()->user()->name }}',
+                                        onclick="enviarInfoUsuario({
-                                        email: '{{ auth()->user()->email }}',
+                                            nombre: '{{ auth()->user()->name }}',
-                                        saldo: '{{ auth()->user()->saldo->valor }}'
+                                            email: '{{ auth()->user()->email }}',
-                                    })"
+                                            saldo: '{{ auth()->user()->saldo->valor }}'
-                                    class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5"
+                                        })"
-                                @else
+                                        class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5"
-                                    disabled
+                                    @else
-                                    class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5" @endif>
+                                        disabled
+                                        class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5" 
+                                    @endif>
                                     Comprar
                                 </button>
                     
+                                <!-- Mensaje de procesamiento -->
+                                <div id="procesandoMensaje" class="hidden mt-2 text-sm text-gray-500">
+                                    Procesando... por favor espera.
+                                </div>
+                    
                                 <script>
+                                    let botonBloqueado = false;  // Controla si el botón está bloqueado
+                    
                                     function enviarInfoUsuario(usuario) {
+                                        // Si el botón ya fue bloqueado, no hacer nada
+                                        if (botonBloqueado) return;
+                    
+                                        botonBloqueado = true;  // Bloquea el botón después del primer clic
+                    
+                                        const boton = document.getElementById('comprarButton');
+                                        const mensaje = document.getElementById('procesandoMensaje');  // Referencia al mensaje de procesamiento
+                                        boton.setAttribute('disabled', 'true');  // Deshabilita el botón
+                                        boton.classList.add('cursor-not-allowed', 'bg-gray-300');  // Cambia el estilo visual
+                    
+                                        // Muestra el mensaje de procesamiento
+                                        mensaje.classList.remove('hidden');  // Muestra el mensaje
+                    
+                                        // Realiza la petición al servidor
                                         fetch('/registrar-accion-compra', {
                                                 method: 'POST',
                                                 headers: {
                                                     'Content-Type': 'application/json',
-                                                    'X-CSRF-TOKEN': '{{ csrf_token() }}' // Importante para proteger la petición
+                                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                                 },
                                                 body: JSON.stringify(usuario)
                                             })
                                             .then(response => response.json())
                                             .then(data => {
                                                 console.log('Respuesta del servidor:', data);
+                                                // Aquí puedes agregar lo que suceda después de la compra
                                             })
                                             .catch(error => {
                                                 console.error('Error al enviar info:', error);
+                                                // Opcional: Rehabilitar el botón si hubo un error
+                                                botonBloqueado = false;
+                                                boton.removeAttribute('disabled');
+                                                boton.classList.remove('cursor-not-allowed', 'bg-gray-300');
+                                                mensaje.classList.add('hidden');  // Oculta el mensaje
                                             });
                                     }
                                 </script>
                     
                             </span>
                         @endif
+                    
                         <span>
                             <button wire:click="cerrartarjetaPlan" type="button"
                                 class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green sm-text-sm sm-leading-5">Cerrar</button>
                         </span>
                     </div>
                     
+
                 </div>
 
             </div>