{% extends "base.html" %}

{% block title %}{{ 'Editar' if empresa else 'Nova' }} Empresa - CapeSystem{% endblock %}

{% block content %}
<div class="cape-form-shell">
    <div class="cape-form-header">
        <div class="cape-form-header-main">
            <h1 class="h3 mb-0"><i class="bi bi-building"></i> {{ 'Editar' if empresa else 'Nova' }} Empresa</h1>
        </div>
        <div class="cape-form-header-actions">
            <a href="{{ url_for('empresas') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Voltar
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data" class="needs-validation form-lockable" novalidate>
            <!-- Navegação por Abas -->
            <ul class="nav nav-tabs mb-4" id="empresaTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="dados-tab" data-bs-toggle="tab" data-bs-target="#dados" type="button" role="tab">
                        <i class="bi bi-building"></i> Dados Básicos
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="endereco-tab" data-bs-toggle="tab" data-bs-target="#endereco" type="button" role="tab">
                        <i class="bi bi-geo-alt"></i> Endereço
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="fiscal-tab" data-bs-toggle="tab" data-bs-target="#fiscal" type="button" role="tab">
                        <i class="bi bi-file-earmark-text"></i> Fiscal
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contador-tab" data-bs-toggle="tab" data-bs-target="#contador" type="button" role="tab">
                        <i class="bi bi-calculator"></i> Contador
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="revenda-tab" data-bs-toggle="tab" data-bs-target="#revenda" type="button" role="tab">
                        <i class="bi bi-shop"></i> Revenda
                    </button>
                </li>
            </ul>
            
            <!-- Conteúdo das Abas -->
            <div class="tab-content" id="empresaTabContent">
                
                <!-- ABA: Dados Básicos -->
                <div class="tab-pane fade show active" id="dados" role="tabpanel">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Nome <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="nome" id="nome" required
                                   value="{{ empresa.nome if empresa else '' }}">
                            <div class="invalid-feedback">Informe o nome da empresa.</div>
                            <small class="text-muted">Nome de identificação interna</small>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Razão Social</label>
                            <input type="text" class="form-control" name="razao_social" id="razao_social"
                                   value="{{ empresa.razao_social if empresa else '' }}">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Nome Fantasia</label>
                            <input type="text" class="form-control" name="nome_fantasia" id="nome_fantasia"
                                   value="{{ empresa.nome_fantasia if empresa else '' }}">
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">CNPJ <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="cnpj" id="cnpj" required
                                       value="{{ empresa.cnpj if empresa else '' }}"
                                       placeholder="00.000.000/0000-00"
                                       maxlength="18">
                                <button type="button" class="btn btn-info" onclick="consultarCNPJ()" id="btnConsultarCNPJ">
                                    <i class="bi bi-search"></i> Consultar CNPJ
                                </button>
                                <div class="invalid-feedback">Informe o CNPJ da empresa.</div>
                            </div>
                            <small class="text-muted">Digite o CNPJ e clique em Consultar para preencher automaticamente</small>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Telefone</label>
                            <input type="text" class="form-control" name="telefone" id="telefone"
                                   value="{{ empresa.telefone if empresa else '' }}"
                                   placeholder="(00) 0000-0000">
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" name="email" id="email"
                                   value="{{ empresa.email if empresa else '' }}"
                                   placeholder="contato@empresa.com.br">
                            <div class="invalid-feedback">Informe um email válido.</div>
                        </div>
                    </div>
                    
                    <!-- Logo da Empresa -->
                    <h6 class="mt-4 mb-3 text-muted"><i class="bi bi-image"></i> Logo da Empresa</h6>
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label class="form-label">URL da Logo</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="logo" id="logo"
                                       value="{{ empresa.logo if empresa else '' }}"
                                       placeholder="/static/img/logo.png ou https://exemplo.com/logo.png">
                                <button type="button" class="btn btn-secondary" onclick="document.getElementById('logoFile').click()">
                                    <i class="bi bi-folder2-open"></i> Buscar
                                </button>
                            </div>
                            <input type="file" id="logoFile" accept="image/*" style="display: none;" onchange="handleLogoUpload(this)">
                            <small class="text-muted">Cole o caminho da imagem ou clique em "Buscar" para selecionar</small>
                        </div>
                        <div class="col-md-4 mb-3" id="logoPreviewContainer" {% if not empresa or not empresa.logo %}style="display:none;"{% endif %}>
                            <label class="form-label">Prévia:</label><br>
                            <img id="logoPreview" src="{{ empresa.logo if empresa else '' }}" alt="Logo" style="max-width: 150px; max-height: 80px; border: 1px solid #ddd; padding: 5px;" onerror="this.style.display='none'">
                        </div>
                    </div>
                    
                    {% if empresa %}
                    <div class="mt-3 form-check">
                        <input type="checkbox" class="form-check-input" name="ativa" id="ativa"
                               {% if empresa.ativa %}checked{% endif %}>
                        <label class="form-check-label" for="ativa">
                            Empresa Ativa
                        </label>
                    </div>
                    {% endif %}
                </div>
                
                <!-- ABA: Endereço -->
                <div class="tab-pane fade" id="endereco" role="tabpanel">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label">CEP</label>
                            <input type="text" class="form-control" name="cep" id="cep"
                                   value="{{ empresa.cep if empresa else '' }}"
                                   placeholder="00000-000"
                                   maxlength="9">
                        </div>
                        
                        <div class="col-md-7 mb-3">
                            <label class="form-label">Logradouro</label>
                            <input type="text" class="form-control" name="logradouro" id="logradouro"
                                   value="{{ empresa.logradouro if empresa else '' }}"
                                   placeholder="Rua, Avenida, etc">
                        </div>
                        
                        <div class="col-md-2 mb-3">
                            <label class="form-label">Número</label>
                            <input type="text" class="form-control" name="numero" id="numero"
                                   value="{{ empresa.numero if empresa else '' }}"
                                   placeholder="S/N">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Complemento</label>
                            <input type="text" class="form-control" name="complemento" id="complemento"
                                   value="{{ empresa.complemento if empresa else '' }}"
                                   placeholder="Sala, Andar, etc">
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Bairro</label>
                            <input type="text" class="form-control" name="bairro" id="bairro"
                                   value="{{ empresa.bairro if empresa else '' }}">
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Município</label>
                            <input type="text" class="form-control" name="municipio" id="municipio"
                                   value="{{ empresa.municipio if empresa else '' }}">
                            <!-- Campo oculto para código IBGE do município (necessário para NF-e/MDF-e) -->
                            <input type="hidden" name="codigo_municipio" id="codigo_municipio"
                                   value="{{ empresa.codigo_municipio if empresa else '' }}">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label">UF</label>
                            <select class="form-select" name="uf" id="uf">
                                <option value="">Selecione...</option>
                                {% for estado in ['AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'ES', 'GO', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SC', 'SP', 'SE', 'TO'] %}
                                    <option value="{{ estado }}" {% if empresa and empresa.uf == estado %}selected{% endif %}>
                                        {{ estado }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- ABA: Fiscal -->
                <div class="tab-pane fade" id="fiscal" role="tabpanel">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Inscrição Estadual</label>
                            <input type="text" class="form-control" name="inscricao_estadual" id="inscricao_estadual"
                                   value="{{ empresa.inscricao_estadual if empresa else '' }}"
                                   placeholder="ISENTO ou número">
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Inscrição Municipal</label>
                            <input type="text" class="form-control" name="inscricao_municipal" id="inscricao_municipal"
                                   value="{{ empresa.inscricao_municipal if empresa else '' }}">
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label">CNAE Principal</label>
                            <input type="text" class="form-control" name="cnae" id="cnae"
                                   value="{{ empresa.cnae if empresa else '' }}"
                                   placeholder="0000-0/00">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Regime Tributário</label>
                            <select class="form-select" name="regime_tributario" id="regime_tributario">
                                <option value="">Selecione...</option>
                                <option value="Simples Nacional" {% if empresa and empresa.regime_tributario == 'Simples Nacional' %}selected{% endif %}>Simples Nacional</option>
                                <option value="Lucro Presumido" {% if empresa and empresa.regime_tributario == 'Lucro Presumido' %}selected{% endif %}>Lucro Presumido</option>
                                <option value="Lucro Real" {% if empresa and empresa.regime_tributario == 'Lucro Real' %}selected{% endif %}>Lucro Real</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">CRT (Código de Regime Tributário)</label>
                            <select class="form-select" name="crt" id="crt">
                                <option value="1" {% if empresa and empresa.crt == '1' %}selected{% endif %}>1 - Simples Nacional</option>
                                <option value="2" {% if empresa and empresa.crt == '2' %}selected{% endif %}>2 - Simples Nacional - Excesso</option>
                                <option value="3" {% if empresa and empresa.crt == '3' %}selected{% endif %}>3 - Regime Normal</option>
                                <option value="4" disabled title="Vigência a partir de 04/01/2027 (NT 2025.002)">4 - MEI (a partir de 2027)</option>
                            </select>
                            <small class="text-muted"><i class="bi bi-info-circle"></i> CRT 4 (MEI) disponível a partir de 04/01/2027 conforme NT 2025.002</small>
                        </div>
                    </div>
                </div>
                
                <!-- ABA: Contador -->
                <div class="tab-pane fade" id="contador" role="tabpanel">
                    <h6 class="mb-3 text-primary"><i class="bi bi-person-badge"></i> Contador Responsável</h6>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Nome do Contador</label>
                            <input type="text" class="form-control" name="contador_nome" id="contador_nome"
                                   value="{{ empresa.contador_nome if empresa else '' }}">
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">CPF do Contador</label>
                            <input type="text" class="form-control" name="contador_cpf" id="contador_cpf"
                                   value="{{ empresa.contador_cpf if empresa else '' }}"
                                   placeholder="000.000.000-00">
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">CRC do Contador</label>
                            <input type="text" class="form-control" name="contador_crc" id="contador_crc"
                                   value="{{ empresa.contador_crc if empresa else '' }}"
                                   placeholder="CRC/UF 000000">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email do Contador</label>
                            <input type="email" class="form-control" name="contador_email" id="contador_email"
                                   value="{{ empresa.contador_email if empresa else '' }}">
                            <div class="invalid-feedback">Informe um email válido para o contador.</div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Telefone do Contador</label>
                            <input type="text" class="form-control" name="contador_telefone" id="contador_telefone"
                                   value="{{ empresa.contador_telefone if empresa else '' }}"
                                   placeholder="(00) 00000-0000">
                        </div>
                    </div>
                    
                    <hr class="my-4">
                    <h6 class="mb-3 text-primary"><i class="bi bi-building"></i> Escritório de Contabilidade</h6>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Nome do Escritório</label>
                            <input type="text" class="form-control" name="escritorio_nome" id="escritorio_nome"
                                   value="{{ empresa.escritorio_nome if empresa else '' }}">
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">CNPJ do Escritório</label>
                            <input type="text" class="form-control" name="escritorio_cnpj" id="escritorio_cnpj"
                                   value="{{ empresa.escritorio_cnpj if empresa else '' }}"
                                   placeholder="00.000.000/0000-00">
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">CRC do Escritório</label>
                            <input type="text" class="form-control" name="escritorio_crc" id="escritorio_crc"
                                   value="{{ empresa.escritorio_crc if empresa else '' }}">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email do Escritório</label>
                            <input type="email" class="form-control" name="escritorio_email" id="escritorio_email"
                                   value="{{ empresa.escritorio_email if empresa else '' }}">
                            <div class="invalid-feedback">Informe um email válido para o escritório.</div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Telefone do Escritório</label>
                            <input type="text" class="form-control" name="escritorio_telefone" id="escritorio_telefone"
                                   value="{{ empresa.escritorio_telefone if empresa else '' }}"
                                   placeholder="(00) 00000-0000">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-2 mb-3">
                            <label class="form-label">CEP</label>
                            <input type="text" class="form-control" name="escritorio_cep" id="escritorio_cep"
                                   value="{{ empresa.escritorio_cep if empresa else '' }}"
                                   placeholder="00000-000">
                        </div>
                        
                        <div class="col-md-5 mb-3">
                            <label class="form-label">Logradouro</label>
                            <input type="text" class="form-control" name="escritorio_logradouro" id="escritorio_logradouro"
                                   value="{{ empresa.escritorio_logradouro if empresa else '' }}">
                        </div>
                        
                        <div class="col-md-2 mb-3">
                            <label class="form-label">Número</label>
                            <input type="text" class="form-control" name="escritorio_numero" id="escritorio_numero"
                                   value="{{ empresa.escritorio_numero if empresa else '' }}">
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">UF</label>
                            <select class="form-select" name="escritorio_uf" id="escritorio_uf">
                                <option value="">UF</option>
                                {% for estado in ['AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'ES', 'GO', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SC', 'SP', 'SE', 'TO'] %}
                                    <option value="{{ estado }}" {% if empresa and empresa.escritorio_uf == estado %}selected{% endif %}>
                                        {{ estado }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Bairro</label>
                            <input type="text" class="form-control" name="escritorio_bairro" id="escritorio_bairro"
                                   value="{{ empresa.escritorio_bairro if empresa else '' }}">
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Município</label>
                            <input type="text" class="form-control" name="escritorio_municipio" id="escritorio_municipio"
                                   value="{{ empresa.escritorio_municipio if empresa else '' }}">
                        </div>
                    </div>
                </div>
                
                <!-- ABA: Revenda -->
                <div class="tab-pane fade" id="revenda" role="tabpanel">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">CNPJ da Revenda</label>
                            <input type="text" class="form-control" name="cnpj_revenda" id="cnpj_revenda"
                                   value="{{ empresa.cnpj_revenda if empresa else '' }}"
                                   placeholder="00.000.000/0000-00">
                            <small class="text-muted">
                                <i class="bi bi-info-circle"></i> 
                                Se adquiriu através de uma revenda, informe o CNPJ dela. 
                                Deixe em branco se for cliente direto CapeSystem.
                            </small>
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Código Revenda</label>
                            <input type="text" class="form-control" name="revenda_codigo" id="revenda_codigo"
                                   value="{{ empresa.revenda_codigo if empresa else '' }}" readonly
                                   placeholder="Preenchido automaticamente">
                            <small class="text-muted">Preenchido pela ativação</small>
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Status Licença</label>
                            <input type="text" class="form-control" 
                                   value="{{ empresa.status_licenca if empresa else 'trial' }}" readonly
                                   style="background-color: {% if empresa and empresa.status_licenca == 'ativo' %}#d4edda{% elif empresa and empresa.status_licenca == 'bloqueado' %}#f8d7da{% else %}#fff3cd{% endif %}">
                        </div>
                    </div>
                    
                    {% if empresa and empresa.revenda_nome %}
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Nome da Revenda</label>
                            <input type="text" class="form-control" value="{{ empresa.revenda_nome }}" readonly>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

                <div class="cape-form-actions cape-form-actions-inside-card">
                    <div class="cape-form-actions-left"></div>
                    <div class="cape-form-actions-right">
                        <a href="{{ url_for('empresas') }}" class="btn btn-secondary">
                            <i class="bi bi-x-circle"></i> Cancelar
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> Salvar
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
async function consultarCNPJ() {
    const cnpj = document.getElementById('cnpj').value;
    const btn = document.getElementById('btnConsultarCNPJ');
    
    if (!cnpj) {
        alert('Por favor, digite um CNPJ');
        return;
    }
    
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Consultando...';
    
    try {
        const response = await fetch('/api/consultar-cnpj', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ cnpj: cnpj, api: 'receitaws' })
        });
        
        const contentType = response.headers.get("content-type");
        if (!contentType || !contentType.includes("application/json")) {
            alert('Erro ao consultar CNPJ: Resposta inválida do servidor');
            return;
        }
        
        const data = await response.json();
        
        if (data.erro) {
            alert('Erro: ' + data.erro);
        } else {
            if (data.razao_social) document.getElementById('razao_social').value = data.razao_social;
            if (data.nome_fantasia) document.getElementById('nome_fantasia').value = data.nome_fantasia;
            if (data.email) document.getElementById('email').value = data.email;
            if (data.telefone) document.getElementById('telefone').value = data.telefone;
            if (data.cep) document.getElementById('cep').value = data.cep;
            if (data.logradouro) document.getElementById('logradouro').value = data.logradouro;
            if (data.numero) document.getElementById('numero').value = data.numero;
            if (data.complemento) document.getElementById('complemento').value = data.complemento;
            if (data.bairro) document.getElementById('bairro').value = data.bairro;
            if (data.municipio) document.getElementById('municipio').value = data.municipio;
            if (data.uf) document.getElementById('uf').value = data.uf;
            
            // Código IBGE do município para NF-e/MDF-e
            if (data.codigo_municipio) {
                document.getElementById('codigo_municipio').value = data.codigo_municipio;
                console.log('Código IBGE do município capturado via CNPJ:', data.codigo_municipio);
            }
            
            if (!document.getElementById('nome').value) {
                document.getElementById('nome').value = data.nome_fantasia || data.razao_social;
            }
            
            alert('✓ Dados preenchidos com sucesso!');
        }
    } catch (error) {
        alert('Erro ao consultar CNPJ: ' + error.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-search"></i> Consultar CNPJ';
    }
}

