ip

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

@@ -21,7 +21,7 @@
                 <div class="text-center bg-[#000029] text-white text-lg font-semibold rounded-lg py-2 mb-4">
                     Recargar saldo
                 </div>
-                <form action="/recargas" method="post" class="text-center">
+                <form action="/recargas" method="post" class="text-center" onsubmit="return prepareRecarga(this)">
                     @csrf
                     <div class="flex justify-center mb-4">
                         Saldo actual: <p class="font-semibold"> ${{ number_format($user->saldo->valor) }}</p>
@@ -30,7 +30,7 @@
                         Monto a recargar
                     </div>
                     <div>
-                        <input type="tel" name="recharge" id="valor_recarga" wire:model="valor_recarga" class="hidden">
+                        <input type="hidden" name="recharge" id="valor_recarga">
 
                         <input
                         type="text"
@@ -132,10 +132,25 @@
     <script>
         function formatInput(input) {
             let unformattedValue = input.value.replace(/\D/g, '');
-
             let formattedValue = unformattedValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-
             input.value = formattedValue;
+            // Actualizar el input oculto directamente sin esperar a Livewire
+            var hidden = document.getElementById('valor_recarga');
+            if (hidden) hidden.value = unformattedValue;
+        }
+
+        function prepareRecarga(form) {
+            var formatEl = form.querySelector('#valor_recarga_format');
+            var hiddenEl = form.querySelector('#valor_recarga');
+            if (formatEl && hiddenEl) {
+                var clean = formatEl.value.replace(/\D/g, '');
+                if (!clean || parseInt(clean) <= 0) {
+                    alert('Por favor ingrese un monto válido.');
+                    return false;
+                }
+                hiddenEl.value = clean;
+            }
+            return true;
         }
     </script>