@extends('layouts.app')

@section('title', $customer->exists ? 'Editar Cliente — NFS-e' : 'Novo Cliente — NFS-e')
@section('page_title', $customer->exists ? 'Editar cliente' : 'Novo cliente NFS-e')
@section('page_subtitle', 'Tomador de servico para emissao de notas fiscais.')
@section('page_actions')
    <a class="button" href="{{ route('nfse.customers.index') }}">Voltar</a>
@endsection

@push('styles')
<style>
    .fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .fc-full { grid-column: 1 / -1; }
    .fc-field { display: grid; gap: 5px; }
    .fc-label { font-size: 12.5px; font-weight: 600; color: #374151; display:flex; align-items:center; gap:4px; }
    .fc-req   { color: var(--danger); }
    .fc-input {
        width: 100%; min-height: 40px; border: 1px solid var(--border);
        border-radius: 7px; padding: 8px 12px; font: inherit;
        font-size: 13.5px; background: #fff; color: var(--text);
        transition: border-color .12s, box-shadow .12s;
    }
    .fc-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
    .fc-input.auto-filled { border-color: #22c55e; background: #f0fdf4; }
    .fc-hint  { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
    .fc-error { font-size: 12px; color: var(--danger); margin-top: 2px; }

    .section-bar {
        display: flex; align-items: center; gap: 10px;
        padding: 13px 20px; background: var(--surface-2);
        border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .section-bar:first-of-type { border-top: none; }
    .section-icon {
        width: 28px; height: 28px; border-radius: 6px;
        background: var(--primary-light); border: 1px solid var(--primary-muted);
        display: grid; place-items: center; flex-shrink: 0;
    }
    .section-bar h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
    .section-bar span { font-size: 12px; color: var(--muted); margin-left: auto; }

    .fc-body { padding: 20px; }

    .doc-row { display: flex; gap: 8px; align-items: flex-start; }
    .doc-row .fc-input { flex: 1; }
    .btn-lookup {
        min-height: 40px; padding: 0 16px;
        background: var(--primary); color: #fff;
        border: none; border-radius: 7px; font: inherit;
        font-size: 13px; font-weight: 600; cursor: pointer;
        white-space: nowrap; flex-shrink: 0;
        display: flex; align-items: center; gap: 6px;
        transition: background .12s;
    }
    .btn-lookup:hover { background: var(--primary-dark); }
    .btn-lookup:disabled { background: #93c5fd; cursor: not-allowed; }

    .tipo-pills { display: flex; gap: 8px; }
    .tipo-pill {
        flex: 1; padding: 9px 12px; border: 2px solid var(--border);
        border-radius: 7px; cursor: pointer; text-align: center;
        font-size: 13px; font-weight: 600; color: var(--muted);
        transition: border-color .12s, color .12s, background .12s;
        background: #fff;
    }
    .tipo-pill.selected {
        border-color: var(--primary); color: var(--primary);
        background: var(--primary-light);
    }
    .tipo-pill span { display: block; font-size: 11px; font-weight: 400; margin-top: 2px; color: var(--muted); }

    .cep-row { display: flex; gap: 8px; }
    .cep-row .fc-input { flex: 1; }
    .btn-cep {
        min-height: 40px; padding: 0 14px;
        background: var(--surface-2); color: var(--text);
        border: 1px solid var(--border); border-radius: 7px;
        font: inherit; font-size: 13px; font-weight: 600;
        cursor: pointer; white-space: nowrap;
        transition: background .12s;
    }
    .btn-cep:hover { background: #e2e8f0; }

    .status-line {
        font-size: 12px; margin-top: 4px; min-height: 16px;
        display: flex; align-items: center; gap: 5px;
    }
    .status-line.ok   { color: #16a34a; }
    .status-line.err  { color: var(--danger); }
    .status-line.load { color: var(--muted); }

    .form-footer {
        padding: 16px 20px;
        background: var(--surface-2); border-top: 1px solid var(--border);
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }

    @keyframes dot-spin { to { transform: rotate(360deg); } }
    .spin { animation: dot-spin .7s linear infinite; }

    @media (max-width: 600px) {
        .fc-grid { grid-template-columns: 1fr; }
        .fc-full { grid-column: 1; }
        .tipo-pills { flex-direction: column; }
    }
</style>
@endpush

@section('content')

@if ($errors->any())
<div class="notice error">
    <strong>Verifique os campos:</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="{{ $customer->exists ? route('nfse.customers.update', $customer) : route('nfse.customers.store') }}"
      id="customer-form"
      style="max-width:820px">
    @csrf
    @if ($customer->exists) @method('PUT') @endif

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

        {{-- ── IDENTIFICAÇÃO ─────────────────────────────────────────── --}}
        <div class="panel" style="overflow:visible">

            <div class="section-bar" style="border-top:none;border-radius:var(--radius) var(--radius) 0 0">
                <div class="section-icon">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/></svg>
                </div>
                <h3>Identificacao</h3>
                <span>Busca automatica na Receita Federal para pessoa juridica</span>
            </div>

            <div class="fc-body">
                <div class="fc-grid">

                    {{-- Tipo de pessoa --}}
                    <div class="fc-field fc-full">
                        <label class="fc-label">Tipo de pessoa <span class="fc-req">*</span></label>
                        <div class="tipo-pills">
                            <label class="tipo-pill {{ old('tipo_pessoa', $customer->tipo_pessoa ?? 'juridica') === 'juridica' ? 'selected' : '' }}"
                                   id="pill-juridica" onclick="setTipo('juridica')">
                                <input type="radio" name="tipo_pessoa" value="juridica" style="display:none"
                                       @checked(old('tipo_pessoa', $customer->tipo_pessoa ?? 'juridica') === 'juridica')>
                                Pessoa Juridica
                                <span>CNPJ — empresas, MEI</span>
                            </label>
                            <label class="tipo-pill {{ old('tipo_pessoa', $customer->tipo_pessoa) === 'fisica' ? 'selected' : '' }}"
                                   id="pill-fisica" onclick="setTipo('fisica')">
                                <input type="radio" name="tipo_pessoa" value="fisica" style="display:none"
                                       @checked(old('tipo_pessoa', $customer->tipo_pessoa) === 'fisica')>
                                Pessoa Fisica
                                <span>CPF — individuos</span>
                            </label>
                        </div>
                    </div>

                    {{-- CPF / CNPJ --}}
                    <div class="fc-field fc-full">
                        <label class="fc-label" for="cpf_cnpj">
                            <span id="doc-label-text">CNPJ</span>
                            <span class="fc-req">*</span>
                        </label>
                        <div class="doc-row">
                            <input id="cpf_cnpj" name="cpf_cnpj" class="fc-input"
                                   value="{{ old('cpf_cnpj', $customer->cpf_cnpj) }}"
                                   maxlength="14" inputmode="numeric" required
                                   placeholder="Somente numeros"
                                   oninput="docOnInput(this)">
                            <button type="button" class="btn-lookup" id="btn-lookup" onclick="lookupDoc()">
                                <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" class="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"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
                                <span id="btn-lookup-label">Buscar dados</span>
                            </button>
                        </div>
                        <div id="doc-status" class="status-line"></div>
                        @error('cpf_cnpj') <div class="fc-error">{{ $message }}</div> @enderror
                    </div>

                    {{-- Nome --}}
                    <div class="fc-field fc-full">
                        <label class="fc-label" for="nome">Nome / Razao social <span class="fc-req">*</span></label>
                        <input id="nome" name="nome" class="fc-input"
                               value="{{ old('nome', $customer->nome) }}" maxlength="160" required
                               placeholder="Nome completo ou razao social">
                        @error('nome') <div class="fc-error">{{ $message }}</div> @enderror
                    </div>

                    {{-- Inscricao municipal --}}
                    <div class="fc-field">
                        <label class="fc-label" for="inscricao_municipal">Inscricao municipal</label>
                        <input id="inscricao_municipal" name="inscricao_municipal" class="fc-input"
                               value="{{ old('inscricao_municipal', $customer->inscricao_municipal) }}" maxlength="20"
                               placeholder="Numero da IM">
                        <div class="fc-hint">Necessaria para emissao de NFS-e no mesmo municipio.</div>
                    </div>

                    {{-- Status (somente edição) --}}
                    @if ($customer->exists)
                    <div class="fc-field" style="display:flex;align-items:center;gap:10px;padding-top:20px">
                        <input type="checkbox" id="is_active" name="is_active" value="1"
                               @checked(old('is_active', $customer->is_active ?? true))
                               style="width:16px;min-height:0;flex-shrink:0">
                        <label for="is_active" style="margin:0;font-size:13.5px;font-weight:400;cursor:pointer;color:var(--text)">
                            Cliente ativo
                        </label>
                    </div>
                    @endif

                </div>
            </div>
        </div>

        {{-- ── CONTATO ────────────────────────────────────────────────── --}}
        <div class="panel">

            <div class="section-bar">
                <div class="section-icon">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.78a16 16 0 0 0 6 6l1.27-.85a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7a2 2 0 0 1 1.72 2.02z"/></svg>
                </div>
                <h3>Contato</h3>
                <span>E-mail e telefone do tomador</span>
            </div>

            <div class="fc-body">
                <div class="fc-grid">
                    <div class="fc-field">
                        <label class="fc-label" for="email">E-mail <span class="fc-req">*</span></label>
                        <input id="email" name="email" type="email" class="fc-input"
                               value="{{ old('email', $customer->email) }}" maxlength="160" required
                               placeholder="cliente@empresa.com.br">
                        <div class="fc-hint">Usado para envio da NFS-e emitida.</div>
                        @error('email') <div class="fc-error">{{ $message }}</div> @enderror
                    </div>

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

        {{-- ── ENDEREÇO ────────────────────────────────────────────────── --}}
        <div class="panel">

            <div class="section-bar">
                <div class="section-icon">
                    <svg width="13" height="13" 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 preenchimento automatico</span>
            </div>

            <div class="fc-body">
                <div class="fc-grid">

                    {{-- CEP --}}
                    <div class="fc-field">
                        <label class="fc-label" for="cep">CEP</label>
                        <div class="cep-row">
                            <input id="cep" name="cep" class="fc-input"
                                   value="{{ old('cep', $customer->cep) }}" maxlength="9"
                                   inputmode="numeric" placeholder="00000-000"
                                   oninput="fmtCep(this)" onblur="lookupCep()">
                            <button type="button" class="btn-cep" onclick="lookupCep()">Buscar</button>
                        </div>
                        <div id="cep-status" class="status-line"></div>
                    </div>

                    {{-- UF --}}
                    <div class="fc-field">
                        <label class="fc-label" for="uf">UF</label>
                        <select id="uf" name="uf" class="fc-input">
                            <option value="">—</option>
                            @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', $customer->uf) === $s)>{{ $s }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Logradouro --}}
                    <div class="fc-field" style="grid-column:1/-1">
                        <label class="fc-label" for="logradouro">Logradouro</label>
                        <input id="logradouro" name="logradouro" class="fc-input"
                               value="{{ old('logradouro', $customer->logradouro) }}" maxlength="160"
                               placeholder="Rua, Avenida, Travessa...">
                    </div>

                    <div class="fc-field">
                        <label class="fc-label" for="numero">Numero</label>
                        <input id="numero" name="numero" class="fc-input"
                               value="{{ old('numero', $customer->numero) }}" maxlength="10" placeholder="Ex: 123">
                    </div>

                    <div class="fc-field">
                        <label class="fc-label" for="complemento">Complemento</label>
                        <input id="complemento" name="complemento" class="fc-input"
                               value="{{ old('complemento', $customer->complemento) }}" maxlength="60"
                               placeholder="Sala, Apto, Bloco...">
                    </div>

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

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

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

                </div>
            </div>
        </div>

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

    {{-- Footer sticky --}}
    <div class="form-footer" style="margin-top:18px;border-radius:var(--radius);border:1px solid var(--border)">
        <div style="font-size:13px;color:var(--muted)">
            @if (! $customer->exists)
                Preencha o CPF/CNPJ e clique em <strong>Buscar dados</strong> para auto-completar.
            @else
                Editando <strong>{{ $customer->nome }}</strong>
            @endif
        </div>
        <div style="display:flex;gap:10px">
            <a class="button" href="{{ route('nfse.customers.index') }}">Cancelar</a>
            <button class="button primary" type="submit" id="btn-submit">
                {{ $customer->exists ? 'Salvar alteracoes' : 'Cadastrar cliente' }}
            </button>
        </div>
    </div>

</form>
@endsection

@push('scripts')
<script>
// ── Tipo de pessoa ────────────────────────────────────────────────────
function setTipo(tipo) {
    ['juridica','fisica'].forEach(function(t) {
        var pill = document.getElementById('pill-'+t);
        var inp  = pill.querySelector('input[type=radio]');
        if (t === tipo) { pill.classList.add('selected'); inp.checked = true; }
        else            { pill.classList.remove('selected'); inp.checked = false; }
    });
    document.getElementById('doc-label-text').textContent = tipo === 'juridica' ? 'CNPJ' : 'CPF';
    var btn = document.getElementById('btn-lookup');
    btn.style.display = tipo === 'juridica' ? 'flex' : 'none';
    document.getElementById('cpf_cnpj').value = '';
    document.getElementById('doc-status').textContent = '';
}
// Inicializa
(function(){ setTipo(document.querySelector('input[name=tipo_pessoa]:checked')?.value || 'juridica'); })();

// ── Formatação do documento ───────────────────────────────────────────
function docOnInput(el) {
    el.value = el.value.replace(/\D/g,'').slice(0,14);
}

// ── Lookup CNPJ ───────────────────────────────────────────────────────
function setLookupLoading(on) {
    document.getElementById('btn-lookup').disabled     = on;
    document.getElementById('ico-search').style.display = on ? 'none'  : 'inline';
    document.getElementById('ico-spin').style.display   = on ? 'inline' : 'none';
    document.getElementById('btn-lookup-label').textContent = on ? 'Consultando...' : 'Buscar dados';
}

function setDocStatus(msg, cls) {
    var el = document.getElementById('doc-status');
    el.textContent  = msg;
    el.className    = 'status-line ' + (cls || '');
}

function autoFill(id, val) {
    var el = document.getElementById(id);
    if (el && val) { el.value = val; el.classList.add('auto-filled'); }
}

async function lookupDoc() {
    var val  = document.getElementById('cpf_cnpj').value.replace(/\D/g,'');
    var tipo = document.querySelector('input[name=tipo_pessoa]:checked')?.value;
    if (tipo !== 'juridica' || val.length !== 14) {
        setDocStatus('Digite um CNPJ valido (14 digitos).', 'err'); return;
    }
    setLookupLoading(true);
    setDocStatus('Consultando Receita Federal...', 'load');
    try {
        var res = await fetch('https://publica.cnpj.ws/cnpj/' + val);
        if (!res.ok) { setDocStatus('CNPJ nao encontrado na Receita Federal.', 'err'); setLookupLoading(false); return; }
        var d   = await res.json();
        var est = d.estabelecimento ?? {};
        var ok  = [];

        function f(id, v, lbl) { if (v) { autoFill(id, v); ok.push(lbl); } }

        f('nome',       d.razao_social,             'Razao social');
        f('email',      est.email,                   'E-mail');
        if (est.ddd1 && est.telefone1) f('telefone', '('+est.ddd1+') '+est.telefone1, 'Telefone');
        f('logradouro', est.logradouro,              'Logradouro');
        f('numero',     est.numero,                  'Numero');
        f('bairro',     est.bairro,                  'Bairro');
        f('cidade',     est.cidade?.nome,            'Cidade');
        if (est.estado?.sigla) { document.getElementById('uf').value = est.estado.sigla; ok.push('UF'); }
        var cep = (est.cep ?? '').replace(/\D/g,'');
        if (cep.length === 8) { autoFill('cep', cep.slice(0,5)+'-'+cep.slice(5)); ok.push('CEP'); }
        if (est.cidade?.ibge_id) { autoFill('codigo_municipio_ibge', String(est.cidade.ibge_id)); ok.push('IBGE'); }

        setDocStatus(ok.length ? '✓ Preenchido: '+ok.join(', ')+'.' : 'CNPJ encontrado sem dados adicionais.', ok.length ? 'ok' : 'load');
    } catch (e) {
        setDocStatus('Erro ao consultar. Preencha manualmente.', 'err');
    }
    setLookupLoading(false);
}

// ── CEP ───────────────────────────────────────────────────────────────
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.className = 'status-line load';
    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.className='status-line err'; return; }
        autoFill('logradouro', d.logradouro);
        autoFill('bairro',     d.bairro);
        autoFill('cidade',     d.localidade);
        autoFill('codigo_municipio_ibge', d.ibge);
        if (d.uf) document.getElementById('uf').value = d.uf;
        st.textContent = '✓ Endereco preenchido.'; st.className = 'status-line ok';
    } catch(e) { st.textContent='Erro ao buscar CEP.'; st.className='status-line err'; }
}

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