// Buscar CEP (ViaCEP) - preenche endereço e código IBGE do município
async function buscarCEP() {
    const cepInput = document.getElementById('cep');
    const cep = cepInput.value.replace(/\D/g, '');
    
    if (cep.length === 8) {
        try {
            const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
            const data = await response.json();
            
            if (!data.erro) {
                document.getElementById('logradouro').value = data.logradouro || '';
                document.getElementById('bairro').value = data.bairro || '';
                document.getElementById('municipio').value = data.localidade || '';
                document.getElementById('uf').value = data.uf || '';
                
                // IMPORTANTE: Captura o código IBGE do município para uso em NF-e/MDF-e
                if (data.ibge) {
                    document.getElementById('codigo_municipio').value = data.ibge;
                    console.log('Código IBGE do município capturado:', data.ibge);
                }
                
                // Foca no campo número após preencher
                document.getElementById('numero').focus();
            }
        } catch (error) {
            console.error('Erro ao consultar CEP:', error);
        }
    }
}

// Buscar CEP ao sair do campo ou ao completar 8 dígitos
document.getElementById('cep').addEventListener('blur', buscarCEP);
document.getElementById('cep').addEventListener('input', function(e) {
    const cep = e.target.value.replace(/\D/g, '');
    // Busca automaticamente ao completar 8 dígitos
    if (cep.length === 8) {
        buscarCEP();
    }
});

