<?php $title = 'Novo Cliente'; ?>

<style>
  .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-6 { grid-column: span 6; }
  .col-8 { grid-column: span 8; }
  .col-12 { grid-column: span 12; }
  @media (max-width: 900px) { .col-2, .col-3, .col-4, .col-6, .col-8 { grid-column: span 12; } }
  .field-sm { max-width: 180px; }
  .field-xs { max-width: 140px; }
  .group { margin-bottom: 1rem; }
  .group h2 { font-size: 1rem; color: #444; margin: 0 0 0.5rem; }
  .error { border-color: #d93025 !important; }
  .hint { font-size: 0.85rem; color: #777; }
  /* Custom file input UI */
  .file-input { display: flex; align-items: center; gap: 8px; }
  .file-input .filename { font-size: 0.9rem; color: #555; }
  .sr-only-file { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
</style>

<div class="card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <h1>Novo Cliente</h1>
        <a href="/clientes" class="btn btn-secondary">Voltar</a>
    </div>
    
    <div id="alert" class="alert" style="display: none;"></div>
    
    <form id="clientForm" enctype="multipart/form-data">
        <div class="group">
          <h2>Identificação fiscal</h2>
          <div class="grid">
            <div class="form-group col-6">
              <label for="nome_fantasia">Nome Fantasia *</label>
              <input type="text" id="nome_fantasia" name="nome_fantasia" required placeholder="Digite o nome fantasia" autocomplete="organization">
            </div>
            <div class="form-group col-6">
              <label for="razao_social">Razão Social *</label>
              <input type="text" id="razao_social" name="razao_social" required placeholder="Digite a razão social" autocomplete="organization">
            </div>
            <div class="form-group col-4">
              <label for="cnpj">CNPJ *</label>
              <div style="display:flex; align-items:center; gap:6px;">
                <input type="text" id="cnpj" name="cnpj" class="field-sm" maxlength="18" required placeholder="00.000.000/0000-00" inputmode="numeric" autocomplete="off" title="Cadastro Nacional da Pessoa Jurídica">
                <button type="button" id="cnpjLookupBtn" class="btn btn-secondary">Consultar CNPJ</button>
              </div>
            </div>
            <div class="form-group col-4">
              <label for="ie">Inscrição Estadual *</label>
              <input type="text" id="ie" name="ie" required placeholder="Informe a IE" autocomplete="off" title="Inscrição Estadual conforme UF">
              <div class="hint">Aceita "ISENTO" ou máscara dinâmica por UF.</div>
            </div>
            <div class="form-group col-4">
              <label for="im">Inscrição Municipal</label>
              <input type="text" id="im" name="im" placeholder="Opcional" autocomplete="off" title="Inscrição Municipal conforme município">
            </div>
          </div>
        </div>

        <div class="group">
          <h2>Contato</h2>
          <div class="grid">
            <div class="form-group col-6">
              <label for="telefone_fixo">Telefone Fixo</label>
              <input type="text" id="telefone_fixo" name="telefone_fixo" placeholder="(00) 0000-0000" autocomplete="tel">
            </div>
            <div class="form-group col-6">
              <label for="telefone_celular">Telefone Celular</label>
              <input type="text" id="telefone_celular" name="telefone_celular" placeholder="(00) 00000-0000" autocomplete="tel">
            </div>
          </div>
        </div>

        <div class="group">
          <h2>Arquivos</h2>
          <div class="grid">
            <div class="form-group col-6">
              <label for="imagem">Imagem do Cliente (JPG/PNG até 2MB)</label>
              <div class="file-input">
                <input type="file" id="imagem" name="imagem" accept="image/jpeg,image/png" class="sr-only-file">
                <label for="imagem" class="btn btn-secondary">Selecionar arquivo</label>
                <span id="imagemFilename" class="filename">Nenhum arquivo selecionado</span>
              </div>
            </div>
            <div class="form-group col-6">
              <label for="arquivo">Arquivo (PDF/DOC/XLS até 5MB)</label>
              <div class="file-input">
                <input type="file" id="arquivo" name="arquivo" accept="application/pdf,application/msword,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" class="sr-only-file">
                <label for="arquivo" class="btn btn-secondary">Selecionar arquivo</label>
                <span id="arquivoFilename" class="filename">Nenhum arquivo selecionado</span>
              </div>
            </div>
          </div>
        </div>

        <div class="group">
          <h2>Referências</h2>
          <div class="grid">
            <div class="form-group col-12">
              <label for="referencias">Referências Comerciais</label>
              <textarea id="referencias" name="referencias" rows="4" placeholder="Informe referências comerciais relevantes"></textarea>
            </div>
          </div>
        </div>

        <div class="group">
          <h2>Financeiro</h2>
          <div class="grid">
            <div class="form-group col-6">
              <label for="limite_credito">Limite de Crédito</label>
              <input type="text" id="limite_credito" name="limite_credito" placeholder="0,00" inputmode="decimal">
            </div>
          </div>
        </div>

        <div class="group">
          <h2>Gestão do cliente</h2>
          <div class="grid">
            <div class="form-group col-4">
              <label for="email">E-mail</label>
              <input type="email" id="email" name="email" placeholder="email@cliente.com" autocomplete="email">
            </div>
            <div class="form-group col-4">
              <label for="contato_nome">Contato</label>
              <input type="text" id="contato_nome" name="contato_nome" placeholder="Nome do contato">
            </div>
            <div class="form-group col-4">
              <label for="site_url">Site</label>
              <input type="url" id="site_url" name="site_url" placeholder="https://www.site.com">
            </div>
            <div class="form-group col-12">
              <label for="observacoes">Observações</label>
              <textarea id="observacoes" name="observacoes" rows="3" placeholder="Notas gerais sobre o cliente"></textarea>
            </div>
            <div class="form-group col-3" style="display:flex; align-items:end; gap:6px;">
              <input type="checkbox" id="bloqueado" name="bloqueado">
              <label for="bloqueado">Bloquear cliente</label>
            </div>
            <div class="form-group col-3" style="display:flex; align-items:end; gap:6px;">
              <input type="checkbox" id="inativo" name="inativo">
              <label for="inativo">Inativar cliente</label>
            </div>
            <div class="form-group col-6">
              <label for="status_motivo">Motivo (obrigatório ao bloquear/inativar)</label>
              <input type="text" id="status_motivo" name="status_motivo" placeholder="Informe o motivo">
            </div>
          </div>
        </div>

        <div class="group">
          <h2>Endereço principal</h2>
          <div class="grid">
            <div class="form-group col-2">
              <label for="cep">CEP *</label>
              <input type="text" id="cep" name="cep" class="field-xs" maxlength="9" required placeholder="00000-000" inputmode="numeric" autocomplete="postal-code" title="CEP no formato XXXXX-XXX">
            </div>
            <div class="form-group col-1" style="display:flex; align-items:flex-end;">
              <button type="button" id="cepLookupBtn" class="btn btn-secondary" style="width:100%;">Buscar CEP</button>
            </div>
            <div class="form-group col-9">
              <label for="logradouro">Logradouro *</label>
              <input type="text" id="logradouro" name="logradouro" required placeholder="Rua, Av., etc.">
            </div>
            <div class="form-group col-3">
              <label for="numero">Número *</label>
              <input type="text" id="numero" name="numero" required>
            </div>
            <div class="form-group col-9">
              <label for="complemento">Complemento</label>
              <input type="text" id="complemento" name="complemento">
            </div>
            <div class="form-group col-6">
              <label for="bairro">Bairro *</label>
              <input type="text" id="bairro" name="bairro" required>
            </div>
            <div class="form-group col-4">
              <label for="cidade">Cidade *</label>
              <input type="text" id="cidade" name="cidade" required>
            </div>
            <div class="form-group col-2">
              <label for="estado">Estado *</label>
              <input type="text" id="estado" name="estado" required placeholder="UF" maxlength="2" style="max-width:80px;" title="Sigla UF">
            </div>
          </div>
        </div>

        <div class="group">
          <h2>Endereços alternativos</h2>
          <div class="grid">
            <div class="form-group col-6" style="display:flex; align-items:center; gap:8px;">
              <input type="checkbox" id="billing_enabled" name="billing_enabled">
              <label for="billing_enabled">Endereço de cobrança diferente</label>
            </div>
            <div class="form-group col-6" style="display:flex; align-items:center; gap:8px;">
              <input type="checkbox" id="shipping_enabled" name="shipping_enabled">
              <label for="shipping_enabled">Endereço de entrega diferente</label>
            </div>
          </div>
          <div id="billing_section" style="display:none; margin-top:0.75rem;">
            <h3 style="font-size:0.95rem; color:#555; margin-bottom:0.5rem;">Endereço de Cobrança</h3>
            <div class="grid">
              <div class="form-group col-2">
                <label for="billing_cep">CEP *</label>
                <input type="text" id="billing_cep" name="billing_cep" class="field-xs" maxlength="9" placeholder="00000-000" inputmode="numeric" autocomplete="postal-code">
              </div>
              <div class="form-group col-1" style="display:flex; align-items:flex-end;">
                <button type="button" id="billingCepLookupBtn" class="btn btn-secondary" style="width:100%;">Buscar CEP</button>
              </div>
              <div class="form-group col-9">
                <label for="billing_logradouro">Logradouro *</label>
                <input type="text" id="billing_logradouro" name="billing_logradouro" placeholder="Rua, Av., etc.">
              </div>
              <div class="form-group col-3">
                <label for="billing_numero">Número *</label>
                <input type="text" id="billing_numero" name="billing_numero">
              </div>
              <div class="form-group col-9">
                <label for="billing_complemento">Complemento</label>
                <input type="text" id="billing_complemento" name="billing_complemento">
              </div>
              <div class="form-group col-6">
                <label for="billing_bairro">Bairro *</label>
                <input type="text" id="billing_bairro" name="billing_bairro">
              </div>
              <div class="form-group col-4">
                <label for="billing_cidade">Cidade *</label>
                <input type="text" id="billing_cidade" name="billing_cidade">
              </div>
              <div class="form-group col-2">
                <label for="billing_estado">Estado *</label>
                <input type="text" id="billing_estado" name="billing_estado" placeholder="UF" maxlength="2" style="max-width:80px;">
              </div>
            </div>
          </div>
          <div id="shipping_section" style="display:none; margin-top:0.75rem;">
            <h3 style="font-size:0.95rem; color:#555; margin-bottom:0.5rem;">Endereço de Entrega</h3>
            <div class="grid">
              <div class="form-group col-2">
                <label for="shipping_cep">CEP *</label>
                <input type="text" id="shipping_cep" name="shipping_cep" class="field-xs" maxlength="9" placeholder="00000-000" inputmode="numeric" autocomplete="postal-code">
              </div>
              <div class="form-group col-1" style="display:flex; align-items:flex-end;">
                <button type="button" id="shippingCepLookupBtn" class="btn btn-secondary" style="width:100%;">Buscar CEP</button>
              </div>
              <div class="form-group col-9">
                <label for="shipping_logradouro">Logradouro *</label>
                <input type="text" id="shipping_logradouro" name="shipping_logradouro" placeholder="Rua, Av., etc.">
              </div>
              <div class="form-group col-3">
                <label for="shipping_numero">Número *</label>
                <input type="text" id="shipping_numero" name="shipping_numero">
              </div>
              <div class="form-group col-9">
                <label for="shipping_complemento">Complemento</label>
                <input type="text" id="shipping_complemento" name="shipping_complemento">
              </div>
              <div class="form-group col-6">
                <label for="shipping_bairro">Bairro *</label>
                <input type="text" id="shipping_bairro" name="shipping_bairro">
              </div>
              <div class="form-group col-4">
                <label for="shipping_cidade">Cidade *</label>
                <input type="text" id="shipping_cidade" name="shipping_cidade">
              </div>
              <div class="form-group col-2">
                <label for="shipping_estado">Estado *</label>
                <input type="text" id="shipping_estado" name="shipping_estado" placeholder="UF" maxlength="2" style="max-width:80px;">
              </div>
            </div>
          </div>
        </div>

        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <button type="submit" class="btn" id="submitBtn">Criar Cliente</button>
            <a href="/clientes" class="btn btn-secondary">Cancelar</a>
        </div>
    </form>
    
    <div id="loading" class="loading">Salvando cliente...</div>
</div>

<script>
    const clientForm = document.getElementById('clientForm');
    const submitBtn = document.getElementById('submitBtn');
    const cnpjLookupBtn = document.getElementById('cnpjLookupBtn');
    const cnpjInput = document.getElementById('cnpj');
    const cepLookupBtn = document.getElementById('cepLookupBtn');
    const cepInput = document.getElementById('cep');
    const nfInput = document.getElementById('nome_fantasia');
    const rsInput = document.getElementById('razao_social');
    const telFixoInput = document.getElementById('telefone_fixo');
    const telCelInput = document.getElementById('telefone_celular');
    const limInput = document.getElementById('limite_credito');
    const ieInput = document.getElementById('ie');
    const imInput = document.getElementById('im');
    const emailInput = document.getElementById('email');
    const contatoInput = document.getElementById('contato_nome');
    const siteInput = document.getElementById('site_url');
    const obsInput = document.getElementById('observacoes');
    const bloqueadoChk = document.getElementById('bloqueado');
    const inativoChk = document.getElementById('inativo');
    const statusMotivoInput = document.getElementById('status_motivo');
    const billingEnabled = document.getElementById('billing_enabled');
    const shippingEnabled = document.getElementById('shipping_enabled');
    const billingSection = document.getElementById('billing_section');
    const shippingSection = document.getElementById('shipping_section');
    const billingCepInput = document.getElementById('billing_cep');
    const shippingCepInput = document.getElementById('shipping_cep');
    const billingCepBtn = document.getElementById('billingCepLookupBtn');
    const shippingCepBtn = document.getElementById('shippingCepLookupBtn');
    
    // Máscaras e validações
    function maskCEP(value) {
        const d = value.replace(/\D/g,'').slice(0,8);
        return d.length > 5 ? `${d.slice(0,5)}-${d.slice(5)}` : d;
    }
    function maskCNPJ(value) {
        const d = value.replace(/\D/g,'').slice(0,14);
        if (d.length <= 2) return d;
        if (d.length <= 5) return `${d.slice(0,2)}.${d.slice(2)}`;
        if (d.length <= 8) return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5)}`;
        if (d.length <= 12) return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5,8)}/${d.slice(8)}`;
        return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5,8)}/${d.slice(8,12)}-${d.slice(12,14)}`;
    }
    function validateIE(ie, uf) {
        const ieTrim = (ie || '').trim().toUpperCase();
        if (ieTrim === 'ISENTO') return true;
        const d = ieTrim.replace(/[^0-9A-Z]/g,'');
        const sizes = { SP:12, RJ:8, MG:13, PR:10, RS:10, SC:9, BA:8, ES:9, PE:14, CE:9, GO:9, MT:11, MS:9, PA:8, AL:9, AM:9, DF:13, RN:9, RO:14, TO:9, MA:9, PB:9, PI:9, SE:9 };
        const size = sizes[uf] || 9;
        return d.length === size;
    }
    function validateIM(im) {
        const v = (im || '').trim();
        if (v === '') return true;
        return /^[0-9A-Za-z\.\-\/]{5,20}$/.test(v);
    }
    // Máscara monetária BRL
    function onlyDigits(str) { return (str || '').replace(/\D/g, ''); }
    function formatMoneyBR(value) {
        const digits = onlyDigits(value);
        if (!digits) return 'R$ 0,00';
        const intPart = digits.slice(0, -2) || '0';
        const fracPart = digits.slice(-2).padStart(2, '0');
        const intFormatted = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        return `R$ ${intFormatted},${fracPart}`;
    }
    function parseMoneyBR(value) {
        const digits = onlyDigits(value);
        if (!digits) return 0;
        const v = parseInt(digits, 10);
        return (v / 100);
    }
    function setError(el, has) { el.classList.toggle('error', !!has); }

    cnpjInput.addEventListener('input', function(e) {
        const v = maskCNPJ(e.target.value);
        e.target.value = v;
        setError(e.target, v.length !== 18);
        if (v.length === 18) ieInput.focus();
    });
    cepInput.addEventListener('input', function(e) {
        const v = maskCEP(e.target.value);
        e.target.value = v;
        setError(e.target, v.length !== 9);
        if (v.length === 9) document.getElementById('logradouro').focus();
    });
    ieInput.addEventListener('blur', function() {
        const uf = (document.getElementById('estado').value || '').toUpperCase();
        const ok = validateIE(ieInput.value, uf);
        setError(ieInput, !ok);
    });
    imInput.addEventListener('blur', function() {
        const ok = validateIM(imInput.value);
        setError(imInput, !ok);
    });
    // Limite de crédito máscara/validação
    limInput.addEventListener('input', function(e) {
        const v = e.target.value;
        e.target.value = formatMoneyBR(v);
        const n = parseMoneyBR(e.target.value);
        setError(e.target, !(Number.isFinite(n) && n >= 0));
    });
    limInput.addEventListener('blur', function(e) {
        e.target.value = formatMoneyBR(e.target.value);
    });
    limInput.addEventListener('focus', function(e) { setTimeout(() => e.target.select(), 0); });

    // Toggle cobrança/entrega
    function toggleSection(checkbox, section, prefix) {
        const enabled = checkbox.checked;
        section.style.display = enabled ? 'block' : 'none';
        const reqIds = ['logradouro','numero','bairro','cidade','estado','cep'];
        reqIds.forEach(id => {
            const input = document.getElementById(`${prefix}_${id}`);
            if (!input) return;
            input.required = enabled;
            if (!enabled) input.classList.remove('error');
        });
    }
    billingEnabled.addEventListener('change', () => toggleSection(billingEnabled, billingSection, 'billing'));
    shippingEnabled.addEventListener('change', () => toggleSection(shippingEnabled, shippingSection, 'shipping'));
    statusMotivoInput.addEventListener('input', () => {
        statusMotivoInput.classList.toggle('error', false);
    });
    bloqueadoChk.addEventListener('change', () => {
        if (bloqueadoChk.checked || inativoChk.checked) statusMotivoInput.required = true; else statusMotivoInput.required = false;
    });
    inativoChk.addEventListener('change', () => {
        if (bloqueadoChk.checked || inativoChk.checked) statusMotivoInput.required = true; else statusMotivoInput.required = false;
    });

    // CEP máscaras
    billingCepInput.addEventListener('input', function(e) {
        const v = maskCEP(e.target.value); e.target.value = v; setError(e.target, billingEnabled.checked && v.length !== 9);
    });
    shippingCepInput.addEventListener('input', function(e) {
        const v = maskCEP(e.target.value); e.target.value = v; setError(e.target, shippingEnabled.checked && v.length !== 9);
    });

    // Busca CEP cobrança/entrega
    async function cepLookupGeneric(cepDigits, prefix) {
        const btn = prefix === 'billing' ? billingCepBtn : shippingCepBtn;
        try {
            btn.disabled = true; btn.textContent = 'Buscando...';
            const response = await apiRequest(`/api/clientes/cep/${cepDigits}`);
            if (response && response.ok) {
                const payload = await response.json(); const d = payload.data || {};
                ['logradouro','complemento','bairro','cidade','estado'].forEach(k => {
                    const el = document.getElementById(`${prefix}_${k}`);
                    if (el && d[k]) el.value = d[k];
                });
                const cepEl = document.getElementById(`${prefix}_cep`); if (cepEl) cepEl.value = d.cep || cepDigits;
                showAlert(`Endereço de ${prefix === 'billing' ? 'cobrança' : 'entrega'} carregado pelo CEP!`, 'success');
            } else {
                showAlert('CEP não encontrado', 'error');
            }
        } catch (err) { showAlert('Erro ao buscar CEP', 'error'); }
        finally { btn.disabled = false; btn.textContent = 'Buscar CEP'; }
    }
    billingCepBtn.addEventListener('click', () => {
        const cepDigits = (billingCepInput.value || '').replace(/\D/g,'');
        if (cepDigits.length !== 8) { showAlert('CEP de cobrança deve ter 8 dígitos', 'error'); return; }
        cepLookupGeneric(cepDigits, 'billing');
    });
    shippingCepBtn.addEventListener('click', () => {
        const cepDigits = (shippingCepInput.value || '').replace(/\D/g,'');
        if (cepDigits.length !== 8) { showAlert('CEP de entrega deve ter 8 dígitos', 'error'); return; }
        cepLookupGeneric(cepDigits, 'shipping');
    });
    
    // Consulta CNPJ
    // Auto-consulta ao digitar/blur quando atingir 14 dígitos
    let __cnpjAutoTimer = null;
    async function tryAutoCnpjLookup() {
        const digits = (cnpjInput.value || '').replace(/\D/g, '');
        if (digits.length !== 14) return;
        // Evita disparos repetidos se já preencheu nome/razão
        if ((nfInput.value || rsInput.value)) return;
        // Reutiliza o handler do botão
        cnpjLookupBtn.click();
    }
    cnpjInput.addEventListener('blur', tryAutoCnpjLookup);
    cnpjInput.addEventListener('input', () => {
        clearTimeout(__cnpjAutoTimer);
        __cnpjAutoTimer = setTimeout(tryAutoCnpjLookup, 400);
    });

    cnpjLookupBtn.addEventListener('click', async function() {
        const cnpj = cnpjInput.value.replace(/\D/g, '');
        
        if (cnpj.length !== 14) {
            showAlert('CNPJ deve ter 14 dígitos', 'error');
            return;
        }
        
        try {
            cnpjLookupBtn.disabled = true;
            cnpjLookupBtn.textContent = 'Consultando...';
            
            const response = await apiRequest(`/api/clientes/cnpj/${cnpj}`);
            
            if (response && response.ok) {
                const payload = await response.json();
                const d = payload.data || {};
                const nomeEmpresa = d.nome_fantasia || d.razao_social;
                if (nomeEmpresa) { nfInput.value = nomeEmpresa; rsInput.value = d.razao_social || rsInput.value; }
                // Tentativa simples de separar telefones: se houver 11 dígitos, colocar em celular, 10 em fixo
                if (d.telefone) {
                    const digits = (d.telefone || '').replace(/\D/g,'');
                    if (digits.length === 11) telCelInput.value = d.telefone; else if (digits.length === 10) telFixoInput.value = d.telefone;
                }
                const e = d.endereco || {};
                if (e.logradouro) document.getElementById('logradouro').value = e.logradouro;
                if (e.numero) document.getElementById('numero').value = e.numero;
                if (e.complemento) document.getElementById('complemento').value = e.complemento;
                if (e.bairro) document.getElementById('bairro').value = e.bairro;
                if (e.municipio) document.getElementById('cidade').value = e.municipio;
                if (e.uf) document.getElementById('estado').value = e.uf;
                if (e.cep) document.getElementById('cep').value = e.cep;
                
                showAlert('Dados do CNPJ carregados com sucesso!', 'success');
            } else {
                showAlert('Erro ao consultar CNPJ', 'error');
            }
        } catch (error) {
            showAlert('Erro ao consultar CNPJ', 'error');
        } finally {
            cnpjLookupBtn.disabled = false;
            cnpjLookupBtn.textContent = 'Consultar CNPJ';
        }
    });
    
    // Busca CEP
    cepLookupBtn.addEventListener('click', async function() {
        const cep = cepInput.value.replace(/\D/g, '');
        if (cep.length !== 8) {
            showAlert('CEP deve ter 8 dígitos', 'error');
            return;
        }
        try {
            cepLookupBtn.disabled = true;
            cepLookupBtn.textContent = 'Buscando...';
            const response = await apiRequest(`/api/clientes/cep/${cep}`);
            if (response && response.ok) {
                const payload = await response.json();
                const d = payload.data || {};
                if (d.logradouro) document.getElementById('logradouro').value = d.logradouro;
                if (d.complemento) document.getElementById('complemento').value = d.complemento;
                if (d.bairro) document.getElementById('bairro').value = d.bairro;
                if (d.cidade) document.getElementById('cidade').value = d.cidade;
                if (d.estado) document.getElementById('estado').value = d.estado;
                document.getElementById('cep').value = d.cep || cep;
                showAlert('Endereço carregado pelo CEP!', 'success');
            } else {
                showAlert('CEP não encontrado', 'error');
            }
        } catch (err) {
            showAlert('Erro ao buscar CEP', 'error');
        } finally {
            cepLookupBtn.disabled = false;
            cepLookupBtn.textContent = 'Buscar CEP';
        }
    });

    // Submissão do formulário
    clientForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(clientForm);
        // Helper para montar endereço e geocodificar
        function buildAddress(prefix = '') {
            const get = (id) => (document.getElementById((prefix ? prefix + '_' : '') + id)?.value || '').trim();
            const parts = [];
            const logradouro = get('logradouro');
            const numero = get('numero');
            const bairro = get('bairro');
            const cidade = get('cidade');
            const estado = get('estado');
            const cep = (get('cep') || '').replace(/\D/g,'');
            if (logradouro) parts.push(logradouro);
            if (numero) parts.push(String(numero));
            if (bairro) parts.push(bairro);
            if (cidade) parts.push(cidade);
            if (estado) parts.push(estado);
            if (cep) parts.push(cep);
            return parts.join(', ');
        }
        async function geocode(address) {
            if (!address) return null;
            try {
                // Usa proxy do backend para evitar bloqueios/CORS do Nominatim
                const resp = await apiRequest(`/api/clientes/geocode?q=${encodeURIComponent(address)}`);
                if (!resp || !resp.ok) return null;
                const data = await resp.json();
                if (!data || !data.ok) return null;
                return { lat: parseFloat(data.lat), lon: parseFloat(data.lon) };
            } catch (_) { return null; }
        }
        // Normalizações
        const cnpjDigits = (formData.get('cnpj') || '').replace(/\D/g, '');
        formData.set('cnpj', cnpjDigits);
        const cepDigits = (formData.get('cep') || '').replace(/\D/g, '');
        formData.set('cep', cepDigits);
        // Status gestão
        formData.set('bloqueado', bloqueadoChk.checked ? 'true' : 'false');
        formData.set('inativo', inativoChk.checked ? 'true' : 'false');
        if ((bloqueadoChk.checked || inativoChk.checked) && !(statusMotivoInput.value || '').trim()) {
            setError(statusMotivoInput, true); showAlert('Informe o motivo para bloquear/inativar', 'error'); return;
        }
        // Endereços alternativos
        formData.set('billing_enabled', billingEnabled.checked ? 'true' : 'false');
        formData.set('shipping_enabled', shippingEnabled.checked ? 'true' : 'false');
        if (billingEnabled.checked) {
            formData.set('billing_cep', (document.getElementById('billing_cep').value || '').replace(/\D/g,''));
            formData.set('billing_estado', (document.getElementById('billing_estado').value || '').toUpperCase());
        }
        if (shippingEnabled.checked) {
            formData.set('shipping_cep', (document.getElementById('shipping_cep').value || '').replace(/\D/g,''));
            formData.set('shipping_estado', (document.getElementById('shipping_estado').value || '').toUpperCase());
        }
        // Tipo padrão PJ
        formData.set('tipo', 'PJ');
        formData.set('ie', (formData.get('ie') || '').toString().trim());
        formData.set('im', (formData.get('im') || '').toString().trim());
        // Validações finais
        const uf = (formData.get('estado') || '').toString().toUpperCase();
        if (!validateIE(formData.get('ie'), uf)) { showAlert('Inscrição Estadual inválida para a UF', 'error'); return; }
        if (!validateIM(formData.get('im'))) { showAlert('Inscrição Municipal inválida', 'error'); return; }
        // Limite de crédito: manter formato BR, backend normaliza
        const limNum = parseMoneyBR(formData.get('limite_credito'));
        if (!Number.isFinite(limNum) || limNum < 0) { showAlert('Limite de crédito inválido', 'error'); return; }
        formData.set('limite_credito', String(limNum));
        if (!cnpjDigits || cnpjDigits.length !== 14) {
            showAlert('CNPJ é obrigatório e deve ter 14 dígitos', 'error');
            return;
        }
        // Geocodificar endereços antes de enviar
        try {
            const principalAddr = buildAddress('');
            const pGeo = await geocode(principalAddr);
            if (pGeo) {
                formData.set('principal_latitude', String(pGeo.lat));
                formData.set('principal_longitude', String(pGeo.lon));
            }
            if (billingEnabled.checked) {
                const billingAddr = buildAddress('billing');
                const bGeo = await geocode(billingAddr);
                if (bGeo) {
                    formData.set('billing_latitude', String(bGeo.lat));
                    formData.set('billing_longitude', String(bGeo.lon));
                }
            }
            if (shippingEnabled.checked) {
                const shippingAddr = buildAddress('shipping');
                const sGeo = await geocode(shippingAddr);
                if (sGeo) {
                    formData.set('shipping_latitude', String(sGeo.lat));
                    formData.set('shipping_longitude', String(sGeo.lon));
                }
            }
        } catch (_) { /* silencioso: backend fará fallback */ }

        try {
            showLoading();
            submitBtn.disabled = true;
            
            const response = await apiRequest('/api/clientes', {
                method: 'POST',
                body: formData
            });
            
            if (response && response.ok) {
                const result = await response.json();
                showAlert('Cliente criado com sucesso!', 'success');
                
                setTimeout(() => {
                    window.location.href = `/clientes/${result.id}`;
                }, 1500);
            } else {
                const error = await response.json();
                showAlert(error.message || 'Erro ao criar cliente', 'error');
            }
        } catch (error) {
            showAlert('Erro ao criar cliente', 'error');
        } finally {
            hideLoading();
            submitBtn.disabled = false;
        }
    });
    
    function showAlert(message, type = 'success') {
        const alert = document.getElementById('alert');
        alert.className = `alert alert-${type}`;
        alert.textContent = message;
        alert.style.display = 'block';
        
        setTimeout(() => {
            alert.style.display = 'none';
        }, 5000);
    }
    
    // Atualizar rótulos de arquivo selecionado (imagem/arquivo)
    const imagemInput = document.getElementById('imagem');
    const arquivoInput = document.getElementById('arquivo');
    const imagemFilename = document.getElementById('imagemFilename');
    const arquivoFilename = document.getElementById('arquivoFilename');
    if (imagemInput) {
        imagemInput.addEventListener('change', function() {
            const f = this.files && this.files[0] ? this.files[0].name : 'Nenhum arquivo selecionado';
            if (imagemFilename) imagemFilename.textContent = f;
        });
    }
    if (arquivoInput) {
        arquivoInput.addEventListener('change', function() {
            const f = this.files && this.files[0] ? this.files[0].name : 'Nenhum arquivo selecionado';
            if (arquivoFilename) arquivoFilename.textContent = f;
        });
    }
</script>