From ecdeea26788167027bf6dbf696a7a03332756ec4 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Fri, 3 Apr 2026 14:47:21 +0000
Subject: [PATCH] Actualizar plan-tranquilidad.html

---
 plan-tranquilidad.html | 78 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 70 insertions(+), 8 deletions(-)

diff --git a/plan-tranquilidad.html b/plan-tranquilidad.html
index 18cfe57..427ecd7 100644
--- a/plan-tranquilidad.html
+++ b/plan-tranquilidad.html
@@ -152,27 +152,53 @@
                 </div>
             </div>
 
-            <div class="py-2 sticky bottom-4 z-50">
-                <button onclick="processContract()" id="btnAction" class="w-full bg-blue-600 text-white font-black py-5 rounded-[2rem] shadow-[0_15px_30px_-5px_rgba(37,99,235,0.4)] active:scale-95 transition-all uppercase tracking-widest text-sm flex justify-center items-center gap-3 border-2 border-blue-500">
+            <div class="py-2 sticky bottom-4 z-50 space-y-3">
+                <div class="bg-white/90 backdrop-blur-md p-4 rounded-2xl shadow-lg border border-slate-200">
+                    <label class="flex items-start gap-3 cursor-pointer">
+                        <input type="checkbox" id="terms-checkbox" class="mt-0.5 w-5 h-5 text-blue-600 rounded border-slate-300 focus:ring-blue-500" onchange="toggleDniField()">
+                        <span class="text-xs text-slate-600 font-medium leading-tight">
+                            He leído y acepto las <a href="#" onclick="showContractModal(event)" class="text-blue-600 font-black underline">Condiciones del Contrato</a>.
+                        </span>
+                    </label>
+                    
+                    <div id="dni-container" class="hidden mt-4 pt-4 border-t border-slate-100 transition-all fade-in">
+                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">DNI / NIE del Titular (Obligatorio)</label>
+                        <input type="text" id="client-dni" placeholder="Ej: 12345678Z" class="w-full mt-1.5 px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-black text-sm text-slate-800 uppercase focus:ring-2 focus:ring-blue-500 outline-none placeholder-slate-300">
+                    </div>
+                </div>
+
+                <button onclick="processContract()" id="btnAction" class="w-full bg-blue-600 text-white font-black py-5 rounded-[2rem] shadow-[0_15px_30px_-5px_rgba(37,99,235,0.4)] active:scale-95 transition-all uppercase tracking-widest text-sm flex justify-center items-center gap-3 border-2 border-blue-500 disabled:opacity-50">
                     <i data-lucide="credit-card" class="w-5 h-5"></i> Confirmar y Pagar
                 </button>
-                <p class="text-center text-[9px] text-slate-400 mt-4 px-4 leading-relaxed font-medium">
-                    Al pulsar, aceptas las <a href="#" class="underline text-blue-500">Condiciones Generales</a>. Se generará un PDF vinculante y serás dirigido a la pasarela bancaria.
-                </p>
             </div>
         </div>
     </main>
 
+    <div id="contract-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm transition-opacity fade-in">
+        <div class="bg-white w-full max-w-lg rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh]">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50">
+                <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs">Condiciones Generales</h3>
+                <button onclick="closeContractModal()" class="text-slate-400 hover:text-rose-500"><i data-lucide="x" class="w-6 h-6"></i></button>
+            </div>
+            <div class="p-6 overflow-y-auto text-xs text-slate-600 leading-relaxed whitespace-pre-wrap font-medium" id="modal-contract-text"></div>
+            <div class="p-4 border-t border-slate-100 bg-slate-50">
+                <button onclick="acceptFromModal()" class="w-full bg-blue-600 text-white font-black py-3.5 rounded-xl shadow-md active:scale-95 transition-all uppercase tracking-widest text-xs">Entendido y Aceptar</button>
+            </div>
+        </div>
+    </div>
+
     <div id="pdf-contract-template" class="hidden">
         <div style="padding: 20px 40px; font-family: 'Helvetica', Arial, sans-serif; color: #1e293b; line-height: 1.5; font-size: 11px; background: white;">
             <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #2563eb; padding-bottom: 20px; margin-bottom: 30px;">
                 <div style="flex-grow: 1;">
                     <h2 id="pdf-company-name" style="margin:0; color:#2563eb; font-size: 28px; font-weight: 900; letter-spacing: -1.5px;">Empresa</h2>
-                    <p style="margin: 3px 0 0 0; color: #64748b; font-size: 10px; text-transform: uppercase;">Servicios Técnicos Profesionales</p>
+                    <p id="pdf-company-details" style="margin: 3px 0 0 0; color: #64748b; font-size: 10px;">Email: - | Tel: -</p>
                 </div>
                 <div style="text-align: right; font-size: 10px; color: #64748b; width: 250px;">
                     <strong style="color: #0f172a; font-size: 14px;">CONTRATO DE SUSCRIPCIÓN</strong><br>