// Máscara de CNPJ
document.getElementById('cnpj').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, '');
    if (value.length <= 14) {
        value = value.replace(/^(\d{2})(\d)/, '$1.$2');
        value = value.replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3');
        value = value.replace(/\.(\d{3})(\d)/, '.$1/$2');
        value = value.replace(/(\d{4})(\d)/, '$1-$2');
        e.target.value = value;
    }
});

// Máscara de CEP (formatação apenas, busca é em outra função)
document.getElementById('cep').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, '');
    if (value.length <= 8) {
        value = value.replace(/^(\d{5})(\d)/, '$1-$2');
        e.target.value = value;
    }
});

// Máscara de telefone
document.getElementById('telefone').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, '');
    if (value.length <= 11) {
        value = value.replace(/^(\d{2})(\d)/, '($1) $2');
        value = value.replace(/(\d{4,5})(\d{4})$/, '$1-$2');
        e.target.value = value;
    }
});

// Função para processar upload de logo
function handleLogoUpload(input) {
    if (input.files && input.files[0]) {
        const file = input.files[0];
        
        if (!file.type.startsWith('image/')) {
            alert('Por favor, selecione um arquivo de imagem válido.');
            return;
        }
        
        const reader = new FileReader();
        reader.onload = function(e) {
            const logoPreview = document.getElementById('logoPreview');
            const logoPreviewContainer = document.getElementById('logoPreviewContainer');
            const logoInput = document.getElementById('logo');
            
            logoPreview.src = e.target.result;
            logoPreview.style.display = 'block';
            logoPreviewContainer.style.display = 'block';
            logoInput.value = e.target.result;
        };
        reader.readAsDataURL(file);
    }
}

