Actualizar configuracion.html

configuracion.html

@@ -114,7 +114,33 @@
                                     <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Observaciones para presupuestos</label>
                                     <textarea id="billObs" rows="3" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all" placeholder="Ej: Presupuesto válido por 30 días..."></textarea>
                                 </div>
-                            </div>
+
+                                <div class="md:col-span-2 mt-4 pt-6 border-t border-slate-100">
+                                    <div class="flex items-center justify-between mb-4">
+                                        <div>
+                                            <h4 class="text-sm font-black text-slate-800 uppercase tracking-tight flex items-center gap-2">
+                                                <i data-lucide="credit-card" class="w-5 h-5 text-indigo-600"></i> Pasarela de Pago (Stripe)
+                                            </h4>
+                                            <p class="text-xs text-slate-500 mt-1">Permite a tus clientes pagar presupuestos directamente con Tarjeta o Apple Pay.</p>
+                                        </div>
+                                        <div class="relative inline-block w-12 align-middle select-none">
+                                            <input type="checkbox" id="stripe_enabled" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                            <label for="stripe_enabled" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer"></label>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 bg-indigo-50/50 p-5 rounded-2xl border border-indigo-100">
+                                        <div>
+                                            <label class="block text-[10px] font-black text-indigo-800 uppercase tracking-widest mb-1.5">Clave Pública (Public Key)</label>
+                                            <input type="text" id="stripe_pk" class="w-full bg-white border border-indigo-200 text-xs font-mono font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-indigo-500 transition-all" placeholder="pk_live_...">
+                                        </div>
+                                        <div>
+                                            <label class="block text-[10px] font-black text-indigo-800 uppercase tracking-widest mb-1.5">Clave Secreta (Secret Key)</label>
+                                            <input type="password" id="stripe_sk" class="w-full bg-white border border-indigo-200 text-xs font-mono font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-indigo-500 transition-all" placeholder="sk_live_...">
+                                        </div>
+                                    </div>
+                                </div>
+                                </div>
 
                             <div class="pt-4 flex justify-end">
                                 <button onclick="saveBillingConfig()" id="btnSaveBilling" class="bg-blue-600 hover:bg-blue-700 text-white font-black py-3 px-8 rounded-xl shadow-lg transition-all uppercase tracking-widest text-xs flex items-center gap-2">
@@ -1625,6 +1651,11 @@
                     document.getElementById('billZip').value = s.zip || "";
                     document.getElementById('billIban').value = s.iban || "";
                     document.getElementById('billObs').value = s.obs || "";
+                    
+                    // Cargar Stripe
+                    document.getElementById('stripe_enabled').checked = s.stripe_enabled || false;
+                    document.getElementById('stripe_pk').value = s.stripe_pk || "";
+                    document.getElementById('stripe_sk').value = s.stripe_sk || "";
                 }
             } catch (e) { console.error("Error cargando datos de facturación", e); }
         }
@@ -1643,7 +1674,11 @@
                 state: document.getElementById('billState').value,
                 zip: document.getElementById('billZip').value,
                 iban: document.getElementById('billIban').value,
-                obs: document.getElementById('billObs').value
+                obs: document.getElementById('billObs').value,
+                // Guardar Stripe
+                stripe_enabled: document.getElementById('stripe_enabled').checked,
+                stripe_pk: document.getElementById('stripe_pk').value.trim(),
+                stripe_sk: document.getElementById('stripe_sk').value.trim()
             };
 
             try {