@extends('partials.layout')
@section('titulo', 'Cadastros')
@section('conteudo')
<h2 class="page">Cadastros</h2>

@if($me->ehGestao())
<details class="secao-cad">
    <summary>Categorias <span class="cont">{{ $categorias->count() }}</span></summary>
<div class="card">
    <div class="muted" style="font-size:12px;margin-bottom:10px">Usadas para classificar fornecedores / despesas.</div>
    <form method="post" action="{{ route('categoria.store') }}" style="display:flex;gap:8px;align-items:end;flex-wrap:wrap">@csrf
        <div style="flex:1;min-width:220px"><label>Nova categoria</label><input name="nome" placeholder="Ex.: Alimentação, Frete, Segurança…" required></div>
        <button class="btn pri">Adicionar</button>
    </form>
    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px">
        @forelse($categorias as $cat)
            <span class="pill aberto" style="display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:12.5px">
                {{ $cat->nome }}
                <form method="post" action="{{ route('categoria.destroy',$cat) }}" onsubmit="return confirm('Remover esta categoria?')" style="display:inline;margin:0">@csrf @method('DELETE')<button class="btn danger sm" style="padding:0 7px;line-height:1.5" title="Remover">×</button></form>
            </span>
        @empty
            <span class="muted">Nenhuma categoria ainda.</span>
        @endforelse
    </div>
</div>
</details>
@endif

@php $fe = $fornEdit; @endphp
<details class="secao-cad">
    <summary>Fornecedores <span class="cont">{{ $fornecedores->count() }}</span></summary>
<div class="card" id="form-fornecedor">
    <div style="font-weight:800;margin-bottom:10px">{{ $fe ? 'Editar fornecedor' : 'Novo fornecedor' }}</div>
    <form method="post" action="{{ $fe ? route('fornecedor.update',$fe) : route('fornecedor.store') }}">@csrf
        @if($fe) @method('PUT') @endif
        <div class="grid3">
            <div>
                <label>CNPJ / CPF *</label>
                <div style="display:flex;gap:6px">
                    <input name="documento" id="f_cnpj" class="doc-input" placeholder="CNPJ ou CPF" required value="{{ old('documento', $fe?->cnpj ?: $fe?->cpf) }}">
                    <button type="button" class="btn steel sm" style="white-space:nowrap" onclick="buscarCNPJ('f')">Buscar</button>
                </div>
                <small id="f_cnpj_st" class="muted" style="font-size:11px">CNPJ puxa os dados no Buscar. CPF é só digitar.</small>
            </div>
            <div><label>Categoria *</label><select name="categoria" required><option value="">Selecione…</option>@foreach($categorias as $c)<option value="{{ $c->nome }}" @selected(old('categoria',$fe?->categoria)==$c->nome)>{{ $c->nome }}</option>@endforeach</select></div>
            <div><label>Razão / nome *</label><input name="razao_nome" id="f_razao" required value="{{ old('razao_nome',$fe?->razao_nome) }}"></div>
            <div><label>Nome fantasia</label><input name="nome_fantasia" id="f_fantasia" value="{{ old('nome_fantasia',$fe?->nome_fantasia) }}"></div>
            <div><label>Telefone</label><input name="telefone" id="f_telefone" value="{{ old('telefone',$fe?->telefone) }}"></div>
            <div><label>E-mail</label><input name="email" id="f_email" value="{{ old('email',$fe?->email) }}"></div>
            <div><label>CEP</label><input name="cep" id="f_cep" placeholder="só os números" onblur="buscarCEP('f')" value="{{ old('cep',$fe?->cep) }}"><small id="f_cep_st" class="muted" style="font-size:11px"></small></div>
            <div><label>Logradouro (rua)</label><input name="logradouro" id="f_logradouro" value="{{ old('logradouro',$fe?->logradouro) }}"></div>
            <div><label>Número</label><input name="numero" id="f_numero" value="{{ old('numero',$fe?->numero) }}"></div>
            <div><label>Bairro</label><input name="bairro" id="f_bairro" value="{{ old('bairro',$fe?->bairro) }}"></div>
            <div><label>Cidade</label><input name="cidade" id="f_cidade" value="{{ old('cidade',$fe?->cidade) }}"></div>
            <div><label>UF</label><input name="estado" id="f_estado" maxlength="2" style="text-transform:uppercase" value="{{ old('estado',$fe?->estado) }}"></div>
        </div>
        <div style="margin-top:14px;font-weight:800;font-size:13px;color:var(--steel);border-top:1px solid var(--line);padding-top:12px">Dados bancários (para pagamento)</div>
        <div class="grid3" style="margin-top:8px">
            <div><label>Nome do titular</label><input name="banco_titular" value="{{ old('banco_titular',$fe?->banco_titular) }}"></div>
            <div><label>CNPJ / CPF do titular</label><input name="banco_documento" value="{{ old('banco_documento',$fe?->banco_documento) }}"></div>
            <div><label>Banco</label><input name="banco" value="{{ old('banco',$fe?->banco) }}"></div>
            <div><label>Agência</label><input name="agencia" value="{{ old('agencia',$fe?->agencia) }}"></div>
            <div><label>Conta</label><input name="conta" value="{{ old('conta',$fe?->conta) }}"></div>
            <div><label>Chave PIX</label><input name="chave_pix" value="{{ old('chave_pix',$fe?->chave_pix) }}"></div>
        </div>
        <div style="margin-top:10px"><label>Observação / descrição</label><textarea name="observacao" rows="2" placeholder="Comentário livre sobre este fornecedor…">{{ old('observacao',$fe?->observacao) }}</textarea></div>
        <div style="margin-top:12px;display:flex;align-items:center;gap:12px">
            <button class="btn pri">{{ $fe ? 'Salvar alterações' : 'Cadastrar fornecedor' }}</button>
            @if($fe)<a href="{{ route('cadastros') }}" class="btn ghost">Cancelar</a>@else<span class="muted" style="font-size:12px">Dica: digite o CNPJ e clique em <b>Buscar</b> — os dados vêm preenchidos.</span>@endif
        </div>
    </form>