// Preview ao digitar URL
document.getElementById('logo').addEventListener('input', function(e) {
    const url = e.target.value;
    if (url) {
        const logoPreview = document.getElementById('logoPreview');
        const logoPreviewContainer = document.getElementById('logoPreviewContainer');
        
        logoPreview.src = url;
        logoPreview.style.display = 'block';
        logoPreviewContainer.style.display = 'block';
    }
});

// ===== VALIDAÇÃO DE FORMULÁRIO COM SUPORTE A ABAS =====
(() => {
    const form = document.querySelector('form.needs-validation');
    if (!form) return;

    // Labels amigáveis para os campos
    const fieldLabels = {
        'nome': 'Nome',
        'cnpj': 'CNPJ',
        'email': 'Email',
        'contador_email': 'Email do Contador',
        'escritorio_email': 'Email do Escritório'
    };

    // Mapa de aba por ID do tab-pane
    const tabMap = {
        'dados': { tabId: 'dados-tab', label: 'Dados Básicos' },
        'endereco': { tabId: 'endereco-tab', label: 'Endereço' },
        'fiscal': { tabId: 'fiscal-tab', label: 'Fiscal' },
        'contador': { tabId: 'contador-tab', label: 'Contador' },
        'revenda': { tabId: 'revenda-tab', label: 'Revenda' }
    };

    // Descobre em qual aba o campo está
    function getFieldTab(field) {
        const pane = field.closest('.tab-pane');
        if (pane) {
            return tabMap[pane.id] || null;
        }
        return null;
    }

    // Limpa indicadores de erro das abas
    function clearTabErrors() {
        document.querySelectorAll('#empresaTabs .nav-link .badge').forEach(b => b.remove());
        document.querySelectorAll('#empresaTabs .nav-link').forEach(tab => {
            tab.classList.remove('text-danger');
        });
    }

    // Adiciona indicador de erro numa aba
    function markTabError(tabId, count) {
        const tab = document.getElementById(tabId);
        if (tab && !tab.querySelector('.badge')) {
            const badge = document.createElement('span');
            badge.className = 'badge bg-danger ms-1';
            badge.textContent = count;
            badge.title = count + ' campo(s) com problema';
            tab.appendChild(badge);
            tab.classList.add('text-danger');
        }
    }

    // Remove classe de erro ao corrigir campo
    form.addEventListener('input', function(e) {
        const field = e.target;
        if (field.classList.contains('is-invalid')) {
            if (field.checkValidity()) {
                field.classList.remove('is-invalid');
                field.classList.add('is-valid');
            }
        }
    });

    form.addEventListener('submit', function(event) {
        // Limpar estado anterior
        clearTabErrors();
        form.querySelectorAll('.is-invalid').forEach(f => f.classList.remove('is-invalid'));
        form.querySelectorAll('.is-valid').forEach(f => f.classList.remove('is-valid'));

        // Coletar todos os campos inválidos
        const invalidFields = [];
        const tabErrors = {};

        form.querySelectorAll('input, select, textarea').forEach(field => {
            if (!field.checkValidity()) {
                field.classList.add('is-invalid');
                const name = field.name || field.id;
                const label = fieldLabels[name] || field.closest('.mb-3')?.querySelector('.form-label')?.textContent?.replace('*', '').trim() || name;
                const tab = getFieldTab(field);
                
                invalidFields.push({ field, label, tab });
                
                if (tab) {
                    tabErrors[tab.tabId] = (tabErrors[tab.tabId] || 0) + 1;
                }
            }
        });

        if (invalidFields.length > 0) {
            event.preventDefault();
            event.stopPropagation();

            // Marcar abas com erros
            for (const [tabId, count] of Object.entries(tabErrors)) {
                markTabError(tabId, count);
            }

            // Navegar para a aba do primeiro campo inválido
            const firstInvalid = invalidFields[0];
            if (firstInvalid.tab) {
                const tab = document.getElementById(firstInvalid.tab.tabId);
                if (tab) {
                    const bsTab = new bootstrap.Tab(tab);
                    bsTab.show();
                }
            }

            // Focar no primeiro campo inválido após a aba ser exibida
            setTimeout(() => {
                firstInvalid.field.focus();
                firstInvalid.field.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }, 200);

            // Montar mensagem de alerta
            const msgs = invalidFields.map(f => {
                const tabLabel = f.tab ? ` (aba ${f.tab.label})` : '';
                const isRequired = f.field.hasAttribute('required') && !f.field.value.trim();
                const reason = isRequired ? 'campo obrigatório' : 'valor inválido';
                return `• ${f.label}${tabLabel} — ${reason}`;
            });

            // Exibir alerta com todos os campos
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-3';
            alertDiv.setAttribute('role', 'alert');
            alertDiv.innerHTML = `
                <strong><i class="bi bi-exclamation-triangle"></i> Verifique os campos abaixo:</strong>
                <ul class="mb-0 mt-2">${msgs.map(m => `<li>${m}</li>`).join('')}</ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            
            // Remove alerta anterior se existir
            const oldAlert = form.querySelector('.alert-danger');
            if (oldAlert) oldAlert.remove();
            
            form.insertBefore(alertDiv, form.querySelector('.tab-content'));
        }

        form.classList.add('was-validated');
    });
})();
</script>
{% endblock %}