@extends('layouts.app')

@section('title', 'Nova empresa - ERP-PLUS')
@section('page_title', 'Nova empresa')
@section('page_subtitle', 'Preencha o CNPJ para buscar os dados automaticamente.')
@section('page_actions')
    <a class="button" href="{{ route('companies.index') }}">Cancelar</a>
@endsection

@push('styles')
<style>
    .co-section-header {
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        padding: 12px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .co-section-icon {
        width: 30px; height: 30px; border-radius: 7px;
        background: var(--primary-light); border: 1px solid var(--primary-muted);
        display: grid; place-items: center; flex-shrink: 0;
    }
    .co-section-header h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
    .co-section-header span { font-size: 12px; color: var(--muted); margin-left: auto; }
    .co-body { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .co-full { grid-column: 1 / -1; }
    .co-field { display: grid; gap: 5px; }
    .co-label { font-size: 12.5px; font-weight: 600; color: #374151; }
    .co-hint  { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
    .co-input {
        width: 100%; min-height: 40px; border: 1px solid var(--border);
        border-radius: 6px; padding: 8px 11px; font: inherit; font-size: 13.5px;
        background: #fff; color: var(--text);
        transition: border-color .12s, box-shadow .12s;
    }
    .co-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
    .co-input.filled { border-color: #22c55e; background: #f0fdf4; }
    .cert-dropzone {
        border: 2px dashed var(--border); border-radius: 8px;
        padding: 24px 16px; text-align: center; cursor: pointer;
        background: var(--surface-2); transition: border-color .15s, background .15s;
    }
    .cert-dropzone:hover, .cert-dropzone.drag { border-color: var(--primary); background: var(--primary-light); }
    .sticky-actions {
        position: sticky; bottom: 0; background: var(--surface);
        border-top: 1px solid var(--border); padding: 14px 20px;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        box-shadow: 0 -2px 8px rgba(0,0,0,.06); z-index: 5;
    }
    @media (max-width: 640px) { .co-body { grid-template-columns: 1fr; } .co-full { grid-column: 1; } }
</style>
@endpush

@section('content')

@if ($errors->any())
<div class="notice error">
    <strong>Corrija os erros abaixo:</strong>
    <ul style="margin:6px 0 0 18px;font-size:13px">
        @foreach ($errors->all() as $e)
            <li>{{ $e }}</li>
        @endforeach
    </ul>
</div>
@endif

<form method="POST" action="{{ route('companies.store') }}" enctype="multipart/form-data" id="company-form">
    @csrf

    <div style="display:grid;gap:18px">

        {{-- ── 1. CNPJ ─────────────────────────────────────────────────── --}}
        <div class="panel">
            <div class="co-section-header">
                <div class="co-section-icon">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </div>
                <h3>Identificacao — CNPJ</h3>
                <span>Busca automatica na Receita Federal</span>
            </div>
            <div class="co-body">
                <div class="co-field co-full">
                    <label class="co-label" for="cnpj">CNPJ <span style="color:var(--danger)">*</span></label>
                    <div style="display:flex;gap:8px">
                        <input id="cnpj" name="cnpj" class="co-input"
                               value="{{ old('cnpj') }}"
                               maxlength="18" inputmode="numeric" autocomplete="off"
                               placeholder="00.000.000/0000-00" required style="flex:1"
                               oninput="cnpjOnInput(this)"
                               onblur="if(cnpjDigits().length===14 && cnpjDigits()!==lastFetched) lookupCnpj()">
                        <button type="button" id="btn-cnpj"
                                onclick="lookupCnpj()"
                                style="min-height:40px;padding:0 18px;background:var(--primary);color:#fff;border:none;border-radius:6px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap">
                            <svg id="ico-search" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                            <svg id="ico-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:none;animation:spin .7s linear infinite"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
                            <span id="btn-cnpj-label">Buscar dados</span>
                        </button>
                    </div>
                    <div id="cnpj-status" style="font-size:12px;min-height:16px;margin-top:3px"></div>
                    @error('cnpj') <div class="error">{{ $message }}</div> @enderror
                </div>

                <div class="co-field co-full">
                    <label class="co-label" for="name">Razao social <span style="color:var(--danger)">*</span></label>
                    <input id="name" name="name" class="co-input" value="{{ old('name') }}" maxlength="160" required placeholder="Nome conforme Receita Federal">
                    @error('name') <div class="error">{{ $message }}</div> @enderror
                </div>

                <div class="co-field co-full">
                    <label class="co-label" for="trade_name">Nome fantasia</label>
                    <input id="trade_name" name="trade_name" class="co-input" value="{{ old('trade_name') }}" maxlength="160" placeholder="Como a empresa e conhecida">
                </div>

                <div class="co-field">
                    <label class="co-label" for="state_registration">Inscricao estadual</label>
                    <input id="state_registration" name="state_registration" class="co-input" value="{{ old('state_registration') }}" maxlength="20">
                </div>

                <div class="co-field">
                    <label class="co-label" for="sefaz_environment">Ambiente SEFAZ</label>
                    <select id="sefaz_environment" name="sefaz_environment" class="co-input" required>
                        <option value="2" @selected(old('sefaz_environment', '2') === '2')>Homologacao (testes)</option>
                        <option value="1" @selected(old('sefaz_environment') === '1')>Producao</option>
                    </select>
                    <div class="co-hint">Altere para Producao somente quando estiver pronto para emitir documentos reais.</div>
                </div>
            </div>
        </div>

        {{-- ── 2. DADOS FISCAIS ────────────────────────────────────────── --}}
        <div class="panel">
            <div class="co-section-header">
                <div class="co-section-icon">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="18" rx="2"/><line x1="8" y1="9" x2="16" y2="9"/><line x1="8" y1="13" x2="14" y2="13"/></svg>
                </div>
                <h3>Dados Fiscais</h3>
                <span>Necessario para emissao de NFS-e</span>
            </div>
            <div class="co-body">
                <div class="co-field">
                    <label class="co-label" for="inscricao_municipal">Inscricao municipal</label>
                    <input id="inscricao_municipal" name="inscricao_municipal" class="co-input"
                           value="{{ old('inscricao_municipal') }}" maxlength="20"
                           placeholder="Numero da IM na prefeitura">
                    @error('inscricao_municipal') <div class="error">{{ $message }}</div> @enderror
                </div>

                <div class="co-field">
                    <label class="co-label" for="regime_tributario">Regime tributario</label>
                    <select id="regime_tributario" name="regime_tributario" class="co-input">
                        <option value="">— Nao informado —</option>
                        <option value="1" @selected(old('regime_tributario') == '1')>Simples Nacional</option>
                        <option value="2" @selected(old('regime_tributario') == '2')>Simples Nacional — excesso</option>
                        <option value="3" @selected(old('regime_tributario') == '3')>Regime Normal</option>
                    </select>
                </div>

                <div class="co-field">
                    <label class="co-label" for="email_fiscal">E-mail fiscal</label>
                    <input id="email_fiscal" name="email_fiscal" type="email" class="co-input"
                           value="{{ old('email_fiscal') }}" maxlength="160"
                           placeholder="fiscal@empresa.com.br">
                    @error('email_fiscal') <div class="error">{{ $message }}</div> @enderror
                </div>

                <div class="co-field">
                    <label class="co-label" for="telefone">Telefone</label>
                    <input id="telefone" name="telefone" class="co-input"
                           value="{{ old('telefone') }}" maxlength="20"
                           placeholder="(XX) XXXXX-XXXX">
                </div>

                <div class="co-field co-full" style="display:flex;align-items:center;gap:10px;padding-top:4px">
                    <input type="checkbox" id="optante_simples" name="optante_simples" value="1"
                           @checked(old('optante_simples', true))
                           style="width:16px;min-height:0;flex-shrink:0">
                    <label for="optante_simples" style="margin:0;font-size:13.5px;font-weight:400;cursor:pointer">
                        Optante pelo Simples Nacional
                    </label>
                </div>
            </div>
        </div>

        {{-- ── 3. ENDEREÇO ─────────────────────────────────────────────── --}}
        <div class="panel">
            <div class="co-section-header">
                <div class="co-section-icon">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                </div>
                <h3>Endereco</h3>
                <span>Digite o CEP para preencher automaticamente</span>
            </div>
            <div class="co-body">
                <div class="co-field">
                    <label class="co-label" for="cep">CEP</label>
                    <div style="display:flex;gap:8px">
                        <input id="cep" name="cep" class="co-input" style="flex:1"
                               value="{{ old('cep') }}" maxlength="9"
                               inputmode="numeric" placeholder="00000-000"
                               oninput="fmtCep(this)" onblur="lookupCep()">
                        <button type="button" id="btn-cep" onclick="lookupCep()"
                                style="min-height:40px;padding:0 14px;background:#f1f5f9;color:var(--text);border:1px solid var(--border);border-radius:6px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap">
                            Buscar
                        </button>
                    </div>
                    <div id="cep-status" style="font-size:12px;min-height:14px;margin-top:3px;color:var(--muted)"></div>
                    @error('cep') <div class="error">{{ $message }}</div> @enderror
                </div>

                <div class="co-field">
                    <label class="co-label" for="uf_end">UF</label>
                    <select id="uf_end" name="uf" class="co-input" required>
                        @foreach (['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'] as $s)
                            <option value="{{ $s }}" @selected(old('uf') === $s)>{{ $s }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="co-field" style="grid-column:1 / span 2">
                    <label class="co-label" for="logradouro">Logradouro</label>
                    <input id="logradouro" name="logradouro" class="co-input" value="{{ old('logradouro') }}" maxlength="160">
                </div>

                <div class="co-field">
                    <label class="co-label" for="numero">Numero</label>
                    <input id="numero" name="numero" class="co-input" value="{{ old('numero') }}" maxlength="10">
                </div>

                <div class="co-field">
                    <label class="co-label" for="complemento">Complemento</label>
                    <input id="complemento" name="complemento" class="co-input" value="{{ old('complemento') }}" maxlength="60">
                </div>

                <div class="co-field">
                    <label class="co-label" for="bairro">Bairro</label>
                    <input id="bairro" name="bairro" class="co-input" value="{{ old('bairro') }}" maxlength="80">
                </div>

                <div class="co-field">
                    <label class="co-label" for="cidade">Cidade</label>
                    <input id="cidade" name="cidade" class="co-input" value="{{ old('cidade') }}" maxlength="80">
                </div>

                <div class="co-field">
                    <label class="co-label" for="codigo_municipio_ibge">Codigo IBGE</label>
                    <input id="codigo_municipio_ibge" name="codigo_municipio_ibge" class="co-input"
                           value="{{ old('codigo_municipio_ibge') }}" maxlength="7" placeholder="7 digitos">
                    <div class="co-hint">Preenchido automaticamente pelo CEP.</div>
                </div>
            </div>
        </div>

        {{-- ── 4. CERTIFICADO DIGITAL ──────────────────────────────────── --}}
        <div class="panel">
            <div class="co-section-header">
                <div class="co-section-icon">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                </div>
                <h3>Certificado Digital A1</h3>
                <span>Opcional — pode ser adicionado depois</span>
            </div>
            <div class="co-body">
                <div class="co-field co-full">
                    <label class="co-label">Arquivo do certificado (.pfx / .p12)</label>

                    <div id="cert-drop"
                         class="cert-dropzone"
                         onclick="document.getElementById('certificate_file').click()"
                         ondragover="event.preventDefault();this.classList.add('drag')"
                         ondragleave="this.classList.remove('drag')"
                         ondrop="handleCertDrop(event)">
                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin:0 auto 8px;display:block"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                        <div id="cert-label" style="font-size:14px;color:var(--muted)">
                            Arraste o arquivo ou <span style="color:var(--primary);font-weight:600">clique para selecionar</span>
                        </div>
                        <div style="font-size:12px;color:#cbd5e1;margin-top:4px">Maximo 5 MB</div>
                    </div>
                    <input id="certificate_file" name="certificate_file" type="file"
                           accept=".pfx,.p12" style="display:none"
                           onchange="showCertName(this)">
                    @error('certificate_file') <div class="error" style="margin-top:4px">{{ $message }}</div> @enderror
                </div>

                <div class="co-field">
                    <label class="co-label" for="certificate_password">Senha do certificado</label>
                    <div style="position:relative">
                        <input id="certificate_password" name="certificate_password" type="password"
                               class="co-input" maxlength="255" autocomplete="new-password"
                               placeholder="Obrigatoria se enviar o certificado"
                               style="padding-right:40px">
                        <button type="button" onclick="togglePwd('certificate_password')" tabindex="-1"
                                style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:0">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                        </button>
                    </div>
                    <div class="co-hint">Armazenada criptografada. Necessaria para uso do certificado.</div>
                    @error('certificate_password') <div class="error">{{ $message }}</div> @enderror
                </div>

                <div class="co-field" style="display:flex;align-items:center;padding-top:20px">
                    <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:10px 14px;font-size:13px;color:#92400e;line-height:1.5">
                        O certificado pode ser adicionado ou substituido a qualquer momento em
                        <strong>Empresas &rarr; Editar &rarr; Certificado</strong>.
                    </div>
                </div>
            </div>
        </div>

    </div>{{-- /grid --}}

    {{-- Sticky footer --}}
    <div class="sticky-actions">
        <div style="font-size:13px;color:var(--muted)">
            <span id="fields-hint">Preencha o CNPJ e clique em <strong>Buscar dados</strong> para auto-completar.</span>
        </div>
        <div style="display:flex;gap:10px">
            <a class="button" href="{{ route('companies.index') }}">Cancelar</a>
            <button class="button primary" type="submit" id="btn-submit">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Salvar empresa
            </button>
        </div>
    </div>

</form>
@endsection

@push('scripts')
<style>@keyframes spin { to { transform:rotate(360deg); } }</style>
<script>
var lastFetched = '';
var cnpjTimer   = null;

function cnpjDigits() { return (document.getElementById('cnpj').value || '').replace(/\D/g,''); }

function cnpjOnInput(el) {
    var d = el.value.replace(/\D/g,'').slice(0,14);
    var v = d;
    if (d.length > 12) v = d.slice(0,2)+'.'+d.slice(2,5)+'.'+d.slice(5,8)+'/'+d.slice(8,12)+'-'+d.slice(12);
    else if (d.length > 8) v = d.slice(0,2)+'.'+d.slice(2,5)+'.'+d.slice(5,8)+'/'+d.slice(8);
    else if (d.length > 5) v = d.slice(0,2)+'.'+d.slice(2,5)+'.'+d.slice(5);
    else if (d.length > 2) v = d.slice(0,2)+'.'+d.slice(2);
    el.value = v;
    if (d.length < 14) {
        document.getElementById('cnpj-status').textContent = '';
        lastFetched = '';
        clearTimeout(cnpjTimer);
    } else {
        // Busca automática ao completar 14 dígitos
        clearTimeout(cnpjTimer);
        cnpjTimer = setTimeout(lookupCnpj, 400);
    }
}

function setLoading(on) {
    document.getElementById('btn-cnpj').disabled = on;
    document.getElementById('ico-search').style.display = on ? 'none' : 'inline';
    document.getElementById('ico-spin').style.display   = on ? 'inline' : 'none';
    document.getElementById('btn-cnpj-label').textContent = on ? 'Consultando...' : 'Buscar dados';
}

function setStatus(msg, color) {
    var el = document.getElementById('cnpj-status');
    el.textContent = msg; el.style.color = color || '#64748b';
}

function fillField(id, val) {
    var el = document.getElementById(id);
    if (el && val) { el.value = val; el.classList.add('filled'); return true; }
    return false;
}

async function lookupCnpj() {
    var digits = cnpjDigits();
    if (digits.length !== 14) { setStatus('Digite um CNPJ valido (14 digitos).', '#dc2626'); return; }
    if (digits === lastFetched) { setStatus('Dados ja carregados.', '#16a34a'); return; }
    lastFetched = digits;
    setLoading(true);
    setStatus('Consultando Receita Federal...');
    try {
        var res = await fetch('/cnpj/' + digits);
        var d = await res.json();

        if (!res.ok) {
            setStatus(d.error || 'CNPJ não encontrado na Receita Federal.', '#dc2626');
            setLoading(false); lastFetched = ''; return;
        }

        var ok = [];
        if (fillField('name',                  d.razao_social))          ok.push('Razão social');
        if (fillField('trade_name',            d.nome_fantasia))         ok.push('Nome fantasia');
        if (fillField('email_fiscal',          d.email))                 ok.push('E-mail');
        if (fillField('telefone',              d.ddd_telefone_1))        ok.push('Telefone');

        var sigla = d.uf ?? '';
        if (sigla) { var ufEl = document.getElementById('uf_end'); if (ufEl) { ufEl.value = sigla; ok.push('UF'); } }

        var cep = (d.cep ?? '').replace(/\D/g,'');
        if (cep.length === 8) { if (fillField('cep', cep.slice(0,5)+'-'+cep.slice(5))) { ok.push('CEP'); lookupCep(); } }
        if (fillField('logradouro',  d.logradouro))  ok.push('Logradouro');
        if (fillField('numero',      d.numero))      ok.push('Número');
        if (fillField('complemento', d.complemento)) ok.push('Complemento');
        if (fillField('bairro',      d.bairro))      ok.push('Bairro');
        if (fillField('cidade',      d.municipio))   ok.push('Cidade');

        if (ok.length) {
            setStatus('Preenchido: ' + ok.join(', ') + '.', '#16a34a');
            var hint = document.getElementById('fields-hint');
            if (hint) hint.innerHTML = '<span style="color:#16a34a">✓ Dados preenchidos pela Receita Federal. Revise e salve.</span>';
        } else {
            setStatus('CNPJ encontrado mas sem dados complementares.', '#d97706');
        }
    } catch (e) {
        setStatus('Erro ao consultar. Preencha manualmente.', '#dc2626');
        lastFetched = '';
    }
    setLoading(false);
}

function fmtCep(el) {
    var v = el.value.replace(/\D/g,'').slice(0,8);
    el.value = v.length > 5 ? v.slice(0,5)+'-'+v.slice(5) : v;
}

async function lookupCep() {
    var cep = (document.getElementById('cep').value || '').replace(/\D/g,'');
    var st  = document.getElementById('cep-status');
    if (cep.length !== 8) return;
    st.textContent = 'Buscando...'; st.style.color = '#64748b';
    try {
        var res = await fetch('https://viacep.com.br/ws/' + cep + '/json/');
        var d   = await res.json();
        if (d.erro) { st.textContent = 'CEP nao encontrado.'; st.style.color='#dc2626'; return; }
        fillField('logradouro', d.logradouro);
        fillField('bairro',     d.bairro);
        fillField('cidade',     d.localidade);
        fillField('codigo_municipio_ibge', d.ibge);
        var ufEl = document.getElementById('uf_end');
        if (ufEl && d.uf) ufEl.value = d.uf;
        st.textContent = 'Endereco preenchido.'; st.style.color = '#16a34a';
    } catch (e) { st.textContent = 'Erro ao buscar CEP.'; }
}

function showCertName(input) {
    var file  = input.files[0];
    if (!file) return;
    var drop  = document.getElementById('cert-drop');
    var label = document.getElementById('cert-label');
    label.innerHTML = '<strong style="color:var(--text)">' + file.name + '</strong>'
                    + ' <span style="color:var(--muted);font-size:12px">('+(file.size/1024).toFixed(0)+' KB)</span>';
    drop.style.borderColor = 'var(--primary)';
    drop.style.background  = 'var(--primary-light)';
}

function handleCertDrop(event) {
    event.preventDefault();
    document.getElementById('cert-drop').classList.remove('drag');
    var file = event.dataTransfer.files[0];
    if (!file) return;
    var ext = file.name.split('.').pop().toLowerCase();
    if (!['pfx','p12'].includes(ext)) { alert('Apenas .pfx ou .p12'); return; }
    var input = document.getElementById('certificate_file');
    var dt    = new DataTransfer();
    dt.items.add(file);
    input.files = dt.files;
    showCertName(input);
}

function togglePwd(id) {
    var el = document.getElementById(id);
    el.type = el.type === 'password' ? 'text' : 'password';
}

document.getElementById('company-form').addEventListener('submit', function() {
    var btn = document.getElementById('btn-submit');
    btn.disabled = true;
    btn.textContent = 'Salvando...';
});
</script>
@endpush