@include('partials.session-message')
<div class="card shadow-lg mx-4 card-profile-bottom">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-auto">
                <div class="avatar avatar-xl position-relative">
                    <i class="fa fa-building" style="color:#344767; font-size:48px !important"></i>
                </div>
            </div>
            <div class="col-auto my-auto">
                <h5 id="head-nome" class="mb-1">{{ optional($cliente)->nome ?? 'Novo Cliente' }}</h5>
                <p class="mb-0 font-weight-bold text-sm">{{ optional($cliente)->razaosocial ?? '-' }}</p>
            </div>
            @if(isset($cliente) && $cliente->id)
            <div class="col-lg-2 col-md-2 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
                <span class="badge badge-sm {{ ($cliente->status ?? '') === 'ativo' ? 'bg-gradient-success' : 'bg-gradient-secondary' }} p-2">{{ $cliente->status ?? 'ativo' }}</span>
            </div>
            @endif
        </div>
    </div>
</div>
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header pb-0">
                    <p class="mb-4">Dados do Cliente</p>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label>Nome / Nome fantasia <span class="text-danger">*</span></label>
                            <input type="text" class="form-control {{ $errors->has('nome') ? 'is-invalid' : '' }}" name="nome" id="input-nome" value="{{ old('nome', optional($cliente)->nome ?? '') }}" required>
                            @if($errors->has('nome'))<span class="invalid-feedback">{{ $errors->first('nome') }}</span>@endif
                        </div>
                        <div class="col-md-6">
                            <label>Razão social</label>
                            <input type="text" class="form-control" name="razaosocial" id="input-razaosocial" value="{{ old('razaosocial', optional($cliente)->razaosocial ?? '') }}">
                        </div>
                        <div class="col-md-6 mt-3">
                            <label>CNPJ</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="cnpj" id="input-cnpj" value="{{ old('cnpj', $cliente && $cliente->cnpj ? preg_replace('/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/', '$1.$2.$3/$4-$5', $cliente->cnpj) : '') }}" placeholder="00.000.000/0001-00">
                                <button type="button" class="btn btn-outline-primary" id="btn-buscar-cnpj">Buscar</button>
                            </div>
                            <small class="text-muted">Preencha e clique em Buscar para carregar dados (BrasilAPI / Gov.br).</small>
                        </div>
                        <div class="col-md-6 mt-3">
                            <label>Inscrição estadual</label>
                            <input type="text" class="form-control" name="inscestadual" id="input-inscestadual" value="{{ old('inscestadual', optional($cliente)->inscestadual ?? '') }}">
                        </div>
                        <div class="col-md-4 mt-3">
                            <label>CEP</label>
                            <input type="text" class="form-control" name="cep" id="input-cep" value="{{ old('cep', optional($cliente)->cep ?? '') }}">
                        </div>
                        <div class="col-md-8 mt-3">
                            <label>Endereço</label>
                            <input type="text" class="form-control" name="endereco" id="input-endereco" value="{{ old('endereco', optional($cliente)->endereco ?? '') }}">
                        </div>
                        <div class="col-md-2 mt-3">
                            <label>Número</label>
                            <input type="text" class="form-control" name="numero" id="input-numero" value="{{ old('numero', optional($cliente)->numero ?? '') }}">
                        </div>
                        <div class="col-md-4 mt-3">
                            <label>Complemento</label>
                            <input type="text" class="form-control" name="complemento" id="input-complemento" value="{{ old('complemento', optional($cliente)->complemento ?? '') }}">
                        </div>
                        <div class="col-md-3 mt-3">
                            <label>Bairro</label>
                            <input type="text" class="form-control" name="bairro" id="input-bairro" value="{{ old('bairro', optional($cliente)->bairro ?? '') }}">
                        </div>
                        <div class="col-md-3 mt-3">
                            <label>Cidade</label>
                            <input type="text" class="form-control" name="cidade" id="input-cidade" value="{{ old('cidade', optional($cliente)->cidade ?? '') }}">
                        </div>
                        <div class="col-md-1 mt-3">
                            <label>UF</label>
                            <input type="text" class="form-control" name="estado" id="input-estado" maxlength="2" value="{{ old('estado', optional($cliente)->estado ?? '') }}">
                        </div>
                        <div class="col-md-4 mt-3">
                            <label>Telefone</label>
                            <input type="text" class="form-control" name="telefone" id="input-telefone" value="{{ old('telefone', optional($cliente)->telefone ?? '') }}">
                        </div>
                        <div class="col-md-4 mt-3">
                            <label>E-mail</label>
                            <input type="email" class="form-control" name="email" id="input-email" value="{{ old('email', optional($cliente)->email ?? '') }}">
                        </div>
                        <div class="col-md-12 mt-3">
                            <label>Observação</label>
                            <textarea name="observacao" class="form-control" rows="2">{{ old('observacao', optional($cliente)->observacao ?? '') }}</textarea>
                        </div>
                        @if(isset($cliente) && $cliente->id)
                        <div class="col-md-4 mt-3">
                            <label>Status</label>
                            <select name="status" class="form-select">
                                <option value="ativo" {{ old('status', optional($cliente)->status) === 'ativo' ? 'selected' : '' }}>Ativo</option>
                                <option value="inativo" {{ old('status', optional($cliente)->status) === 'inativo' ? 'selected' : '' }}>Inativo</option>
                            </select>
                        </div>
                        @endif
                    </div>
                    <div class="mt-4">
                        <button type="submit" class="btn btn-success btn-sm"><i class="fas fa-save me-2"></i>Salvar</button>
                        <a href="{{ route('clientes.index') }}" class="btn btn-secondary btn-sm">Cancelar</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/assets/js/jquery.min.js"></script>
<script>
(function() {
    var $cnpj = $('#input-cnpj'), $nome = $('#input-nome'), $razao = $('#input-razaosocial');
    var $cep = $('#input-cep'), $endereco = $('#input-endereco'), $numero = $('#input-numero'), $complemento = $('#input-complemento');
    var $bairro = $('#input-bairro'), $cidade = $('#input-cidade'), $estado = $('#input-estado');
    $('#btn-buscar-cnpj').on('click', function() {
        var cnpj = $cnpj.val().replace(/\D/g, '');
        if (cnpj.length !== 14) {
            alert('Informe um CNPJ válido com 14 dígitos.');
            return;
        }
        var $btn = $(this).prop('disabled', true).text('Buscando...');
        $.get('{{ route("clientes.buscar-cnpj") }}', { cnpj: cnpj })
            .done(function(r) {
                if (r.success && r.dados) {
                    var d = r.dados;
                    if (d.nome) $nome.val(d.nome);
                    if (d.razaosocial) $razao.val(d.razaosocial);
                    if (d.cnpj) $cnpj.val(d.cnpj.length === 14 ? d.cnpj.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/, '$1.$2.$3/$4-$5') : d.cnpj);
                    if (d.cep) $cep.val(d.cep);
                    if (d.endereco) $endereco.val(d.endereco);
                    if (d.numero) $numero.val(d.numero);
                    if (d.complemento) $complemento.val(d.complemento);
                    if (d.bairro) $bairro.val(d.bairro);
                    if (d.cidade) $cidade.val(d.cidade);
                    if (d.estado) $estado.val(d.estado);
                }
            })
            .fail(function(xhr) {
                var msg = (xhr.responseJSON && xhr.responseJSON.error) ? xhr.responseJSON.error : 'Erro ao buscar CNPJ.';
                alert(msg);
            })
            .always(function() {
                $btn.prop('disabled', false).text('Buscar');
            });
    });
})();
</script>