{% extends "base.html" %}

{% block title %}{% if fornecedor %}Editar{% else %}Novo{% endif %} Fornecedor{% endblock %}

{% block content %}
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <h1>
            <i class="bi bi-truck"></i> 
            {% if fornecedor %}Editar Fornecedor{% else %}Novo Fornecedor{% endif %}
        </h1>
        <a href="{{ url_for('fornecedores') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Voltar
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <form method="POST" class="form-lockable">
                    <div class="row">
                        <!-- Nome -->
                        <div class="col-md-8 mb-3">
                            <label for="nome" class="form-label">Nome Fantasia *</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="nome" 
                                   name="nome" 
                                   value="{{ fornecedor.nome if fornecedor else '' }}" 
                                   required>
                        </div>

                        <!-- Tipo -->
                        <div class="col-md-4 mb-3">
                            <label for="tipo" class="form-label">Tipo</label>
                            <select class="form-select" id="tipo" name="tipo">
                                <option value="">Selecione...</option>
                                <option value="software" {% if fornecedor and fornecedor.tipo == 'software' %}selected{% endif %}>
                                    Software
                                </option>
                                <option value="equipamento" {% if fornecedor and fornecedor.tipo == 'equipamento' %}selected{% endif %}>
                                    Equipamento
                                </option>
                                <option value="servico" {% if fornecedor and fornecedor.tipo == 'servico' %}selected{% endif %}>
                                    Serviço
                                </option>
                                <option value="taxa" {% if fornecedor and fornecedor.tipo == 'taxa' %}selected{% endif %}>
                                    Taxa/Banco
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Razão Social -->
                        <div class="col-md-8 mb-3">
                            <label for="razao_social" class="form-label">Razão Social</label>
                            <input type="text" 
                                   id="razao_social"
                                   class="form-control" 
                                   id="razao_social" 
                                   name="razao_social" 
                                   value="{{ fornecedor.razao_social if fornecedor else '' }}">
                        </div>

                        <!-- CNPJ/CPF -->
                        <div class="col-md-4 mb-3">
                            <label for="cnpj_cpf" class="form-label">CNPJ/CPF</label>
                            <div class="input-group">
                                <input type="text" 
                                       class="form-control" 
                                       id="cnpj_cpf" 
                                       name="cnpj_cpf" 
                                       value="{{ fornecedor.cnpj_cpf if fornecedor else '' }}"
                                       placeholder="00.000.000/0000-00">
                                <button type="button" class="btn btn-info" onclick="consultarCNPJFornecedor()" id="btnConsultarCNPJ">
                                    <i class="bi bi-search"></i> Consultar
                                </button>
                            </div>
                            <small class="text-muted">Consulta automática na Receita Federal</small>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Email -->
                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label">E-mail</label>
                            <input type="email" 
                                   class="form-control" 
                                   id="email" 
                                   name="email" 
                                   value="{{ fornecedor.email if fornecedor else '' }}">
                        </div>

                        <!-- Telefone -->
                        <div class="col-md-6 mb-3">
                            <label for="telefone" class="form-label">Telefone</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="telefone" 
                                   name="telefone" 
                                   value="{{ fornecedor.telefone if fornecedor else '' }}">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="endereco" class="form-label">Endereço</label>
                        <input type="text" 
                               class="form-control" 
                               id="endereco" 
                               name="endereco" 
                               value="{{ fornecedor.endereco if fornecedor else '' }}">
                    </div>

                    <div class="row">
                        <!-- Cidade -->
                        <div class="col-md-5 mb-3">
                            <label for="cidade" class="form-label">Cidade</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="cidade" 
                                   name="cidade" 
                                   value="{{ fornecedor.cidade if fornecedor else '' }}">
                        </div>

                        <!-- Estado -->
                        <div class="col-md-3 mb-3">
                            <label for="estado" class="form-label">UF</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="estado" 
                                   name="estado" 
                                   maxlength="2" 
                                   value="{{ fornecedor.estado if fornecedor else '' }}">
                        </div>

                        <!-- CEP -->
                        <div class="col-md-4 mb-3">
                            <label for="cep" class="form-label">CEP</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="cep" 
                                   name="cep" 
                                   value="{{ fornecedor.cep if fornecedor else '' }}">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="observacoes" class="form-label">Observações</label>
                        <textarea class="form-control" 
                                  id="observacoes" 
                                  name="observacoes" 
                                  rows="3">{{ fornecedor.observacoes if fornecedor else '' }}</textarea>
                    </div>

                    <!-- Status -->
                    <div class="mb-3 form-check">
                        <input type="checkbox" 
                               class="form-check-input" 
                               id="ativo" 
                               name="ativo" 
                               {% if not fornecedor or fornecedor.ativo %}checked{% endif %}>
                        <label class="form-check-label" for="ativo">
                            Fornecedor Ativo
                        </label>
                    </div>

                    <div class="d-flex justify-content-end gap-2">
                        <a href="{{ url_for('fornecedores') }}" class="btn btn-secondary">Cancelar</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> Salvar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5><i class="bi bi-info-circle"></i> Dicas</h5>
            </div>
            <div class="card-body">
                <p><strong>Tipos de Fornecedor:</strong></p>
                <ul>
                    <li><strong>Software:</strong> Fornecedores de sistemas, licenças</li>
                    <li><strong>Equipamento:</strong> Máquinas, hardware</li>
                    <li><strong>Serviço:</strong> Consultoria, manutenção</li>
                    <li><strong>Taxa/Banco:</strong> Taxas bancárias, gateway de pagamento</li>
                </ul>
                <hr>
                <p class="mb-0"><small class="text-muted">Use os tipos para organizar melhor seus custos e gerar relatórios mais precisos.</small></p>
            </div>
        </div>
    </div>
