<!
DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Franco Romeu - Orçamento Automatizado</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #043451 0%, #8f1133 50%, #fc7016 100%);
min-height: 100vh;
color: #2c3e50;
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px;
text-align: center;
margin-bottom: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
border: 2px solid #fc7016;
.header h1 {
color: #043451;
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.header p {
color: #8f1133;
font-size: 1.1rem;
font-weight: 600;
.contact-info {
margin-top: 15px;
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
.contact-item {
color: #043451;
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
.main-content {
display: grid;
grid-template-columns: 1fr 400px;
gap: 30px;
.form-section, .orcamento-summary {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
border: 1px solid #fc7016;
.orcamento-summary {
height: fit-content;
position: sticky;
top: 20px;
.form-group {
margin-bottom: 25px;
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #043451;
.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none;
border-color: #fc7016;
box-shadow: 0 0 0 3px rgba(252, 112, 22, 0.1);
.btn {
background: linear-gradient(135deg, #fc7016 0%, #8f1133 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
margin-right: 10px;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(252, 112, 22, 0.3);
}
.btn-secondary {
background: linear-gradient(135deg, #043451 0%, #2c3e50 100%);
.btn-success {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
margin-top: 15px;
}
.checkbox-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
.checkbox-item:hover {
background: #e9ecef;
border-color: #fc7016;
.checkbox-item input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
.servico-config {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
border-left: 4px solid #fc7016;
.servico-header {
font-size: 1.2rem;
font-weight: 600;
color: #043451;
margin-bottom: 15px;
.summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e9ecef;
.summary-total {
font-size: 1.3rem;
font-weight: 700;
color: #043451;
border-top: 2px solid #fc7016;
padding-top: 15px;
margin-top: 15px;
}
.step-indicator {
display: flex;
justify-content: center;
margin-bottom: 30px;
gap: 20px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.step.active {
color: white;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
font-weight: 600;
.step.active .step-number {
background: #fc7016;
color: white;
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(5px);
.modal-content {
background: white;
margin: 5% auto;
padding: 30px;
border-radius: 15px;
width: 90%;
max-width: 600px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
border: 2px solid #fc7016;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
.close:hover {
color: #8f1133;
.alert-warning {
background: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 4px solid #fc7016;
.alert-warning strong {
color: #8f1133;
.config-section {
margin-bottom: 20px;
padding: 15px;
background: #fff;
border-radius: 8px;
border: 1px solid #e9ecef;
.config-section h4 {
color: #043451;
margin-bottom: 10px;
font-size: 1.1rem;
}
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
.contact-info {
flex-direction: column;
align-items: center;
gap: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Franco Romeu</h1>
<p>Orçamentos Automatizados para Reforma, Móveis e Decoração</p>
<div class="contact-info">
<div class="contact-item">
<span> 📞 </span>
<span>11 9002 1603</span>
</div>
<div class="contact-item">
<span> ✉️</span>
<span>romeudifranco@gmail.com</span>
</div>
</div>
</div>
<div class="alert-warning">
<strong> ⚠️ IMPORTANTE:</strong> Todos os orçamentos requerem visita técnica de R$ 9
Este valor será descontado do orçamento final. O preço final será definido após a visita té
</div>
<div class="step-indicator">
<div class="step active" id="step1">
<div class="step-number">1</div>
<span>Medidas</span>
</div>
<div class="step" id="step2">
<div class="step-number">2</div>
<span>Serviços</span>
</div>
<div class="step" id="step3">
<div class="step-number">3</div>
<span>Detalhes</span>
</div>
<div class="step" id="step4">
<div class="step-number">4</div>
<span>Orçamento</span>
</div>
</div>
<div class="main-content">
<div class="form-section">
<!-- Etapa 1: Informações Básicas -->
<div id="etapa1">
<h2>Informações Básicas</h2>
<div class="form-group">
<label for="ambiente">Local do Serviço:</label>
<select id="ambiente">
<option value="">Selecione o ambiente</option>
<option value="cozinha">Cozinha</option>
<option value="banheiro">Banheiro</option>
<option value="quarto">Quarto</option>
<option value="sala">Sala</option>
<option value="area_externa">Área Externa</option>
<option value="escritorio">Escritório</option>
<option value="lavanderia">Lavanderia</option>
<option value="garagem">Garagem</option>
</select>
</div>
<div class="form-group">
<label for="metragem">Metragem (m²):</label>
<input type="number" id="metragem" placeholder="Ex: 25" min="1" step="0.1">
</div>
<button class="btn" onclick="proximaEtapa(2)">Próximo Passo →</button>
</div>
<!-- Etapa 2: Seleção de Serviços -->
<div id="etapa2" style="display: none;">
<h2>Selecione os Serviços</h2>
<div class="checkbox-group" id="servicosDisponiveis">
<!-- Serviços carregados dinamicamente -->
</div>
<div style="margin-top: 30px;">
<button class="btn btn-secondary" onclick="voltarEtapa(1)">← Voltar</button>
<button class="btn" onclick="proximaEtapa(3)">Próximo Passo →</button>
</div>
</div>
<!-- Etapa 3: Configuração dos Serviços -->
<div id="etapa3" style="display: none;">
<h2>Configuração dos Serviços</h2>
<div id="configuracaoServicos">
<!-- Configurações aparecerão dinamicamente -->
</div>
<div style="margin-top: 30px;">
<button class="btn btn-secondary" onclick="voltarEtapa(2)">← Voltar</button>
<button class="btn" onclick="proximaEtapa(4)">Gerar Orçamento →</button>
</div>
</div>
<!-- Etapa 4: Finalização -->
<div id="etapa4" style="display: none;">
<h2>Finalizar Orçamento</h2>
<div class="form-group">
<label for="nomeCliente">Nome Completo:</label>
<input type="text" id="nomeCliente" placeholder="Seu nome completo">
</div>
<div class="form-group">
<label for="telefoneCliente">Telefone:</label>
<input type="tel" id="telefoneCliente" placeholder="(11) 99999-9999">
</div>
<div class="form-group">
<label for="emailCliente">E-mail:</label>
<input type="email" id="emailCliente" placeholder="seu@email.com">
</div>
<div class="form-group">
<label for="observacoes">Observações:</label>
<textarea id="observacoes" rows="3" placeholder="Informações adicionais..."></tex
</div>
<div style="margin-top: 30px;">
<button class="btn btn-secondary" onclick="voltarEtapa(3)">← Voltar</button>
<button class="btn btn-success" onclick="finalizarOrcamento()">Finalizar Orçament
</div>
</div>
</div>
<div class="orcamento-summary">
<h3>Resumo do Orçamento</h3>
<div id="resumoServicos">
<p style="text-align: center; color: #666; margin: 20px 0;">
Selecione os serviços para ver o resumo
</p>
</div>
<div class="summary-total">
<div class="summary-item">
<span>Subtotal:</span>
<span id="valorSubtotal">R$ 0,00</span>
</div>
<div class="summary-item">
<span>Visita Técnica:</span>
<span>R$ 99,00</span>
</div>
<div class="summary-item" style="border-top: 2px solid #fc7016; padding-top: 10px;">
<span><strong>Total:</strong></span>
<span id="valorTotal"><strong>R$ 99,00</strong></span>
</div>
<div class="summary-item">
<span>Entrada (10%):</span>
<span id="valorEntrada">R$ 9,90</span>
</div>
</div>
</div>
</div>
</div>
<!-- Modal de Sucesso -->
<div id="modalSucesso" class="modal">
<div class="modal-content">
<span class="close" onclick="fecharModal()">×</span>
<h2> 🎉 Orçamento Gerado com Sucesso!</h2>
<p>Seu orçamento foi criado. Entraremos em contato para agendar a visita técnica de R$
<div class="alert-warning">
<strong>Lembre-se:</strong> O valor da visita técnica será descontado do valor final do
</div>
<div id="detalhesOrcamento"></div>
<div style="margin-top: 20px; text-align: center;">
<button class="btn btn-success" onclick="gerarPDF()"> 📄 Baixar PDF</button>
<button class="btn" onclick="novoOrcamento()"> 🔄 Novo Orçamento</button>
</div>
</div>
</div>
<script>
// Catálogo de serviços expandido
const catalogos = {
massa_corrida: {
nome: "Massa Corrida",
unidade: "m²",
preco_base: 25,
configuracoes: {
condicao_parede: {
nome: "Condição da Parede",
opcoes: [
{ nome: "Parede Crua (sem pintura)", adicional: 0 },
{ nome: "Com Revestimento Antigo", adicional: 12 },
{ nome: "Com Pintura Descascando", adicional: 8 },
{ nome: "Com Fungos/Mofo", adicional: 15 },
{ nome: "Com Bolhas/Umidade", adicional: 18 }
},
tipo_tinta: {
nome: "Tipo de Tinta",
opcoes: [
{ nome: "Tinta Acrílica Padrão", adicional: 0 },
{ nome: "Tinta Premium", adicional: 8 },
{ nome: "Tinta Antimicrobiana", adicional: 12 },
{ nome: "Tinta Texturizada", adicional: 15 }
}
},
pintura: {
nome: "Pintura",
unidade: "m²",
preco_base: 20,
configuracoes: {
condicao_superficie: {
nome: "Condição da Superfície",
opcoes: [
{ nome: "Superfície Preparada", adicional: 0 },
{ nome: "Com Textura Existente", adicional: 7 },
{ nome: "Sobre Revestimento", adicional: 12 },
{ nome: "Com Fungos/Mofo", adicional: 15 },
{ nome: "Parede Descascando", adicional: 10 },
{ nome: "Com Bolhas/Umidade", adicional: 16 }
]
},
tipo_tinta: {
nome: "Tipo de Tinta",
opcoes: [
{ nome: "Tinta Acrílica Padrão", adicional: 0 },
{ nome: "Tinta Premium", adicional: 8 },
{ nome: "Tinta Antimicrobiana", adicional: 12 },
{ nome: "Esmalte Premium", adicional: 18 }
]
}
},
revestimento: {
nome: "Revestimento",
unidade: "m²",
preco_base: 60,
configuracoes: {
condicao_piso: {
nome: "Condição do Piso",
opcoes: [
{ nome: "Contrapiso Cru", adicional: 0 },
{ nome: "Remover Revestimento Antigo", adicional: 25 },
{ nome: "Piso sobre Piso", adicional: 15 },
{ nome: "Nivelamento Necessário", adicional: 20 }
]
},
tipo_revestimento: {
nome: "Tipo de Revestimento",
opcoes: [
{ nome: "Cerâmica Padrão", adicional: 0 },
{ nome: "Porcelanato", adicional: 20 },
{ nome: "Pedra Natural", adicional: 35 },
{ nome: "Laminado", adicional: 15 }
]
}
},
forro_gesso: {
nome: "Forro de Gesso",
unidade: "m²",
preco_base: 75,
configuracoes: {
condicao_teto: {
nome: "Condição do Teto",
opcoes: [
{ nome: "Teto Novo", adicional: 0 },
{ nome: "Remover Forro Antigo", adicional: 20 },
{ nome: "Teto com Umidade", adicional: 25 },
{ nome: "Correção de Nível", adicional: 15 }
]
},
tipo_estrutura: {
nome: "Tipo de Estrutura",
opcoes: [
{ nome: "Laje de Concreto", adicional: 0 },
{ nome: "Estrutura de Madeira", adicional: 15 },
{ nome: "Telha Cerâmica", adicional: 20 },
{ nome: "Telha Fibrocimento", adicional: 12 }
]
},
tipo_forro: {
nome: "Tipo de Forro",
opcoes: [
{ nome: "Forro Liso", adicional: 0 },
{ nome: "Sanca Aberta", adicional: 15 },
{ nome: "Sanca Fechada", adicional: 25 },
{ nome: "Forro Decorativo", adicional: 30 }
}
}
},
eletrica: {
nome: "Instalação Elétrica",
unidade: "ponto",
preco_base: 45,
configuracoes: {
tipo_instalacao: {
nome: "Tipo de Instalação",
opcoes: [
{ nome: "Ponto Novo Simples", adicional: 0 },
{ nome: "Remover Fios Antigos", adicional: 15 },
{ nome: "Passar Dutos e Fios", adicional: 25 },
{ nome: "Apenas Reparo Técnico", adicional: -15 }
]
},
tipo_parede: {
nome: "Tipo de Parede",
opcoes: [
{ nome: "Drywall", adicional: 5 },
{ nome: "Alvenaria", adicional: 10 },
{ nome: "Parede Dupla", adicional: 15 }
},
tipo_fio: {
nome: "Tipo de Fio",
opcoes: [
{ nome: "Fio 2,5mm Padrão", adicional: 0 },
{ nome: "Fio 4,0mm Premium", adicional: 8 },
{ nome: "Fio 6,0mm Industrial", adicional: 15 }
]
}
}
},
instalacao_pia: {
nome: "Instalação de Pia",
unidade: "item",
preco_base: 180,
configuracoes: {
tipo_cuba: {
nome: "Tipo de Cuba",
opcoes: [
{ nome: "Cuba Convencional", adicional: 0 },
{ nome: "Cuba Gourmet", adicional: 120 },
{ nome: "Cuba de Apoio", adicional: 80 }
]
},
tipo_torneira: {
nome: "Tipo de Torneira",
opcoes: [
{ nome: "Torneira Fria", adicional: 0 },
{ nome: "Misturador", adicional: 45 },
{ nome: "Monocomando", adicional: 85 }
}
}
},
drywall: {
nome: "Drywall",
unidade: "m²",
preco_base: 80,
configuracoes: {
tipo_estrutura: {
nome: "Tipo de Estrutura",
opcoes: [
{ nome: "Estrutura Galvanizada", adicional: 0 },
{ nome: "Frame Steel", adicional: 15 },
{ nome: "Frame Steel + Hidrofugante", adicional: 25 }
},
tipo_chapa: {
nome: "Tipo de Chapa",
opcoes: [
{ nome: "Chapa Padrão 12,5mm", adicional: 0 },
{ nome: "Chapa Resistente à Umidade", adicional: 12 },
{ nome: "Chapa Resistente ao Fogo", adicional: 18 }
}
};
// Estado da aplicação
let servicosSelecionados = [];
let etapaAtual = 1;
// Funções principais
function proximaEtapa(novaEtapa) {
if (etapaAtual === 1) {
const ambiente = document.getElementById('ambiente').value;
const metragem = document.getElementById('metragem').value;
if (!ambiente || !metragem) {
alert('Por favor, preencha todos os campos obrigatórios.');
return;
}
}
if (etapaAtual === 2 && servicosSelecionados.length === 0) {
alert('Selecione pelo menos um serviço.');
return;
}
document.getElementById(`etapa${etapaAtual}`).style.display = 'none';
document.getElementById(`step${etapaAtual}`).classList.remove('active');
etapaAtual = novaEtapa;
document.getElementById(`etapa${etapaAtual}`).style.display = 'block';
document.getElementById(`step${etapaAtual}`).classList.add('active');
if (etapaAtual === 2) {
carregarServicos();
} else if (etapaAtual === 3) {
gerarConfiguracaoServicos();
function voltarEtapa(novaEtapa) {
document.getElementById(`etapa${etapaAtual}`).style.display = 'none';
document.getElementById(`step${etapaAtual}`).classList.remove('active');
etapaAtual = novaEtapa;
document.getElementById(`etapa${etapaAtual}`).style.display = 'block';
document.getElementById(`step${etapaAtual}`).classList.add('active');
function toggleServico(servicoKey) {
const checkbox = document.getElementById(`servico_${servicoKey}`);
if (checkbox.checked) {
if (!servicosSelecionados.find(s => s.id === servicoKey)) {
const servico = catalogos[servicoKey];
const configuracoes = {};
// Inicializar configurações com valores padrão
Object.keys(servico.configuracoes).forEach(configKey => {
configuracoes[configKey] = 0; // Primeira opção
});
servicosSelecionados.push({
id: servicoKey,
configuracoes: configuracoes,
quantidade: 1
});
} else {
servicosSelecionados = servicosSelecionados.filter(s => s.id !== servicoKey);
atualizarResumo();
function carregarServicos() {
const container = document.getElementById('servicosDisponiveis');
container.innerHTML = '';
Object.keys(catalogos).forEach(key => {
const servico = catalogos[key];
const div = document.createElement('div');
div.className = 'checkbox-item';
div.innerHTML = `
<input type="checkbox" id="servico_${key}" value="${key}" onchange="toggleServico('$
<label for="servico_${key}">
<strong>${servico.nome}</strong><br>
<small>A partir de R$ ${servico.preco_base},00/${servico.unidade}</small>
</label>
`;
container.appendChild(div);
});
function gerarConfiguracaoServicos() {
const container = document.getElementById('configuracaoServicos');
container.innerHTML = '';
servicosSelecionados.forEach((servicoSelecionado, index) => {
const servico = catalogos[servicoSelecionado.id];
const div = document.createElement('div');
div.className = 'servico-config';
let configHTML = `<div class="servico-header">${servico.nome}</div>`;
// Adicionar campo de quantidade
configHTML += `
<div class="form-group">
<label for="quantidade_${index}">Quantidade (${servico.unidade}):</label>
<input type="number" id="quantidade_${index}" value="${servicoSelecionado.quant
min="1" step="0.1" onchange="atualizarQuantidade(${index}, this.value)">
</div>
`;
// Adicionar configurações específicas
Object.keys(servico.configuracoes).forEach((configKey, configIndex) => {
const config = servico.configuracoes[configKey];
configHTML += `
<div class="form-group">
<label for="config_${index}_${configKey}">${config.nome}:</label>
<select id="config_${index}_${configKey}"
onchange="atualizarConfiguracao(${index}, '${configKey}', this.selectedIndex
${config.opcoes.map((opcao, i) => `
<option value="${i}" ${servicoSelecionado.configuracoes[configKey] === i ? 's
${opcao.nome} ${opcao.adicional !== 0 ? `(+ R$ ${opcao.adicional},00)` : ''}
</option>
`).join('')}
</select>
</div>
`;
});
div.innerHTML = configHTML;
container.appendChild(div);
});
function atualizarQuantidade(index, novaQuantidade) {
servicosSelecionados[index].quantidade = parseFloat(novaQuantidade);
atualizarResumo();
function atualizarConfiguracao(index, configKey, opcaoIndex) {
servicosSelecionados[index].configuracoes[configKey] = opcaoIndex;
atualizarResumo();
function atualizarResumo() {
const container = document.getElementById('resumoServicos');
const metragem = parseFloat(document.getElementById('metragem').value) || 0;
if (servicosSelecionados.length === 0) {
container.innerHTML = '<p style="text-align: center; color: #666; margin: 20px 0;">Selecio
document.getElementById('valorSubtotal').textContent = 'R$ 0,00';
document.getElementById('valorTotal').innerHTML = '<strong>R$ 99,00</strong>';
document.getElementById('valorEntrada').textContent = 'R$ 9,90';
return;
let html = '';
let subtotal = 0;
servicosSelecionados.forEach(servicoSelecionado => {
const servico = catalogos[servicoSelecionado.id];
let precoServico = servico.preco_base;
// Calcular adicionais das configurações
Object.keys(servico.configuracoes).forEach(configKey => {
const opcaoIndex = servicoSelecionado.configuracoes[configKey];
const adicional = servico.configuracoes[configKey].opcoes[opcaoIndex].adicional;
precoServico += adicional;
});
const quantidade = servicoSelecionado.quantidade;
const valorServico = precoServico * quantidade;
subtotal += valorServico;
html += `
<div class="summary-item">
<span>${servico.nome} (${quantidade} ${servico.unidade})</span>
<span>R$ ${valorServico.toFixed(2).replace('.', ',')}</span>
</div>
`;
});
container.innerHTML = html;
const total = subtotal + 99;
const entrada = total * 0.1;
document.getElementById('valorSubtotal').textContent = `R$ ${subtotal.toFixed(2).replace
document.getElementById('valorTotal').innerHTML = `<strong>R$ ${total.toFixed(2).replac
document.getElementById('valorEntrada').textContent = `R$ ${entrada.toFixed(2).replace('
function finalizarOrcamento() {
const nome = document.getElementById('nomeCliente').value;
const telefone = document.getElementById('telefoneCliente').value;
const email = document.getElementById('emailCliente').value;
if (!nome || !telefone || !email) {
alert('Por favor, preencha todos os campos obrigatórios.');
return;
// Gerar resumo para o modal
let resumoHTML = `
<h3 style="margin-top: 20px; color: #043451;">Detalhes do Cliente</h3>
<p><strong>Nome:</strong> ${nome}</p>
<p><strong>Telefone:</strong> ${telefone}</p>
<p><strong>E-mail:</strong> ${email}</p>
<h3 style="margin-top: 20px; color: #043451;">Detalhes do Orçamento</h3>
`;
const metragem = document.getElementById('metragem').value;
const ambiente = document.getElementById('ambiente').options[document.getElementBy
resumoHTML += `<p><strong>Ambiente:</strong> ${ambiente} (${metragem}m²)</p>`;
let subtotal = 0;
servicosSelecionados.forEach(servicoSelecionado => {
const servico = catalogos[servicoSelecionado.id];
let precoServico = servico.preco_base;
// Calcular adicionais das configurações
Object.keys(servico.configuracoes).forEach(configKey => {
const opcaoIndex = servicoSelecionado.configuracoes[configKey];
const adicional = servico.configuracoes[configKey].opcoes[opcaoIndex].adicional;
precoServico += adicional;
});
const quantidade = servicoSelecionado.quantidade;
const valorServico = precoServico * quantidade;
subtotal += valorServico;
resumoHTML += `
<p style="margin-top: 10px;">
<strong>${servico.nome}:</strong> ${quantidade} ${servico.unidade} - R$ ${valorSe
</p>
`;
});
const total = subtotal + 99;
const entrada = total * 0.1;
resumoHTML += `
<div style="margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px;">
<p><strong>Subtotal:</strong> R$ ${subtotal.toFixed(2).replace('.', ',')}</p>
<p><strong>Visita Técnica:</strong> R$ 99,00</p>
<p><strong>Total:</strong> R$ ${total.toFixed(2).replace('.', ',')}</p>
<p><strong>Entrada (10%):</strong> R$ ${entrada.toFixed(2).replace('.', ',')}</p>
</div>
<p style="margin-top: 20px; font-style: italic;">
Observações: ${document.getElementById('observacoes').value || 'Nenhuma'}
</p>
`;
document.getElementById('detalhesOrcamento').innerHTML = resumoHTML;
document.getElementById('modalSucesso').style.display = 'block';
function fecharModal() {
document.getElementById('modalSucesso').style.display = 'none';
function gerarPDF() {
alert('Função de gerar PDF será implementada aqui.');
// Implementação real requer biblioteca como jsPDF
}
function novoOrcamento() {
// Resetar o formulário
document.getElementById('etapa1').style.display = 'block';
document.getElementById('etapa2').style.display = 'none';
document.getElementById('etapa3').style.display = 'none';
document.getElementById('etapa4').style.display = 'none';
document.getElementById('step1').classList.add('active');
document.getElementById('step2').classList.remove('active');
document.getElementById('step3').classList.remove('active');
document.getElementById('step4').classList.remove('active');
etapaAtual = 1;
servicosSelecionados = [];
// Limpar campos
document.getElementById('ambiente').value = '';
document.getElementById('metragem').value = '';
document.getElementById('nomeCliente').value = '';
document.getElementById('telefoneCliente').value = '';
document.getElementById('emailCliente').value = '';
document.getElementById('observacoes').value = '';
// Resetar checkboxes
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.checked = false;
});
// Resetar resumo
document.getElementById('resumoServicos').innerHTML =
'<p style="text-align: center; color: #666; margin: 20px 0;">Selecione os serviços para ver
document.getElementById('valorSubtotal').textContent = 'R$ 0,00';
document.getElementById('valorTotal').innerHTML = '<strong>R$ 99,00</strong>';
document.getElementById('valorEntrada').textContent = 'R$ 9,90';
// Fechar modal
fecharModal();
// Inicializar a página
document.addEventListener('DOMContentLoaded', function() {
carregarServicos();
});
</script>
</body>
</html>
