From 2da3b8054ea6d6e4c0cd8115c4df9530eb42a9ed Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sat, 21 Feb 2026 18:30:12 +0000
Subject: [PATCH] Actualizar configuracion.html

---
 configuracion.html | 174 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 169 insertions(+), 5 deletions(-)

diff --git a/configuracion.html b/configuracion.html
index cfcaf37..c6a9d83 100644
--- a/configuracion.html
+++ b/configuracion.html
@@ -309,11 +309,92 @@
                     </div>
                 </div>
 
-                <div id="view-portal" class="tab-content hidden h-full fade-in">
-                    <div class="bg-white rounded-xl shadow p-10 text-center border border-gray-100">
-                        <i data-lucide="globe" class="w-16 h-16 text-blue-200 mx-auto mb-4"></i>
-                        <h3 class="text-xl font-bold text-gray-700">Portal del Cliente</h3>
-                        <p class="text-gray-500 mt-2">Próximamente</p>
+                <div id="view-portal" class="tab-content hidden h-full fade-in pb-10">
+                    <div class="max-w-6xl mx-auto mt-6">
+                        <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100 space-y-6">
+                            <div class="flex items-center gap-4 border-b border-slate-100 pb-4">
+                                <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center shrink-0">
+                                    <i data-lucide="smartphone" class="w-6 h-6"></i>
+                                </div>
+                                <div>
+                                    <h3 class="text-xl font-black text-slate-800 tracking-tight">Portal del Cliente</h3>
+                                    <p class="text-sm text-slate-500 font-medium">Personaliza la web que ven tus clientes al recibir el WhatsApp.</p>
+                                </div>
+                            </div>
+
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                                <div class="space-y-5">
+                                    <div>
+                                        <label class="block text-xs font-black text-slate-600 uppercase tracking-widest mb-2">Nombre Visible (Empresa)</label>
+                                        <input type="text" id="confCompanyName" placeholder="Ej: IntegraRepara SL" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all">
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-xs font-black text-slate-600 uppercase tracking-widest mb-2">Logotipo</label>
+                                        <div class="flex items-center gap-4">
+                                            <div id="logoPreview" class="w-20 h-20 bg-slate-50 border-2 border-dashed border-slate-300 rounded-xl flex items-center justify-center overflow-hidden shrink-0">
+                                                <i data-lucide="image" class="text-slate-300 w-8 h-8"></i>
+                                            </div>
+                                            <div class="flex-1">
+                                                <input type="file" id="confLogoInput" accept="image/png, image/jpeg, image/webp" class="hidden" onchange="encodeLogo(this)">
+                                                <button onclick="document.getElementById('confLogoInput').click()" class="bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 font-bold py-2 px-4 rounded-lg text-sm transition-all shadow-sm">
+                                                    Subir Imagen
+                                                </button>
+                                                <p class="text-[10px] text-slate-400 mt-1">Formatos: PNG, JPG (Máx. 1MB). Recomendado: Cuadrado o Apaisado.</p>
+                                                <input type="hidden" id="confLogoBase64">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="space-y-5 bg-slate-50 p-6 rounded-2xl border border-slate-100">
+                                    <h4 class="text-sm font-black text-slate-800 uppercase tracking-tight flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4 text-blue-500"></i> Horario de Citas (Rutas)</h4>
+                                    <p class="text-xs text-slate-500 mb-4">El portal calculará los huecos cada 30 min dentro de estas franjas.</p>
+
+                                    <div class="grid grid-cols-2 gap-4">
+                                        <div>
+                                            <label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5">Mañanas (Desde - Hasta)</label>
+                                            <div class="flex items-center gap-2">
+                                                <select id="mStart" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
+                                                    <option value="08:00">08:00</option><option value="08:30">08:30</option>
+                                                    <option value="09:00" selected>09:00</option><option value="09:30">09:30</option>
+                                                    <option value="10:00">10:00</option><option value="10:30">10:30</option>
+                                                </select>
+                                                <span class="text-slate-400 font-black">-</span>
+                                                <select id="mEnd" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
+                                                    <option value="13:00">13:00</option><option value="13:30">13:30</option>
+                                                    <option value="14:00" selected>14:00</option><option value="14:30">14:30</option>
+                                                    <option value="15:00">15:00</option>
+                                                </select>
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            <label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5">Tardes (Desde - Hasta)</label>
+                                            <div class="flex items-center gap-2">
+                                                <select id="aStart" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
+                                                    <option value="15:00">15:00</option><option value="15:30">15:30</option>
+                                                    <option value="16:00" selected>16:00</option><option value="16:30">16:30</option>
+                                                    <option value="17:00">17:00</option>
+                                                </select>
+                                                <span class="text-slate-400 font-black">-</span>
+                                                <select id="aEnd" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
+                                                    <option value="18:00">18:00</option><option value="18:30">18:30</option>
+                                                    <option value="19:00" selected>19:00</option><option value="19:30">19:30</option>
+                                                    <option value="20:00">20:00</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="pt-4 flex justify-end">
+                                <button onclick="savePortalConfig()" id="btnSavePortal" class="bg-blue-600 hover:bg-blue-700 text-white font-black py-3 px-8 rounded-xl shadow-lg shadow-blue-500/30 transition-all uppercase tracking-widest text-xs flex items-center gap-2">
+                                    <i data-lucide="save" class="w-4 h-4"></i> Guardar Portal
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
 
