Files
App/presupuestos.html
2026-03-29 21:44:58 +00:00

828 lines
49 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Presupuestos - IntegraRepara</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<style>
/* VARIABLES CORPORATIVAS DINÁMICAS (Igual que en el menú) */
:root {
--primary: #2563eb;
--secondary: #f59e0b;
--app-bg: #f4f7f9;
}
body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
.fade-in { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.main-content { padding-bottom: calc(env(safe-area-inset-bottom) + 80px); }
/* Clases CSS dinámicas */
.bg-primary-dynamic { background-color: var(--primary) !important; }
.text-primary-dynamic { color: var(--primary) !important; }
.border-primary-dynamic { border-color: var(--primary) !important; }
.ring-primary-dynamic:focus { outline: none; box-shadow: 0 0 0 2px var(--primary) !important; }
</style>
</head>
<body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative">
<div class="absolute top-0 left-0 w-full h-40 bg-primary-dynamic rounded-b-[2.5rem] z-0 transition-colors duration-500"></div>
<header class="px-6 pt-safe mt-8 pb-6 z-10 relative text-white shrink-0">
<div class="flex items-center justify-between mb-2">
<button onclick="window.location.href='menu.html'" class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center active:scale-95 transition-transform backdrop-blur-md">
<i data-lucide="arrow-left" class="w-5 h-5"></i>
</button>
<h1 class="text-xl font-black tracking-tight leading-none text-center">Mis Presupuestos</h1>
<div class="w-10"></div> </div>
</header>
<main id="viewList" class="flex-1 overflow-y-auto px-5 pt-4 main-content z-10 relative fade-in">
<div class="flex justify-end mb-4">
<button onclick="showCreateView()" class="bg-white text-slate-700 px-4 py-3 rounded-2xl shadow-sm border border-slate-100 text-xs font-black flex items-center gap-2 active:scale-95 transition-transform uppercase tracking-widest">
<i data-lucide="plus" class="w-4 h-4 text-primary-dynamic"></i> Nuevo Presupuesto
</button>
</div>
<div id="budgetsList" class="space-y-4 pb-10">
<div class="text-center text-slate-400 py-10 text-sm font-medium">
<i data-lucide="loader-2" class="w-8 h-8 animate-spin mx-auto mb-2 text-primary-dynamic"></i> Cargando...
</div>
</div>
</main>
<main id="viewCreate" class="hidden flex-1 overflow-y-auto px-5 pt-6 main-content z-20 fade-in bg-[var(--app-bg)] absolute inset-0 mt-[6rem] rounded-t-[2.5rem] shadow-[0_-10px_40px_rgba(0,0,0,0.1)]">
<div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-black text-slate-800">Generar Nuevo</h2>
<button onclick="hideCreateView()" class="w-8 h-8 bg-slate-200 text-slate-600 rounded-full flex items-center justify-center active:scale-95"><i data-lucide="x" class="w-4 h-4"></i></button>
</div>
<form id="budgetForm" class="space-y-5">
<div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm space-y-4">
<h3 class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-1 flex items-center gap-1"><i data-lucide="user" class="w-3 h-3"></i> Cliente</h3>
<div class="relative">
<input type="tel" id="c_phone" required placeholder="Teléfono (Busca cliente auto)" onblur="searchClientByPhone()" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-700 ring-primary-dynamic transition-all">
<i id="phoneLoading" data-lucide="loader-2" class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 text-primary-dynamic animate-spin hidden"></i>
</div>
<input type="text" id="c_name" required placeholder="Nombre del Cliente" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-700 ring-primary-dynamic transition-all">
<input type="text" id="c_address" placeholder="Dirección (Opcional)" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-700 ring-primary-dynamic transition-all">
</div>
<div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm space-y-4">
<h3 class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-1 flex items-center gap-1"><i data-lucide="shopping-cart" class="w-3 h-3"></i> Conceptos</h3>
<div id="itemsContainer" class="space-y-3 empty:hidden mb-3"></div>
<div class="grid grid-cols-12 gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100">
<div class="col-span-12">
<input type="text" id="item_concept" list="articlesList" placeholder="Añadir artículo o mano de obra..." class="w-full px-3 py-2 bg-white rounded-lg text-sm font-medium border border-slate-200 ring-primary-dynamic">
<datalist id="articlesList"></datalist>
</div>
<div class="col-span-4">
<input type="number" id="item_qty" placeholder="Cant." value="1" min="1" step="0.01" class="w-full px-3 py-2 bg-white rounded-lg text-sm font-bold text-center border border-slate-200 ring-primary-dynamic">
</div>
<div class="col-span-5">
<input type="number" id="item_price" placeholder="Precio €" min="0" step="0.01" class="w-full px-3 py-2 bg-white rounded-lg text-sm font-bold text-right border border-slate-200 ring-primary-dynamic">
</div>
<div class="col-span-3 flex items-center justify-end">
<button type="button" onclick="addItem()" class="w-full h-full bg-primary-dynamic text-white rounded-lg flex items-center justify-center active:scale-95 shadow-md"><i data-lucide="plus" class="w-5 h-5"></i></button>
</div>
</div>
</div>
<div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm relative overflow-hidden">
<div class="absolute top-0 left-0 w-1 h-full bg-primary-dynamic"></div>
<div class="flex justify-between text-sm font-medium text-slate-500 mb-1 pl-2">
<span>Subtotal:</span> <span id="lbl_subtotal">0.00 €</span>
</div>
<div class="flex justify-between text-sm font-medium text-slate-500 mb-3 pb-3 border-b border-slate-100 pl-2">
<span>IVA (21%):</span> <span id="lbl_tax">0.00 €</span>
</div>
<div class="flex justify-between text-xl font-black text-slate-800 pl-2">
<span>TOTAL:</span> <span id="lbl_total" class="text-primary-dynamic">0.00 €</span>
</div>
</div>
<button type="button" onclick="saveBudget()" id="btnSave" class="w-full bg-primary-dynamic text-white font-black py-4 rounded-2xl shadow-lg hover:opacity-90 active:scale-95 transition-all uppercase tracking-widest text-xs flex justify-center items-center gap-2 mt-2 mb-10">
<i data-lucide="save" class="w-4 h-4"></i> Generar Presupuesto
</button>
</form>
</main>
<div id="appointmentModal" class="fixed inset-0 bg-slate-900/75 hidden z-[100] flex-col justify-end backdrop-blur-sm">
<div class="bg-white w-full rounded-t-[2.5rem] p-6 pt-8 pb-safe transition-transform transform translate-y-full duration-300 max-h-[90vh] overflow-y-auto no-scrollbar" id="apptModalSheet">
<div class="flex justify-between items-center mb-6">
<div>
<span class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest bg-slate-50 border border-slate-100 px-2 py-1 rounded-md">Agendar Cita</span>
<h3 class="text-xl font-black text-slate-800 mt-2 leading-tight" id="apptClientName">Cliente</h3>
</div>
<button onclick="closeAppointmentModal()" class="p-2 bg-slate-100 rounded-full text-slate-500 active:scale-95"><i data-lucide="x" class="w-5 h-5"></i></button>
</div>
<input type="hidden" id="apptBudgetId">
<div class="space-y-4">
<div>
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Gremio Especialista *</label>
<select id="apptGuild" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-bold outline-none focus:border-blue-500">
<option value="">Selecciona gremio...</option>
</select>
</div>
<div>
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Fecha de la visita *</label>
<input type="date" id="apptDate" onchange="checkAgendaForDate(this.value)" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-bold outline-none focus:border-blue-500 text-blue-600">
</div>
<div id="agendaPreview" class="hidden bg-slate-50 border border-slate-200 rounded-2xl p-4 shadow-inner">
<p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-3 flex items-center gap-1.5"><i data-lucide="map-pin" class="w-3.5 h-3.5"></i> Tu ruta este día</p>
<div id="agendaList" class="space-y-2 text-xs font-medium text-slate-600"></div>
</div>
<div>
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Hora de llegada (Aprox) *</label>
<input type="time" id="apptTime" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-bold outline-none focus:border-blue-500 text-blue-600">
</div>
<div>
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Duración Estimada *</label>
<select id="apptDuration" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-bold outline-none focus:border-blue-500 text-slate-700">
<option value="30">30 minutos</option>
<option value="60" selected>1 hora</option>
<option value="90">1 hora y media</option>
<option value="120">2 horas</option>
<option value="180">3 horas</option>
<option value="240">4 horas</option>
</select>
</div>
<button onclick="confirmAppointment()" id="btnConfirmAppt" class="w-full bg-primary-dynamic text-white py-4 rounded-xl font-black uppercase tracking-widest shadow-lg hover:opacity-90 active:scale-95 transition-transform mt-4 flex items-center justify-center gap-2">
<i data-lucide="check-circle" class="w-5 h-5"></i> Confirmar Cita
</button>
</div>
</div>
</div>
<div id="pdf-wrapper" class="hidden">
<div id="pdf-content" style="background-color: white; color: #1e293b; font-family: Arial, Helvetica, sans-serif; width: 800px; min-height: 1120px; position: relative; padding: 30px 40px; box-sizing: border-box;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #e2e8f0; padding-bottom: 15px; margin-bottom: 20px;">
<div style="max-width: 250px; max-height: 80px;">
<img id="pdf-company-logo" src="" alt="Logo Empresa" style="max-width: 100%; max-height: 80px; object-fit: contain; display: none;">
<h2 id="pdf-company-name-fallback" style="margin:0; color:#2563eb; font-size: 22px; font-weight: 900; display: none;">IntegraRepara</h2>
</div>
<div style="text-align: right; font-size: 11px; color: #64748b; line-height: 1.4;">
<div id="pdf-company-name" style="font-size: 14px; font-weight: 900; color: #0f172a; margin-bottom: 2px;">Empresa S.L.</div>
<div id="pdf-company-dni">CIF: B12345678</div>
<div id="pdf-company-address">Calle Falsa 123</div>
<div id="pdf-company-location">28000 Madrid (Madrid)</div>
</div>
</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
<div>
<h1 style="font-size: 24px; font-weight: 900; color: #2563eb; margin: 0 0 5px 0; letter-spacing: -1px;">PRESUPUESTO</h1>
<div style="font-size: 12px; color: #64748b; line-height: 1.4;">
<strong>Referencia:</strong> <span id="pdf-budget-id">#PRE-000</span><br>
<strong>Fecha:</strong> <span id="pdf-date">01/01/2026</span><br>
<strong>Validez:</strong> 30 días<br>
</div>
</div>
<div style="background-color: #f8fafc; border: 1px solid #e2e8f0; padding: 12px 15px; border-radius: 8px; width: 280px;">
<h3 style="margin: 0 0 5px 0; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; font-weight: 800;">Presupuestado a:</h3>
<p id="pdf-client-name" style="font-size: 14px; font-weight: 800; color: #0f172a; margin: 0 0 4px 0;">Nombre Cliente</p>
<p style="font-size: 12px; margin: 0; color: #475569; line-height: 1.4;">
<span id="pdf-client-phone">Teléfono</span><br>
<span id="pdf-client-address">Dirección</span>
</p>
</div>
</div>
<table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
<thead>
<tr>
<th style="background: #f1f5f9; color: #475569; font-weight: 800; text-transform: uppercase; font-size: 10px; padding: 8px 10px; text-align: left; border-bottom: 2px solid #cbd5e1; border-radius: 6px 0 0 0;">Concepto</th>
<th style="background: #f1f5f9; color: #475569; font-weight: 800; text-transform: uppercase; font-size: 10px; padding: 8px 10px; text-align: center; border-bottom: 2px solid #cbd5e1;">Cant.</th>
<th style="background: #f1f5f9; color: #475569; font-weight: 800; text-transform: uppercase; font-size: 10px; padding: 8px 10px; text-align: right; border-bottom: 2px solid #cbd5e1;">Precio Ud.</th>
<th style="background: #f1f5f9; color: #475569; font-weight: 800; text-transform: uppercase; font-size: 10px; padding: 8px 10px; text-align: right; border-bottom: 2px solid #cbd5e1; border-radius: 0 6px 0 0;">Subtotal</th>
</tr>
</thead>
<tbody id="pdf-items">
</tbody>
</table>
<div style="width: 250px; margin-left: auto; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; margin-bottom: 20px;">
<div style="display: flex; justify-content: space-between; padding: 8px 15px; font-size: 11px; border-bottom: 1px solid #f1f5f9; color: #475569;">
<span style="font-weight: 600; text-transform: uppercase;">Base Imponible</span>
<span id="pdf-subtotal" style="font-weight: 800; color: #0f172a;">0.00 €</span>
</div>
<div style="display: flex; justify-content: space-between; padding: 8px 15px; font-size: 11px; border-bottom: 1px solid #f1f5f9; color: #475569;">
<span style="font-weight: 600; text-transform: uppercase;">IVA (21%)</span>
<span id="pdf-tax" style="font-weight: 800; color: #0f172a;">0.00 €</span>
</div>
<div style="display: flex; justify-content: space-between; padding: 10px 15px; background: var(--primary); color: white;">
<span style="font-weight: 900; font-size: 13px;">TOTAL A PAGAR</span>
<span id="pdf-total" style="font-weight: 900; font-size: 16px;">0.00 €</span>
</div>
</div>
<div style="position: absolute; bottom: 30px; left: 40px; right: 40px;">
<div id="pdf-bank-info" style="margin-bottom: 10px; padding: 12px 15px; background-color: #f0fdf4; border-left: 4px solid #22c55e; border-radius: 0 6px 6px 0; font-size: 11px; color: #166534; display: none;">
<strong>INFORMACIÓN DE PAGO</strong><br>
Para confirmar el presupuesto, por favor realice una transferencia a la siguiente cuenta:<br>
<span id="pdf-bank-account" style="font-size: 14px; font-weight: 900; letter-spacing: 1px; margin-top: 4px; display: inline-block;">ES00 0000 0000 0000 0000</span>
</div>
<div id="pdf-obs-info" style="margin-bottom: 15px; padding: 12px 15px; background-color: #fefce8; border-left: 4px solid #f59e0b; border-radius: 0 6px 6px 0; font-size: 10px; color: #713f12; display: none;">
<strong>OBSERVACIONES Y CONDICIONES</strong><br>
<span id="pdf-obs-text"></span>
</div>
<div style="text-align: center; font-size: 9px; color: #94a3b8; border-top: 1px solid #e2e8f0; padding-top: 10px;">
Documento generado por IntegraRepara - Sistema de Gestión de Asistencias
</div>
</div>
</div>
</div>
<div id="toast" class="fixed bottom-5 left-1/2 -translate-x-1/2 bg-slate-800 text-white px-6 py-3 rounded-full text-xs font-bold tracking-wide shadow-2xl opacity-0 pointer-events-none transition-opacity z-50 flex items-center gap-2">
<i data-lucide="info" class="w-4 h-4"></i> <span id="toastMsg">Mensaje</span>
</div>
<script>
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
? 'http://localhost:3000'
: 'https://integrarepara-api.integrarepara.es';
let catalog = [];
let currentItems = [];
let allBudgets = [];
// ------------------ INICIALIZACIÓN Y TEMA CORPORATIVO ------------------
async function applyTheme() {
try {
let theme = JSON.parse(localStorage.getItem('app_theme'));
const res = await fetch(`${API_URL}/services/active`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); const data = await res.json();
if(data.ok && data.config && data.config.portal_settings && data.config.portal_settings.app_settings) {
theme = data.config.portal_settings.app_settings;
localStorage.setItem('app_theme', JSON.stringify(theme));
}
if(theme) {
document.documentElement.style.setProperty('--primary', theme.primary);
document.documentElement.style.setProperty('--secondary', theme.secondary);
document.documentElement.style.setProperty('--app-bg', theme.bg);
}
} catch (e) { console.warn("Usando tema por defecto"); }
}
document.addEventListener("DOMContentLoaded", async () => {
if (!localStorage.getItem("token")) { window.location.href = "index.html"; return; }
await applyTheme();
lucide.createIcons();
await fetchArticles();
await fetchBudgets();
document.getElementById('item_concept').addEventListener('change', (e) => {
const art = catalog.find(a => a.name === e.target.value);
if(art) document.getElementById('item_price').value = art.price;
});
});
// ------------------ NAVEGACIÓN Y TOASTS ------------------
function showCreateView() {
document.getElementById('viewList').classList.add('hidden');
document.getElementById('viewCreate').classList.remove('hidden');
currentItems = [];
document.getElementById('budgetForm').reset();
renderItems();
}
function hideCreateView() {
document.getElementById('viewCreate').classList.add('hidden');
document.getElementById('viewList').classList.remove('hidden');
}
function showToast(msg) {
const toast = document.getElementById('toast');
document.getElementById('toastMsg').innerText = msg;
toast.classList.remove('opacity-0');
setTimeout(() => toast.classList.add('opacity-0'), 3000);
}
// ------------------ API CALLS ------------------
async function fetchArticles() {
try {
const res = await fetch(`${API_URL}/articles`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
if(data.ok) {
catalog = data.articles;
const dl = document.getElementById('articlesList');
dl.innerHTML = '';
catalog.forEach(a => {
const opt = document.createElement('option');
opt.value = a.name;
dl.appendChild(opt);
});
}
} catch(e) {}
}
async function fetchBudgets() {
try {
const res = await fetch(`${API_URL}/budgets`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
if(data.ok) {
allBudgets = data.budgets;
renderBudgetsList(allBudgets);
}
} catch(e) {
document.getElementById('budgetsList').innerHTML = `<div class="text-center text-rose-500 py-6 text-sm font-bold">Error de conexión</div>`;
}
}
// ------------------ ACCIONES DE LOS PRESUPUESTOS ------------------
async function updateStatus(id, newStatus) {
try {
const res = await fetch(`${API_URL}/budgets/${id}/status`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json', "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ status: newStatus })
});
const data = await res.json();
if (data.ok) {
showToast(newStatus === 'accepted' ? "¡Presupuesto Aceptado!" : "Presupuesto Rechazado");
fetchBudgets();
} else { showToast("Error al actualizar"); }
} catch (e) { showToast("Error de conexión"); }
}
async function deleteBudget(id) {
if (!confirm("¿Seguro que quieres borrar este presupuesto?")) return;
try {
const res = await fetch(`${API_URL}/budgets/${id}`, {
method: 'DELETE',
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
});
const data = await res.json();
if (data.ok) {
showToast("Presupuesto borrado correctamente");
fetchBudgets();
} else {
showToast(data.error || "No se puede borrar este presupuesto");
}
} catch (e) { showToast("Error de conexión"); }
}
async function downloadPDF(id) {
const budget = allBudgets.find(b => b.id === id);
if(!budget) return showToast("❌ Error: Presupuesto no encontrado");
showToast("⏳ Generando PDF, espera unos segundos...");
let empNombre = "IntegraRepara";
let empDni = "CIF/NIF no configurado";
let empAddress = "Dirección no configurada";
let empCity = "";
let empState = "";
let empZip = "";
let empLogo = null;
let empIban = null;
let empObs = null;
try {
const confRes = await fetch(`${API_URL}/config/company`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const confData = await confRes.json();
if (confData.ok && confData.config) {
empLogo = confData.config.company_logo || null;
if (confData.config.billing_settings) {
const bSet = confData.config.billing_settings;
empNombre = bSet.name || confData.config.full_name || empNombre;
empDni = bSet.dni ? `CIF/NIF: ${bSet.dni}` : empDni;
empAddress = bSet.address || empAddress;
empCity = bSet.city || "";
empState = bSet.state || "";
empZip = bSet.zip || "";
empIban = bSet.iban || null;
empObs = bSet.obs || null;
} else {
empNombre = confData.config.full_name || empNombre;
}
}
} catch(e) { console.error("Error al cargar facturación", e); }
document.getElementById('pdf-company-name').innerText = empNombre;
document.getElementById('pdf-company-dni').innerText = empDni;
document.getElementById('pdf-company-address').innerText = empAddress;
document.getElementById('pdf-company-location').innerText = [empZip, empCity, empState ? `(${empState})` : ''].filter(Boolean).join(' ');
const logoImg = document.getElementById('pdf-company-logo');
const logoTxt = document.getElementById('pdf-company-name-fallback');
if (empLogo) {
logoImg.src = empLogo;
logoImg.style.display = 'block';
logoTxt.style.display = 'none';
} else {
logoImg.style.display = 'none';
logoTxt.innerText = empNombre;
logoTxt.style.display = 'block';
}
document.getElementById('pdf-budget-id').innerText = `#PRE-${budget.id}`;
document.getElementById('pdf-date').innerText = new Date(budget.created_at).toLocaleDateString('es-ES');
document.getElementById('pdf-client-name').innerText = budget.client_name || "Cliente Sin Nombre";
document.getElementById('pdf-client-phone').innerText = budget.client_phone || "-";
document.getElementById('pdf-client-address').innerText = budget.client_address || "-";
const itemsHtml = (budget.items || []).map(item => `
<tr>
<td style="padding: 8px 10px; border-bottom: 1px solid #e2e8f0; font-size: 12px; color: #334155;">${item.concept}</td>
<td style="padding: 8px 10px; border-bottom: 1px solid #e2e8f0; font-size: 12px; color: #334155; text-align: center;">${item.qty}</td>
<td style="padding: 8px 10px; border-bottom: 1px solid #e2e8f0; font-size: 12px; color: #334155; text-align: right;">${parseFloat(item.price).toFixed(2)} €</td>
<td style="padding: 8px 10px; border-bottom: 1px solid #e2e8f0; font-size: 12px; font-weight: 700; color: #0f172a; text-align: right;">${(item.qty * item.price).toFixed(2)} €</td>
</tr>
`).join('');
document.getElementById('pdf-items').innerHTML = itemsHtml;
document.getElementById('pdf-subtotal').innerText = parseFloat(budget.subtotal).toFixed(2) + " €";
document.getElementById('pdf-tax').innerText = parseFloat(budget.tax).toFixed(2) + " €";
document.getElementById('pdf-total').innerText = parseFloat(budget.total).toFixed(2) + " €";
const bankContainer = document.getElementById('pdf-bank-info');
if (empIban) {
document.getElementById('pdf-bank-account').innerText = empIban;
bankContainer.style.display = 'block';
} else {
bankContainer.style.display = 'none';
}
const obsContainer = document.getElementById('pdf-obs-info');
if (empObs) {
document.getElementById('pdf-obs-text').innerHTML = empObs.replace(/\n/g, '<br>');
obsContainer.style.display = 'block';
} else {
obsContainer.style.display = 'none';
}
const wrapper = document.getElementById('pdf-wrapper');
wrapper.classList.remove('hidden');
wrapper.style.position = 'absolute';
wrapper.style.left = '-9999px';
const element = document.getElementById('pdf-content');
const opt = {
margin: 0,
filename: `Presupuesto_PRE${budget.id}_${(budget.client_name||'').replace(/\s+/g, '_')}.pdf`,
image: { type: 'jpeg', quality: 1 },
html2canvas: { scale: 2, useCORS: true, logging: false },
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
};
try {
await new Promise(r => setTimeout(r, 500));
await html2pdf().set(opt).from(element).save();
showToast("✅ PDF Descargado con éxito");
} catch (error) {
console.error(error);
showToast("❌ Error al generar el PDF");
} finally {
wrapper.classList.add('hidden');
wrapper.style.position = '';
wrapper.style.left = '';
}
}
// ------------------ RENDERIZAR LA LISTA EN PANTALLA ------------------
function renderBudgetsList(budgets) {
const container = document.getElementById('budgetsList');
if(budgets.length === 0) {
container.innerHTML = `
<div class="text-center bg-white border border-slate-100 p-8 rounded-[2rem] shadow-sm">
<div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-3"><i data-lucide="file-x-2" class="w-8 h-8 text-slate-300"></i></div>
<h3 class="text-sm font-black text-slate-700 mb-1">No hay presupuestos</h3>
<p class="text-xs text-slate-400 font-medium">Aún no has generado ninguno.</p>
</div>`;
lucide.createIcons();
return;
}
container.innerHTML = budgets.map(b => {
let bDate = new Date(b.created_at);
let diffDays = Math.ceil(Math.abs(new Date() - bDate) / (1000 * 60 * 60 * 24));
let isExpired = diffDays > 30;
let statusColor = "bg-amber-100 text-amber-700";
let statusText = "Pte. Resolver";
let icon = "clock";
if (b.status === 'paid') {
statusColor = "bg-emerald-100 text-emerald-700 border border-emerald-200"; statusText = "Pagado Online"; icon = "badge-check";
} else if (isExpired && b.status !== 'rejected') {
statusColor = "bg-slate-100 text-slate-500 border border-slate-200"; statusText = "Caducado"; icon = "clock-alert";
} else if (b.status === 'accepted' || b.status === 'converted') {
statusColor = "bg-blue-100 text-blue-700 border border-blue-200"; statusText = "Aceptado (Pte. Pago)"; icon = "clock";
} else if (b.status === 'rejected') {
statusColor = "bg-rose-100 text-rose-700"; statusText = "Rechazado"; icon = "x-circle";
}
const d = bDate.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: '2-digit' });
let actionBtns = '';
if (b.status === 'pending' && !isExpired) {
actionBtns = `
<button onclick="updateStatus(${b.id}, 'accepted')" class="w-9 h-9 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center active:scale-95 transition-transform border border-emerald-100"><i data-lucide="check" class="w-5 h-5"></i></button>
<button onclick="updateStatus(${b.id}, 'rejected')" class="w-9 h-9 bg-rose-50 text-rose-600 rounded-full flex items-center justify-center active:scale-95 transition-transform border border-rose-100"><i data-lucide="x" class="w-5 h-5"></i></button>
`;
} else if ((b.status === 'accepted' || b.status === 'paid') && !isExpired) {
// Usamos bg-primary-dynamic en vez de bg-emerald
actionBtns = `<button onclick="openAppointmentModal(${b.id}, '${b.client_name}')" class="bg-primary-dynamic text-white px-3 py-1.5 rounded-xl font-black text-[10px] uppercase tracking-widest shadow-md hover:opacity-90 active:scale-95 transition-transform">Dar Cita</button>`;
} else if (b.status === 'converted') {
// Usamos text-primary-dynamic
actionBtns = `<span class="text-[9px] font-black text-primary-dynamic uppercase tracking-widest bg-slate-50 px-2 py-1 rounded-md border border-slate-100">Agendado</span>`;
} else {
actionBtns = `<span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Cerrado</span>`;
}
return `
<div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm flex flex-col gap-4 relative overflow-hidden fade-in">
<div class="absolute top-0 left-0 w-1.5 h-full ${b.status === 'paid' ? 'bg-emerald-500' : (isExpired ? 'bg-slate-300' : 'bg-primary-dynamic')}"></div>
<div class="flex justify-between items-start pl-2">
<div class="w-[60%]">
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">PRE-${b.id}${d}</span>
<h3 class="text-sm font-bold text-slate-800 truncate">${b.client_name || 'Sin Nombre'}</h3>
<div class="${statusColor} text-[8px] font-black px-2 py-0.5 rounded-md uppercase tracking-wider flex items-center gap-1 w-max mt-2">
<i data-lucide="${icon}" class="w-3 h-3"></i> ${statusText}
</div>
</div>
<div class="text-right">
<p class="text-xl font-black text-slate-800">${parseFloat(b.total).toFixed(2)}€</p>
<p class="text-[9px] font-bold text-slate-400 mt-1">${b.client_phone}</p>
</div>
</div>
<div class="pt-3 border-t border-slate-100 flex justify-between items-center pl-2">
<div class="flex gap-2 items-center">
${actionBtns}
</div>
<div class="flex gap-2">
<button onclick="downloadPDF(${b.id})" class="w-9 h-9 bg-slate-50 border border-slate-200 text-slate-600 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="download" class="w-4 h-4"></i></button>
<button onclick="deleteBudget(${b.id})" class="w-9 h-9 bg-slate-50 border border-slate-200 text-rose-500 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
</div>
</div>
</div>
`;
}).join('');
lucide.createIcons();
}
async function searchClientByPhone() {
const phoneInput = document.getElementById('c_phone');
const phone = phoneInput.value.trim();
const loading = document.getElementById('phoneLoading');
if (!phone || phone.length < 9) return;
loading.classList.remove('hidden');
try {
const res = await fetch(`${API_URL}/clients/search?phone=${encodeURIComponent(phone)}`, {
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
});
const data = await res.json();
if (data.ok && data.client) {
document.getElementById('c_name').value = data.client.full_name || '';
if (data.client.addresses && data.client.addresses.length > 0) {
document.getElementById('c_address').value = data.client.addresses[0] || '';
}
showToast("✅ Cliente encontrado y cargado");
}
} catch (e) { console.error("Error buscando cliente", e); }
finally { loading.classList.add('hidden'); }
}
function addItem() {
const conceptInput = document.getElementById('item_concept');
const qtyInput = document.getElementById('item_qty');
const priceInput = document.getElementById('item_price');
const concept = conceptInput.value.trim();
const qty = parseFloat(qtyInput.value);
const price = parseFloat(priceInput.value);
if(!concept || isNaN(qty) || isNaN(price)) { showToast("Rellena concepto y precio."); return; }
currentItems.push({ concept, qty, price, total: qty * price });
conceptInput.value = ''; qtyInput.value = '1'; priceInput.value = '';
conceptInput.focus();
renderItems();
}
function removeItem(index) {
currentItems.splice(index, 1);
renderItems();
}
function renderItems() {
const cont = document.getElementById('itemsContainer');
cont.innerHTML = currentItems.map((item, idx) => `
<div class="flex justify-between items-center bg-slate-50 p-3 rounded-xl border border-slate-100 text-sm">
<div class="w-[60%]">
<p class="font-bold text-slate-700 truncate">${item.concept}</p>
<p class="text-[10px] text-slate-400 font-medium uppercase">${item.qty} ud x ${item.price.toFixed(2)}€</p>
</div>
<div class="flex items-center gap-3">
<span class="font-black text-slate-800">${item.total.toFixed(2)}€</span>
<button type="button" onclick="removeItem(${idx})" class="w-7 h-7 bg-white shadow-sm border border-slate-100 text-rose-500 rounded-full flex items-center justify-center active:scale-90"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
</div>
</div>
`).join('');
lucide.createIcons();
calcTotals();
}
function calcTotals() {
let sub = 0;
currentItems.forEach(i => sub += i.total);
let tax = sub * 0.21;
let tot = sub + tax;
document.getElementById('lbl_subtotal').innerText = `${sub.toFixed(2)}`;
document.getElementById('lbl_tax').innerText = `${tax.toFixed(2)}`;
document.getElementById('lbl_total').innerText = `${tot.toFixed(2)}`;
return { sub, tax, tot };
}
async function saveBudget() {
if(currentItems.length === 0) { showToast("Añade al menos 1 artículo."); return; }
const cName = document.getElementById('c_name').value.trim();
const cPhone = document.getElementById('c_phone').value.trim();
const cAddress = document.getElementById('c_address').value.trim();
if(!cName || !cPhone) { showToast("Nombre y teléfono obligatorios."); return; }
const btn = document.getElementById('btnSave');
btn.disabled = true;
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Generando...';
lucide.createIcons();
const totals = calcTotals();
const payload = { client_name: cName, client_phone: cPhone, client_address: cAddress, items: currentItems, subtotal: totals.sub, tax: totals.tax, total: totals.tot };
try {
const res = await fetch(`${API_URL}/budgets`, {
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("¡Presupuesto Creado!");
hideCreateView();
fetchBudgets();
} else { showToast("Error al guardar."); }
} catch(e) { showToast("Fallo de conexión."); }
finally {
btn.disabled = false;
btn.innerHTML = '<i data-lucide="save" class="w-4 h-4"></i> Generar Presupuesto';
lucide.createIcons();
}
}
function openAppointmentModal(id, clientName) {
document.getElementById('apptBudgetId').value = id;
document.getElementById('apptClientName').innerText = clientName || "Cliente";
document.getElementById('apptDate').value = "";
document.getElementById('apptTime').value = "";
document.getElementById('agendaPreview').classList.add('hidden');
document.getElementById('appointmentModal').classList.remove('hidden');
document.getElementById('appointmentModal').classList.add('flex');
setTimeout(() => document.getElementById('apptModalSheet').classList.remove('translate-y-full'), 10);
loadGuilds();
}
function closeAppointmentModal() {
document.getElementById('apptModalSheet').classList.add('translate-y-full');
setTimeout(() => {
document.getElementById('appointmentModal').classList.add('hidden');
document.getElementById('appointmentModal').classList.remove('flex');
}, 300);
}
async function loadGuilds() {
const gSel = document.getElementById('apptGuild');
gSel.innerHTML = '<option value="">Cargando gremios...</option>';
try {
const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
gSel.innerHTML = '<option value="">Selecciona Gremio...</option>';
if (data.ok && data.guilds) {
data.guilds.forEach(g => { gSel.innerHTML += `<option value="${g.id}">${g.name}</option>`; });
}
} catch (e) { gSel.innerHTML = '<option value="">Error al cargar</option>'; }
}
async function checkAgendaForDate(dateStr) {
const preview = document.getElementById('agendaPreview');
const list = document.getElementById('agendaList');
if(!dateStr) { preview.classList.add('hidden'); return; }
preview.classList.remove('hidden');
list.innerHTML = '<div class="text-center text-primary-dynamic py-2"><i data-lucide="loader-2" class="w-4 h-4 animate-spin mx-auto"></i></div>';
lucide.createIcons();
try {
const res = await fetch(`${API_URL}/services/active`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
if(data.ok && data.services) {
// 🛑 FIX: Buscamos la fecha DENTRO de raw_data
const dayServices = data.services.filter(s => {
const raw = s.raw_data || {};
return raw.scheduled_date === dateStr && s.status !== 'archived';
});
if(dayServices.length === 0) {
list.innerHTML = '<p class="text-emerald-600 font-bold text-center py-2 bg-white rounded-lg border border-emerald-100 shadow-sm">Libre: No tienes nada agendado este día.</p>';
return;
}
// 🛑 FIX: Ordenamos leyendo la hora DENTRO de raw_data
dayServices.sort((a, b) => {
const timeA = (a.raw_data && a.raw_data.scheduled_time) ? a.raw_data.scheduled_time : "23:59";
const timeB = (b.raw_data && b.raw_data.scheduled_time) ? b.raw_data.scheduled_time : "23:59";
return timeA.localeCompare(timeB);
});
list.innerHTML = dayServices.map(s => {
const raw = s.raw_data || {};
const pob = raw['Población'] || raw['POBLACION-PROVINCIA'] || raw['Dirección'] || 'Sin ubicación';
// 🛑 FIX: Leemos la hora a pintar DENTRO de raw_data
const time = raw.scheduled_time ? raw.scheduled_time.substring(0,5) : 'S/H';
return `
<div class="flex justify-between items-center bg-white p-2.5 rounded-lg border border-slate-200 shadow-sm">
<span class="font-black text-primary-dynamic bg-slate-50 px-2 py-0.5 rounded border border-slate-100">${time}</span>
<span class="text-slate-600 truncate max-w-[150px] text-right font-bold text-[10px] uppercase tracking-widest" title="${pob}">${pob}</span>
</div>
`;
}).join('');
}
} catch(e) { list.innerHTML = '<p class="text-rose-500 text-center py-2">Error de conexión.</p>'; }
}
async function confirmAppointment() {
const id = document.getElementById('apptBudgetId').value;
const guild_id = document.getElementById('apptGuild').value;
const date = document.getElementById('apptDate').value;
const time = document.getElementById('apptTime').value;
const duration = document.getElementById('apptDuration').value;
if (!guild_id || !date || !time) return showToast("⚠️ Gremio, Fecha y Hora son obligatorios.");
const btn = document.getElementById('btnConfirmAppt');
btn.disabled = true;
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Procesando...';
// 🛑 FIX PARA EL ERROR 500: Extraemos tu ID real de usuario leyendo el token
let myId = null;
try {
const tokenBase64 = localStorage.getItem("token").split('.')[1];
myId = JSON.parse(atob(tokenBase64)).sub;
} catch(e) {
console.error("No se pudo leer el ID del token");
}
const payload = {
guild_id: guild_id,
date: date,
time: time,
duration_minutes: duration,
use_automation: false,
assigned_to: myId // <--- ¡AHORA ENVÍA TU NÚMERO DE ID CORRECTO!
};
try {
const res = await fetch(`${API_URL}/budgets/${id}/convert`, {
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("✅ ¡Cita agendada con éxito!");
closeAppointmentModal();
fetchBudgets();
} else { showToast("❌ " + (data.error || "Error al agendar cita.")); }
} catch(e) { showToast("❌ Error de conexión al convertir."); }
finally {
btn.disabled = false;
btn.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5"></i> Confirmar Cita';
lucide.createIcons();
}
}
</script>
</body>
</html>