</div>

<div class="card" style="padding:0;overflow-x:auto">
    <div style="padding:12px 14px;font-weight:800">Fornecedores ({{ $fornecedores->count() }})</div>
    <table><thead><tr><th>Código</th><th>Nome</th><th>Categoria</th><th>Cidade</th><th></th></tr></thead><tbody>
    @forelse($fornecedores as $f)
        <tr>
            <td style="font-weight:800;color:var(--steel)">{{ $f->codigoFormatado() }}</td><td style="font-weight:700">{{ $f->nomeExibicao() }}</td><td>{{ $f->categoria }}</td><td class="muted">{{ $f->cidade }}</td>
            <td style="white-space:nowrap;text-align:right">
                @if($me->podeLancar())<a href="{{ route('cadastros') }}?editar=fornecedor&id={{ $f->id }}#form-fornecedor" class="btn ghost sm">Editar</a>@endif
                @if($me->ehGestao())<form method="post" action="{{ route('fornecedor.destroy',$f) }}" onsubmit="return confirm('Remover?')" style="display:inline">@csrf @method('DELETE')<button class="btn danger sm">x</button></form>@endif
            </td>
        </tr>
    @empty<tr><td colspan="5" class="muted" style="padding:14px">Nenhum fornecedor.</td></tr>@endforelse
    </tbody></table>
</div>

</details>

@php $ce = $cliEdit; @endphp
<details class="secao-cad">
    <summary>Clientes <span class="cont">{{ $clientes->count() }}</span></summary>