-                    <span id="pdf-client-name">Cliente</span><br>
+                    <span id="pdf-client-name" style="font-weight: bold;">Cliente</span><br>
+                    <span id="pdf-client-dni">DNI: -</span><br>
+                    <span id="pdf-client-phone">Tel: -</span>
                 </div>
             </div>
             <div id="pdf-dynamic-text" style="margin-bottom: 25px; background: #f8fafc; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0; white-space: pre-wrap;"></div>
@@ -240,6 +266,25 @@
         canvas.addEventListener('touchstart', startDrawing); canvas.addEventListener('touchmove', draw); canvas.addEventListener('touchend', () => drawing = false);
         function clearSignature() { ctx.clearRect(0, 0, canvas.width, canvas.height); }
 
+        function toggleDniField() {
+            const isChecked = document.getElementById('terms-checkbox').checked;
+            const dniContainer = document.getElementById('dni-container');
+            if(isChecked) dniContainer.classList.remove('hidden');
+            else dniContainer.classList.add('hidden');
+        }
+
+        function showContractModal(e) {
+            e.preventDefault();
+            document.getElementById('modal-contract-text').innerText = globalConfig.contract_text || "Condiciones no disponibles.";
+            document.getElementById('contract-modal').classList.remove('hidden');
+        }
+        function closeContractModal() { document.getElementById('contract-modal').classList.add('hidden'); }
+        function acceptFromModal() {
+            closeContractModal();
+            document.getElementById('terms-checkbox').checked = true;
+            toggleDniField();
+        }
+
         function goBackToPortal() {
             window.location.href = `index.html?token=${token}`; 
         }
@@ -268,8 +313,10 @@
                 clientData = data.client;
 
                 document.getElementById('pdf-company-name').innerText = data.company.name;
+                document.getElementById('pdf-company-details').innerText = `Email: ${globalConfig.email || '-'} | Tel: ${globalConfig.phone || '-'}`;
                 document.getElementById('pdf-stamp-company').innerText = data.company.name.toUpperCase();
                 document.getElementById('pdf-client-name').innerText = `Asegurado: ${clientData.name}`;
+                document.getElementById('pdf-client-phone').innerText = `Tel: ${clientData.phone || '-'}`;
                 document.getElementById('pdf-dynamic-text').innerText = globalConfig.contract_text || "El mantenimiento y asistencia quedan cubiertos por las condiciones de la empresa proveedora.";
 
                 renderPlans();
@@ -337,6 +384,15 @@
 
         async function processContract() {
             if (!selectedPlanId) return alert("Por favor, selecciona un plan.");
+            
+            if (!document.getElementById('terms-checkbox').checked) {
+                return alert("⚠️ Debes leer y aceptar las Condiciones del Contrato marcando la casilla.");
+            }
+
+            const dniVal = document.getElementById('client-dni').value.trim().toUpperCase();
+            if (!dniVal || dniVal.length < 5) {
+                return alert("⚠️ Por favor, introduce un DNI/NIE válido para formalizar el contrato.");
+            }
 
             const blank = document.createElement('canvas');
             blank.width = canvas.width; blank.height = canvas.height;
@@ -351,6 +407,7 @@
             document.getElementById('pdf-signature-img').src = canvas.toDataURL("image/png");
             document.getElementById('pdf-plan-name').innerText = `${planSeleccionado.name} (${planSeleccionado.price}€ / ${planSeleccionado.type})`;
             document.getElementById('pdf-timestamp').innerText = "Documento firmado digitalmente el " + new Date().toLocaleDateString('es-ES') + " a las " + new Date().toLocaleTimeString('es-ES');
+            document.getElementById('pdf-client-dni').innerText = `DNI: ${dniVal}`; // Inyectar DNI
 
             const element = document.getElementById('pdf-contract-template');
             element.classList.remove('hidden');
@@ -366,7 +423,12 @@
             try {
                 const pdfBase64 = await html2pdf().set(opt).from(element).output('datauristring');
                 
-                const payload = { plan_id: selectedPlanId, signature: canvas.toDataURL("image/png"), pdf_document: pdfBase64 };
+                const payload = { 
+                    plan_id: selectedPlanId, 
+                    signature: canvas.toDataURL("image/png"), 
+                    pdf_document: pdfBase64,
+                    dni: dniVal
+                };
 
                 const res = await fetch(`${API_URL}/public/portal/${token}/protection/subscribe`, {
                     method: 'POST',