@@ -478,6 +559,7 @@
 
             if(tabId === 'others') { loadCompanies(); loadStatusesConfig(); }
             if(tabId === 'whatsapp') { checkWhatsappStatus(); }
+            if(tabId === 'portal') { loadPortalConfig(); } // CARGAR DATOS DEL PORTAL
             if(tabId === 'providers') { 
                 loadProviderCredentials(); 
                 loadIaRules(); 
@@ -718,6 +800,88 @@
             } catch(e) { showToast("Error de conexión", true); }
         }
 
+        // --- LÓGICA PORTAL DEL CLIENTE ---
+        async function loadPortalConfig() {
+            try {
+                const res = await fetch(`${API_URL}/config/company`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                if (data.ok && data.config) {
+                    document.getElementById('confCompanyName').value = data.config.full_name || "";
+                    
+                    if (data.config.company_logo) {
+                        document.getElementById('confLogoBase64').value = data.config.company_logo;
+                        document.getElementById('logoPreview').innerHTML = `<img src="${data.config.company_logo}" class="w-full h-full object-contain">`;
+                    }
+
+                    if (data.config.portal_settings) {
+                        const s = data.config.portal_settings;
+                        if(s.m_start) document.getElementById('mStart').value = s.m_start;
+                        if(s.m_end) document.getElementById('mEnd').value = s.m_end;
+                        if(s.a_start) document.getElementById('aStart').value = s.a_start;
+                        if(s.a_end) document.getElementById('aEnd').value = s.a_end;
+                    }
+                }
+            } catch (e) { console.error("Error cargando config", e); }
+        }
+
+        function encodeLogo(input) {
+            const file = input.files[0];
+            if (!file) return;
+            
+            if (file.size > 1024 * 1024) {
+                alert("La imagen es demasiado grande. Máximo 1MB.");
+                return;
+            }
+
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const base64 = e.target.result;
+                document.getElementById('confLogoBase64').value = base64;
+                document.getElementById('logoPreview').innerHTML = `<img src="${base64}" class="w-full h-full object-contain">`;
+            };
+            reader.readAsDataURL(file);
+        }
+
+        async function savePortalConfig() {
+            const btn = document.getElementById('btnSavePortal');
+            const originalText = btn.innerHTML;
+            btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
+            lucide.createIcons();
+
+            const payload = {
+                company_name: document.getElementById('confCompanyName').value,
+                company_logo: document.getElementById('confLogoBase64').value,
+                portal_settings: {
+                    m_start: document.getElementById('mStart').value,
+                    m_end: document.getElementById('mEnd').value,
+                    a_start: document.getElementById('aStart').value,
+                    a_end: document.getElementById('aEnd').value
+                }
+            };
+
+            try {
+                const res = await fetch(`${API_URL}/config/company`, {
+                    method: 'POST',
+                    headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                    body: JSON.stringify(payload)
+                });
+                const data = await res.json();
+                
+                if (data.ok) {
+                    showToast("Configuración del Portal guardada");
+                    const nameEl = document.getElementById("headerUserName");
+                    if (nameEl && payload.company_name) nameEl.innerText = payload.company_name;
+                } else {
+                    showToast("Error: " + data.error, true);
+                }
+            } catch (e) {
+                showToast("Error de conexión", true);
+            } finally {
+                btn.innerHTML = originalText;
+                lucide.createIcons();
+            }
+        }
+
         function showToast(msg, isError = false) {
             const t = document.getElementById('toast'), m = document.getElementById('toastMsg');
             t.className = `fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-xl transition-all duration-300 z-50 flex items-center gap-3 ${isError ? 'bg-red-600' : 'bg-slate-800'} text-white font-medium`;