{% extends "base.html" %}

{% import 'macros/empresa.html' as empresa_ui %}

{% block title %}Editar OS - {{ os.numero_os }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-edit"></i> OS {{ os.numero_os }}</h2>
        <div>
            <a href="{{ url_for('imprimir_ordem_servico', id=os.id) }}" target="_blank" class="btn btn-info">
                <i class="fas fa-print"></i> Imprimir
            </a>
            <button type="button" class="btn btn-success" onclick="compartilharWhatsApp()">
                <i class="fab fa-whatsapp"></i> WhatsApp
            </button>
            {% if os.status == 'concluida' %}
            <form method="POST" action="{{ url_for('faturar_os', id=os.id) }}" class="d-inline">
                <button type="submit" class="btn btn-success" onclick="return confirm('Confirma o faturamento desta OS?')">
                    <i class="fas fa-check"></i> Faturar
                </button>
            </form>
            {% endif %}
            <a href="{{ url_for('ordem_servico') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Voltar
            </a>
        </div>
    </div>

    <form method="POST" class="form-lockable">
        <div class="row">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Dados da OS</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Status *</label>
                                <select class="form-select" name="status" required>
                                    <option value="aberta" {% if os.status == 'aberta' %}selected{% endif %}>Aberta</option>
                                    <option value="agendada" {% if os.status == 'agendada' %}selected{% endif %}>Agendada</option>
                                    <option value="em_atendimento" {% if os.status == 'em_atendimento' %}selected{% endif %}>Em Atendimento</option>
                                    <option value="concluida" {% if os.status == 'concluida' %}selected{% endif %}>Concluída</option>
                                    <option value="cancelada" {% if os.status == 'cancelada' %}selected{% endif %}>Cancelada</option>
                                </select>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Tipo de Documento *</label>
                                <select class="form-select" name="tipo_documento" required>
                                    <option value="OS" {% if os.tipo_documento == 'OS' %}selected{% endif %}>OS - Ordem de Serviço</option>
                                    <option value="CT" {% if os.tipo_documento == 'CT' %}selected{% endif %}>CT - Chamado Técnico</option>
                                </select>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Tipo de Serviço *</label>
                                <select class="form-select" name="tipo_os" required>
                                    <option value="manutencao" {% if os.tipo_os == 'manutencao' %}selected{% endif %}>Manutenção Equipamento</option>
                                    <option value="chamado_tecnico" {% if os.tipo_os == 'chamado_tecnico' %}selected{% endif %}>Chamado Técnico</option>
                                    <option value="instalacao" {% if os.tipo_os == 'instalacao' %}selected{% endif %}>Instalação</option>
                                    <option value="suporte" {% if os.tipo_os == 'suporte' %}selected{% endif %}>Suporte</option>
                                    <option value="visita_tecnica" {% if os.tipo_os == 'visita_tecnica' %}selected{% endif %}>Visita Técnica</option>
                                </select>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Prioridade *</label>
                                <select class="form-select" name="prioridade" required>
                                    <option value="baixa" {% if os.prioridade == 'baixa' %}selected{% endif %}>Baixa</option>
                                    <option value="normal" {% if os.prioridade == 'normal' %}selected{% endif %}>Normal</option>
                                    <option value="alta" {% if os.prioridade == 'alta' %}selected{% endif %}>Alta</option>
                                    <option value="urgente" {% if os.prioridade == 'urgente' %}selected{% endif %}>Urgente</option>
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Cliente *</label>
                                <select class="form-select" name="cliente_id" required>
                                    {% for cliente in clientes %}
                                    {% set cliente_selecionado = false %}
                                    {% if cliente['tipo_cadastro'] == 'pessoa' and os.pessoa_id == cliente['id_real'] %}
                                        {% set cliente_selecionado = true %}
                                    {% elif cliente['tipo_cadastro'] == 'legado' and os.cliente_id == cliente['id_real'] %}
                                        {% set cliente_selecionado = true %}
                                    {% endif %}
                                    <option value="{{ cliente['id'] }}" {% if cliente_selecionado %}selected{% endif %}>
                                        {{ cliente['nome'] }}
                                        {% if cliente['tipo_cadastro'] == 'pessoa' %}
                                        (Novo Cadastro)
                                        {% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Empresa *</label>
                                {% if is_multi_empresa() %}
                                <select class="form-select" name="empresa_id" required>
                                    {% for empresa in empresas %}
                                    <option value="{{ empresa.id }}" {% if os.empresa_id == empresa.id %}selected{% endif %} title="{{ empresa_ui.titulo(empresa) }}">
                                        {{ empresa_ui.nome(empresa) }}
                                    </option>
                                    {% endfor %}
                                </select>
                                {% else %}
                                <input type="hidden" name="empresa_id" value="{{ os.empresa_id }}">
                                <input type="text" class="form-control" value="{{ empresa_ui.nome(os.empresa, 'N/A') if os.empresa else 'N/A' }}" readonly>
                                {% endif %}
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Técnico</label>
                                <select class="form-select" name="tecnico_id">
                                    <option value="">Não atribuído</option>
                                    {% for tecnico in tecnicos %}
                                    {% set selected = false %}
                                    {% if tecnico['tipo_cadastro'] == 'usuario' and os.tecnico_id and tecnico['id'] == 'usuario_' + os.tecnico_id|string %}
                                        {% set selected = true %}
                                    {% elif tecnico['tipo_cadastro'] == 'pessoa' and os.tecnico_pessoa_id and tecnico['id'] == 'pessoa_' + os.tecnico_pessoa_id|string %}
                                        {% set selected = true %}
                                    {% endif %}
                                    <option value="{{ tecnico['id'] }}" {% if selected %}selected{% endif %}>
                                        {{ tecnico['nome'] }}
                                        {% if tecnico['tipo_cadastro'] == 'pessoa' %}
                                        (Externo)
                                        {% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Data Agendamento</label>
                                <input type="datetime-local" class="form-control" name="data_agendamento"
                                       value="{% if os.data_agendamento %}{{ os.data_agendamento.strftime('%Y-%m-%dT%H:%M') }}{% endif %}">
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Relato do Cliente *</label>
                                <input type="text" class="form-control" name="titulo" 
                                       value="{{ os.titulo }}" required 
                                       placeholder="Resumo breve do problema relatado">
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Descrição Detalhada do Problema *</label>
                                <textarea class="form-control" name="descricao_problema" rows="4" required 
                                          placeholder="Descreva detalhadamente o problema relatado pelo cliente...">{{ os.descricao_problema }}</textarea>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Solução</label>
                                <textarea class="form-control" name="solucao" rows="4">{{ os.solucao or '' }}</textarea>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Equipamento do Cliente</label>
                                <select class="form-select" name="equipamento_id" id="equipamento_id">
                                    <option value="">Carregando equipamentos...</option>
                                </select>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Observações</label>
                                <textarea class="form-control" name="observacoes" rows="2">{{ os.observacoes or '' }}</textarea>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Observações Internas</label>
                                <textarea class="form-control" name="observacoes_internas" rows="2">{{ os.observacoes_internas or '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {# Peças e Materiais #}
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Peças e Materiais</h5>
                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalAdicionarItem">
                            <i class="fas fa-plus"></i> Adicionar Item
                        </button>
                    </div>
                    <div class="card-body">
                        {% if os.itens %}
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Descrição</th>
                                        <th>Tipo</th>
                                        <th>Qtd</th>
                                        <th>Valor Unit.</th>
                                        <th>Total</th>
                                        <th width="80">Ação</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in os.itens %}
                                    <tr>
                                        <td>{{ item.descricao }}</td>
                                        <td>
                                            {% if item.tipo_item == 'peca' %}Peça
                                            {% elif item.tipo_item == 'material' %}Material
                                            {% elif item.tipo_item == 'servico' %}Serviço
                                            {% endif %}
                                        </td>
                                        <td>{{ item.quantidade }}</td>
                                        <td>R$ {{ "%.2f"|format(item.valor_unitario) }}</td>
                                        <td>R$ {{ "%.2f"|format(item.valor_total) }}</td>
                                        <td>
                                            <form method="POST" action="{{ url_for('excluir_item_os', id=item.id) }}" class="d-inline">
                                                <button type="submit" class="btn btn-sm btn-outline-danger" 
                                                        onclick="return confirm('Confirma a exclusão?')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% else %}
                        <div class="alert alert-info mb-0">
                            Nenhum item adicionado.
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Valores</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Mão de Obra</label>
                            <input type="number" class="form-control" name="valor_mao_obra" 
                                   step="0.01" value="{{ os.valor_mao_obra }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Deslocamento</label>
                            <input type="number" class="form-control" name="valor_deslocamento" 
                                   step="0.01" value="{{ os.valor_deslocamento }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Peças/Materiais</label>
                            <input type="text" class="form-control" 
                                   value="R$ {{ '%.2f'|format(os.valor_pecas) }}" readonly>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Desconto</label>
                            <input type="number" class="form-control" name="desconto" 
                                   step="0.01" value="{{ os.desconto }}">
                        </div>

                        <hr>

                        <div class="mb-0">
                            <label class="form-label"><strong>Valor Total</strong></label>
                            <h3 class="text-primary">R$ {{ "%.2f"|format(os.valor_total) }}</h3>
                        </div>
                    </div>
                </div>

                {% if os.data_conclusao %}
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Informações</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-2">
                            <strong>Data Abertura:</strong><br>
                            {{ os.data_abertura.strftime('%d/%m/%Y %H:%M') }}
                        </p>
                        <p class="mb-2">
                            <strong>Data Conclusão:</strong><br>
                            {{ os.data_conclusao.strftime('%d/%m/%Y %H:%M') }}
                        </p>
                        {% if os.tempo_atendimento_total() %}
                        <p class="mb-0">
                            <strong>Tempo de Atendimento:</strong><br>
                            {{ "%.1f"|format(os.tempo_atendimento_total()) }} horas
                        </p>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="text-end">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-save"></i> Salvar Alterações
            </button>
        </div>
    </form>
</div>

{# Modal Adicionar Item #}
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalAdicionarItem" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('adicionar_item_os', id=os.id) }}">
                <div class="modal-header">
                    <h5 class="modal-title">Adicionar Peça/Material</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Produto (opcional)</label>
                        <select class="form-select" name="produto_id" id="produtoSelect">
                            <option value="">Selecione ou digite descrição abaixo...</option>
                            {% for produto in produtos_estoque %}
                            <option value="{{ produto.id }}" data-descricao="{{ produto.nome }}" data-valor="{{ produto.valor_venda }}">
                                {{ produto.nome }} - R$ {{ "%.2f"|format(produto.valor_venda) }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Descrição *</label>
                        <input type="text" class="form-control" name="descricao" id="descricaoInput" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Tipo *</label>
                        <select class="form-select" name="tipo_item" required>
                            <option value="peca">Peça</option>
                            <option value="material">Material</option>
                            <option value="servico">Serviço</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Quantidade *</label>
                        <input type="number" class="form-control" name="quantidade" 
                               step="0.01" min="0.01" value="1" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Valor Unitário *</label>
                        <input type="number" class="form-control" name="valor_unitario" 
                               id="valorUnitario" step="0.01" min="0" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Observações</label>
                        <textarea class="form-control" name="observacoes_item" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Adicionar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.getElementById('produtoSelect').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const descricao = selectedOption.getAttribute('data-descricao');
    const valor = selectedOption.getAttribute('data-valor');
    
    if (descricao) {
        document.getElementById('descricaoInput').value = descricao;
    }
    if (valor) {
        document.getElementById('valorUnitario').value = valor;
    }
});

// Carregar equipamentos do cliente atual na edição
function carregarEquipamentos(clienteId, equipamentoSelecionadoId = null) {
    const equipamentoSelect = document.getElementById('equipamento_id');
    
    if (!clienteId) {
        equipamentoSelect.innerHTML = '<option value="">Selecione primeiro um cliente...</option>';
        return;
    }
    
    equipamentoSelect.innerHTML = '<option value="">Carregando...</option>';
    
    fetch(`/api/equipamentos-por-cliente/${clienteId}`)
        .then(response => response.json())
        .then(equipamentos => {
            if (equipamentos.length === 0) {
                equipamentoSelect.innerHTML = '<option value="">Nenhum equipamento cadastrado</option>';
                return;
            }
            
            equipamentoSelect.innerHTML = '<option value="">Selecione...</option>';
            equipamentos.forEach(eq => {
                const option = document.createElement('option');
                option.value = eq.id;
                option.textContent = eq.descricao;
                if (equipamentoSelecionadoId && eq.id == equipamentoSelecionadoId) {
                    option.selected = true;
                }
                equipamentoSelect.appendChild(option);
            });
        })
        .catch(error => {
            console.error('Erro ao carregar equipamentos:', error);
            equipamentoSelect.innerHTML = '<option value="">Erro ao carregar</option>';
        });
}

// Carregar equipamentos quando mudar o cliente
document.querySelector('select[name="cliente_id"]').addEventListener('change', function() {
    carregarEquipamentos(this.value);
});

// Carregar equipamentos do cliente atual ao abrir a página
window.addEventListener('DOMContentLoaded', function() {
    const clienteSelect = document.querySelector('select[name="cliente_id"]');
    const clienteId = clienteSelect.value;
    
    // Buscar ID do equipamento vinculado à OS (se houver)
    const equipamentoVinculadoId = {{ os.equipamentos[0].equipamento_id if os.equipamentos else 'null' }};
    
    carregarEquipamentos(clienteId, equipamentoVinculadoId);
});

// Dados globais da OS
const dadosOS = {
    numeroOS: {{ os.numero_os|tojson }},
    tipoDoc: {{ os.tipo_documento|tojson }},
    status: {{ os.status|tojson }},
    nomeCliente: {% if os.pessoa %}{{ (os.pessoa.nome_fantasia or os.pessoa.razao_social or os.pessoa.nome)|tojson }}{% elif os.cliente %}{{ os.cliente.nome|tojson }}{% else %}"Cliente"{% endif %},
    telefoneCliente: {% if os.pessoa %}{{ (os.pessoa.whatsapp or os.pessoa.celular or os.pessoa.telefone or '')|tojson }}{% elif os.cliente %}{{ (os.cliente.telefone or '')|tojson }}{% else %}""{% endif %},
    equipamento: {% if os.equipamentos and os.equipamentos|length > 0 %}{% set eq = os.equipamentos[0] %}{% if eq.equipamento %}{{ (eq.equipamento.descricao or eq.equipamento.nome)|tojson }}{% else %}{{ eq.descricao|tojson }}{% endif %}{% else %}"Equipamento não informado"{% endif %},
    defeitoRelatado: {{ (os.descricao_problema or 'Não informado')|tojson }},
    solucao: {{ (os.solucao or '')|tojson }},
    valorTotal: {{ ('%.2f'|format(os.valor_total) if os.valor_total else '0.00')|tojson }},
    nomeEmpresa: {% if empresas %}{{ (empresas[0].nome_fantasia or empresas[0].razao_social)|tojson }}{% else %}"CapeSystem"{% endif %}
};

console.log('Dados da OS carregados:', dadosOS);

// Função para enviar mensagem no WhatsApp
function enviarWhatsApp(mensagem) {
    console.log('Mensagem original:', mensagem);
    
    const mensagemCodificada = encodeURIComponent(mensagem);
    const telefone = dadosOS.telefoneCliente.replace(/\D/g, '');
    
    console.log('Telefone limpo:', telefone);
    
    let urlWhatsApp;
    if (telefone && telefone.length >= 10) {
        urlWhatsApp = `https://wa.me/55${telefone}?text=${mensagemCodificada}`;
    } else {
        urlWhatsApp = `https://web.whatsapp.com/send?text=${mensagemCodificada}`;
    }
    
    console.log('URL WhatsApp:', urlWhatsApp);
    window.open(urlWhatsApp, '_blank');
}

// Mensagem 1: OS Criada / Recebida
function msgOSCriada() {
    const mensagem = `Olá, *${dadosOS.nomeCliente}*! 👋

Aqui é do *Setor de Suporte Técnico* da *${dadosOS.nomeEmpresa}*.

✅ Recebemos sua solicitação de atendimento e já registramos no nosso sistema!

📋 *${dadosOS.tipoDoc}:* ${dadosOS.numeroOS}
🔧 *Equipamento:* ${dadosOS.equipamento}

🗣️ *Relato do Cliente:*
${dadosOS.defeitoRelatado}

👨‍🔧 Nossa equipe técnica já foi notificada e em breve retornaremos com o diagnóstico e orçamento.

Qualquer dúvida, estamos à disposição! 🚀`;
    
    enviarWhatsApp(mensagem);
}

// Mensagem 2: Orçamento / Diagnóstico
function msgOrcamento() {
    const mensagem = `Olá, *${dadosOS.nomeCliente}*! 👋

Aqui é do *Setor de Suporte Técnico* da *${dadosOS.nomeEmpresa}*.

Segue informação sobre o seu equipamento:

📋 *${dadosOS.tipoDoc}:* ${dadosOS.numeroOS}
🔧 *Equipamento:* ${dadosOS.equipamento}

🗣️ *Relato do Cliente:*
${dadosOS.defeitoRelatado}

🔍 *Defeito Encontrado / Diagnóstico:*
${dadosOS.solucao || 'Aguardando diagnóstico completo'}

💵 *Valor do Serviço:* R$ ${dadosOS.valorTotal}

✅ Para prosseguir com o reparo, precisamos de sua autorização.

📞 Responda esta mensagem confirmando ou entre em contato conosco.

Atenciosamente,
_Equipe ${dadosOS.nomeEmpresa}_`;
    
    enviarWhatsApp(mensagem);
}

// Mensagem 3: OS Agendada
function msgAgendada() {
    const dataAgendamento = "{{ os.data_agendamento.strftime('%d/%m/%Y às %H:%M') if os.data_agendamento else 'A confirmar' }}";
    
    const mensagem = `Olá, *${dadosOS.nomeCliente}*! 👋

Aqui é do *Setor de Suporte Técnico* da *${dadosOS.nomeEmpresa}*.

📅 *Atendimento Agendado com Sucesso!*

📋 *${dadosOS.tipoDoc}:* ${dadosOS.numeroOS}
🔧 *Equipamento:* ${dadosOS.equipamento}
🕒 *Data e Horário:* ${dataAgendamento}

👨‍🔧 Nosso técnico comparecerá pontualmente no horário marcado.

❗ *Importante:* Por favor, confirme sua disponibilidade respondendo esta mensagem.

Contamos com você! 🚀`;
    
    enviarWhatsApp(mensagem);
}

// Mensagem 4: Técnico a caminho / Em Atendimento
function msgEmAtendimento() {
    const tecnicoNome = {% if os.tecnico %}{{ os.tecnico.nome|tojson }}{% elif os.tecnico_pessoa %}{{ os.tecnico_pessoa.nome|tojson }}{% else %}"nosso técnico"{% endif %};
    
    const mensagem = `Olá, *${dadosOS.nomeCliente}*! 👋

Aqui é do *Setor de Suporte Técnico* da *${dadosOS.nomeEmpresa}*.

🚗 O técnico *${tecnicoNome}* está a caminho!

📋 *${dadosOS.tipoDoc}:* ${dadosOS.numeroOS}
🔧 *Equipamento:* ${dadosOS.equipamento}

⏰ Previsão de chegada: Em breve

👨‍🔧 Já estamos trabalhando para resolver o seu problema!

Qualquer dúvida, entre em contato. 📞`;
    
    enviarWhatsApp(mensagem);
}

// Mensagem 5: Serviço Concluído
function msgConcluida() {
    const mensagem = `Olá, *${dadosOS.nomeCliente}*! 👋

Aqui é do *Setor de Suporte Técnico* da *${dadosOS.nomeEmpresa}*.

✅ *Serviço Concluído com Sucesso!*

📋 *${dadosOS.tipoDoc}:* ${dadosOS.numeroOS}
🔧 *Equipamento:* ${dadosOS.equipamento}

🗣️ *Relato do Cliente:*
${dadosOS.defeitoRelatado}

🔧 *Defeito Encontrado:*
${dadosOS.solucao || 'Serviço realizado conforme solicitado'}

💵 *Valor Total:* R$ ${dadosOS.valorTotal}

🎉 Seu equipamento está pronto para uso!

🙏 Agradecemos pela confiança e preferência.
⭐ Qualquer problema, estamos à disposição!

Atenciosamente,
_Equipe ${dadosOS.nomeEmpresa}_`;
    
    enviarWhatsApp(mensagem);
}

// Mensagem 6: Aguardando Peça/Aprovação
function msgAguardando() {
    const mensagem = `Olá, *${dadosOS.nomeCliente}*! 👋

Aqui é do *Setor de Suporte Técnico* da *${dadosOS.nomeEmpresa}*.

⏳ *Atualização sobre seu Atendimento:*

📋 *${dadosOS.tipoDoc}:* ${dadosOS.numeroOS}
🔧 *Equipamento:* ${dadosOS.equipamento}

📝 *Status Atual:*
O serviço está em andamento, porém aguardamos:

• Chegada de peça/componente, ou
• Sua autorização para prosseguir

💵 *Valor Estimado:* R$ ${dadosOS.valorTotal}

🔔 Assim que tivermos novidades, entraremos em contato imediatamente!

Contamos com sua compreensão. 🙏`;
    
    enviarWhatsApp(mensagem);
}

// Função para fechar modal
function fecharModal() {
    const modalElement = document.getElementById('whatsappModal');
    const modal = bootstrap.Modal.getInstance(modalElement);
    if (modal) {
        modal.hide();
    }
}

// Função para abrir modal de seleção
function compartilharWhatsApp() {
    // Remove modal anterior se existir
    const modalAntigo = document.getElementById('whatsappModal');
    if (modalAntigo) {
        modalAntigo.remove();
    }
    
    const modal = `
        <div class="modal fade cape-modal-standard" id="whatsappModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title"><i class="fab fa-whatsapp"></i> Enviar Atualização via WhatsApp</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-3">Selecione o tipo de mensagem para enviar ao cliente:</p>
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-success" onclick="msgOSCriada(); fecharModal()">
                                ✅ OS Recebida / Criada
                            </button>
                            <button class="btn btn-outline-primary" onclick="msgOrcamento(); fecharModal()">
                                💰 Orçamento / Diagnóstico
                            </button>
                            <button class="btn btn-outline-info" onclick="msgAgendada(); fecharModal()">
                                📅 Atendimento Agendado
                            </button>
                            <button class="btn btn-outline-warning" onclick="msgEmAtendimento(); fecharModal()">
                                🚗 Técnico a Caminho
                            </button>
                            <button class="btn btn-outline-secondary" onclick="msgAguardando(); fecharModal()">
                                ⏳ Aguardando Peça/Aprovação
                            </button>
                            <button class="btn btn-outline-success" onclick="msgConcluida(); fecharModal()">
                                ✅ Serviço Concluído
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Adiciona o modal ao body
    document.body.insertAdjacentHTML('beforeend', modal);
    
    // Abre o modal usando Bootstrap 5
    const modalElement = document.getElementById('whatsappModal');
    const modalInstance = new bootstrap.Modal(modalElement);
    modalInstance.show();
    
    // Remove o modal do DOM quando for fechado
    modalElement.addEventListener('hidden.bs.modal', function () {
        modalElement.remove();
    });
}
</script>
{% endblock %}