</div>

<script>
async function consultarCNPJFornecedor() {
    const cnpj = document.getElementById('cnpj_cpf').value;
    const btn = document.getElementById('btnConsultarCNPJ');
    
    if (!cnpj) {
        alert('Por favor, digite um CNPJ');
        return;
    }
    
    // Desabilita botão e mostra loading
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Consultando...';
    
    try {
        const response = await fetch('/api/consultar-cnpj', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ cnpj: cnpj, api: 'brasilapi' })
        });
        
        const data = await response.json();
        
        if (data.erro) {
            alert('Erro: ' + data.erro);
        } else {
            // Preenche os campos com sucesso
            if (data.razao_social) document.getElementById('razao_social').value = data.razao_social;
            if (data.nome_fantasia) document.getElementById('nome').value = data.nome_fantasia || data.razao_social;
            if (data.email) document.querySelector('[name="email"]').value = data.email;
            if (data.telefone) document.querySelector('[name="telefone"]').value = data.telefone;
            if (data.cep) document.querySelector('[name="cep"]').value = data.cep;
            
            // Monta endereço
            let endereco = '';
            if (data.logradouro) endereco += data.logradouro;
            if (data.numero) endereco += ', ' + data.numero;
            if (data.complemento) endereco += ' - ' + data.complemento;
            if (data.bairro) endereco += ' - ' + data.bairro;
            if (endereco) document.querySelector('[name="endereco"]').value = endereco;
            
            if (data.municipio) document.querySelector('[name="cidade"]').value = data.municipio;
            if (data.uf) document.querySelector('[name="estado"]').value = data.uf;
            
            // Adiciona informações extras nas observações
            let obs = '';
            if (data.situacao) obs += 'Situação: ' + data.situacao + '\n';
            if (data.cnae_principal) obs += 'CNAE: ' + data.cnae_principal + '\n';
            if (data.porte) obs += 'Porte: ' + data.porte;
            if (obs) document.querySelector('[name="observacoes"]').value = obs;
            
            alert('✓ Dados preenchidos com sucesso!');
        }
    } catch (error) {
        alert('Erro ao consultar CNPJ: ' + error.message);
    } finally {
        // Reabilita botão
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-search"></i> Consultar';
    }
}
</script>
{% endblock %}