<div class="card" id="form-cliente">
    <div style="font-weight:800;margin-bottom:10px">{{ $ce ? 'Editar cliente' : 'Novo cliente' }}</div>
    <form method="post" action="{{ $ce ? route('cliente.update',$ce) : route('cliente.store') }}">@csrf
        @if($ce) @method('PUT') @endif
        <div class="grid3">
            <div>
                <label>CNPJ / CPF *</label>
                <div style="display:flex;gap:6px">
                    <input name="documento" id="c_cnpj" class="doc-input" placeholder="CNPJ ou CPF" required value="{{ old('documento', $ce?->cnpj ?: $ce?->cpf) }}">
                    <button type="button" class="btn steel sm" style="white-space:nowrap" onclick="buscarCNPJ('c')">Buscar</button>
                </div>
                <small id="c_cnpj_st" class="muted" style="font-size:11px">CNPJ puxa os dados no Buscar. CPF é só digitar.</small>
            </div>
            <div><label>Razão / nome *</label><input name="razao_nome" id="c_razao" required value="{{ old('razao_nome',$ce?->razao_nome) }}"></div>
            <div><label>Nome fantasia</label><input name="nome_fantasia" id="c_fantasia" value="{{ old('nome_fantasia',$ce?->nome_fantasia) }}"></div>
            <div><label>Telefone</label><input name="telefone" id="c_telefone" value="{{ old('telefone',$ce?->telefone) }}"></div>
            <div><label>CEP</label><input name="cep" id="c_cep" placeholder="só os números" onblur="buscarCEP('c')" value="{{ old('cep',$ce?->cep) }}"><small id="c_cep_st" class="muted" style="font-size:11px"></small></div>
            <div><label>Logradouro (rua)</label><input name="logradouro" id="c_logradouro" value="{{ old('logradouro',$ce?->logradouro) }}"></div>
            <div><label>Número</label><input name="numero" id="c_numero" value="{{ old('numero',$ce?->numero) }}"></div>
            <div><label>Bairro</label><input name="bairro" id="c_bairro" value="{{ old('bairro',$ce?->bairro) }}"></div>
            <div><label>Cidade</label><input name="cidade" id="c_cidade" value="{{ old('cidade',$ce?->cidade) }}"></div>
            <div><label>UF</label><input name="estado" id="c_estado" maxlength="2" style="text-transform:uppercase" value="{{ old('estado',$ce?->estado) }}"></div>
        </div>
        <div style="margin-top:10px"><label>Observação / descrição</label><textarea name="observacao" rows="2" placeholder="Comentário livre sobre este cliente…">{{ old('observacao',$ce?->observacao) }}</textarea></div>
        <div style="margin-top:12px;display:flex;gap:10px">
            <button class="btn pri">{{ $ce ? 'Salvar alterações' : 'Cadastrar cliente' }}</button>
            @if($ce)<a href="{{ route('cadastros') }}" class="btn ghost">Cancelar</a>@endif
        </div>
    </form>
</div>

<div class="card" style="padding:0;overflow-x:auto">
    <div style="padding:12px 14px;font-weight:800">Clientes ({{ $clientes->count() }})</div>
    <table><thead><tr><th>Código</th><th>Nome</th><th>Cidade</th><th></th></tr></thead><tbody>
    @forelse($clientes as $c)
        <tr>
            <td style="font-weight:800;color:var(--steel)">{{ $c->codigoFormatado() }}</td><td style="font-weight:700">{{ $c->nomeExibicao() }}</td><td class="muted">{{ $c->cidade }}</td>
            <td style="white-space:nowrap;text-align:right">
                @if($me->podeLancar())<a href="{{ route('cadastros') }}?editar=cliente&id={{ $c->id }}#form-cliente" class="btn ghost sm">Editar</a>@endif
                @if($me->ehGestao())<form method="post" action="{{ route('cliente.destroy',$c) }}" onsubmit="return confirm('Remover?')" style="display:inline">@csrf @method('DELETE')<button class="btn danger sm">x</button></form>@endif
            </td>
        </tr>
    @empty<tr><td colspan="4" class="muted" style="padding:14px">Nenhum cliente.</td></tr>@endforelse
    </tbody></table>
</div>

</details>

@if($me->ehGestao())
<details class="secao-cad">
    <summary>Equipamentos <span class="cont">{{ $equipamentos->count() }}</span></summary>
@php $eqe = $eqEdit; @endphp
<div class="card" id="form-equipamento">
    <div style="font-weight:800;margin-bottom:10px">{{ $eqe ? 'Editar equipamento' : 'Novo equipamento' }}</div>
    <form method="post" action="{{ $eqe ? route('equipamento.update',$eqe) : route('equipamento.store') }}">@csrf
        @if($eqe) @method('PUT') @endif
        <div class="grid3">
            <div><label>Nome *</label><input name="nome" required value="{{ old('nome',$eqe?->nome) }}"></div>
            <div><label>Tipo</label><input name="tipo" value="{{ old('tipo',$eqe?->tipo) }}"></div>
            <div><label>Patrimônio / placa</label><input name="patrimonio_placa" value="{{ old('patrimonio_placa',$eqe?->patrimonio_placa) }}"></div>
        </div>
        <div style="margin-top:10px"><label>Observação / descrição</label><textarea name="obs" rows="2" placeholder="Comentário livre sobre este equipamento…">{{ old('obs',$eqe?->obs) }}</textarea></div>
        <div style="margin-top:12px;display:flex;gap:10px">
            <button class="btn pri">{{ $eqe ? 'Salvar alterações' : 'Cadastrar equipamento' }}</button>
            @if($eqe)<a href="{{ route('cadastros') }}" class="btn ghost">Cancelar</a>@endif
        </div>
    </form>
</div>
<div class="card" style="padding:0;overflow-x:auto">
    <div style="padding:12px 14px;font-weight:800">Equipamentos ({{ $equipamentos->count() }})</div>
    <table><thead><tr><th>Nome</th><th>Tipo</th><th>Patrimônio/placa</th><th></th></tr></thead><tbody>
    @forelse($equipamentos as $eq)
        <tr>
            <td style="font-weight:700">{{ $eq->nome }}</td><td class="muted">{{ $eq->tipo }}</td><td class="muted">{{ $eq->patrimonio_placa }}</td>
            <td style="white-space:nowrap;text-align:right">
                <a href="{{ route('cadastros') }}?editar=equipamento&id={{ $eq->id }}#form-equipamento" class="btn ghost sm">Editar</a>
                <form method="post" action="{{ route('equipamento.destroy',$eq) }}" onsubmit="return confirm('Remover?')" style="display:inline">@csrf @method('DELETE')<button class="btn danger sm">x</button></form>
            </td>
        </tr>
    @empty<tr><td colspan="4" class="muted" style="padding:14px">Nenhum equipamento.</td></tr>@endforelse
    </tbody></table>
</div>
</details>
@endif

<script>
function fmtDoc(v){
    var d = (v||'').replace(/\D/g,'').slice(0,14);
    if(d.length <= 11){
        return d.replace(/(\d{3})(\d)/,'$1.$2').replace(/(\d{3})(\d)/,'$1.$2').replace(/(\d{3})(\d{1,2})$/,'$1-$2');
    }
    return d.replace(/(\d{2})(\d)/,'$1.$2').replace(/(\d{3})(\d)/,'$1.$2').replace(/(\d{3})(\d)/,'$1/$2').replace(/(\d{4})(\d)/,'$1-$2');
}
document.querySelectorAll('.doc-input').forEach(function(el){
    if(el.value) el.value = fmtDoc(el.value);
    el.addEventListener('input', function(){ el.value = fmtDoc(el.value); });
});
function setVal(id, val){ var e = document.getElementById(id); if (e && val) e.value = String(val); }

async function buscarCNPJ(px){
    var el = document.getElementById(px+'_cnpj');
    if(!el) return;
    var cnpj = (el.value||'').replace(/\D/g,'');
    var st = document.getElementById(px+'_cnpj_st');
    if(cnpj.length !== 14){ if(st){ st.style.color=''; st.textContent='Digite os 14 numeros do CNPJ.'; } return; }
    if(st){ st.style.color=''; st.textContent='Buscando...'; }
    try{
        var r = await fetch('https://brasilapi.com.br/api/cnpj/v1/'+cnpj);
        if(!r.ok) throw 0;
        var d = await r.json();
        setVal(px+'_razao', d.razao_social);
        setVal(px+'_fantasia', d.nome_fantasia);
        setVal(px+'_cep', d.cep);
        setVal(px+'_logradouro', d.logradouro);
        setVal(px+'_numero', d.numero);
        setVal(px+'_bairro', d.bairro);
        setVal(px+'_cidade', d.municipio);
        setVal(px+'_estado', d.uf);
        var em=document.getElementById(px+'_email'); if(em && !em.value) setVal(px+'_email', d.email);
        var te=document.getElementById(px+'_telefone'); if(te && !te.value) setVal(px+'_telefone', d.ddd_telefone_1);
        if(st){ st.style.color='var(--ok)'; st.textContent='OK - dados preenchidos.'; }
    }catch(e){ if(st){ st.style.color='var(--alerta)'; st.textContent='Nao encontrei esse CNPJ (confira os numeros).'; } }
}

async function buscarCEP(px){
    var el = document.getElementById(px+'_cep');
    if(!el) return;
    var cep = (el.value||'').replace(/\D/g,'');
    var st = document.getElementById(px+'_cep_st');
    if(cep.length !== 8){ return; }
    if(st){ st.style.color=''; st.textContent='Buscando...'; }
    try{
        var r = await fetch('https://viacep.com.br/ws/'+cep+'/json/');
        var d = await r.json();
        if(d.erro) throw 0;
        setVal(px+'_logradouro', d.logradouro);
        setVal(px+'_bairro', d.bairro);
        setVal(px+'_cidade', d.localidade);
        setVal(px+'_estado', d.uf);
        if(st){ st.style.color='var(--ok)'; st.textContent='OK - endereco preenchido.'; }
    }catch(e){ if(st){ st.style.color='var(--alerta)'; st.textContent='CEP nao encontrado.'; } }
}
</script>
@endsection