{% extends "base.html" %}

{% block title %}{{ 'Editar' if conta else 'Nova' }} Conta - Plano de Contas{% endblock %}

{% block content %}
<div class="mb-4">
    <h2>
        <i class="bi bi-diagram-3"></i> 
        {{ 'Editar Conta' if conta else 'Nova Conta' }} - Plano de Contas
    </h2>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" class="form-lockable">
            <div class="row">
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="codigo" class="form-label">Código *</label>
                        <input type="text" class="form-control" id="codigo" name="codigo" 
                               value="{{ conta.codigo if conta else '' }}" 
                               placeholder="Ex: 3.1.01" required>
                        <small class="text-muted">Use estrutura hierárquica (1.1.01, 3.2.05, etc)</small>
                    </div>
                </div>
                
                <div class="col-md-9">
                    <div class="mb-3">
                        <label for="nome" class="form-label">Nome da Conta *</label>
                        <input type="text" class="form-control" id="nome" name="nome" 
                               value="{{ conta.nome if conta else '' }}" 
                               placeholder="Ex: Receita de Vendas de Serviços" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="conta_pai_id" class="form-label">Conta Pai</label>
                        <select class="form-select" id="conta_pai_id" name="conta_pai_id">
                            <option value="">-- Nenhuma (Raiz) --</option>
                            {% for pai in contas_pai or [] %}
                            <option value="{{ pai.id }}" {% if conta and conta.conta_pai_id == pai.id %}selected{% endif %}>
                                {{ pai.label_hierarquia or ((pai.codigo ~ ' - ' ~ pai.nome) if pai.codigo else pai.nome) }}
                            </option>
                            {% endfor %}
                        </select>
                        <small class="text-muted">Use para organizar a cadeia grupo → subgrupo → conta analítica. Se o código for, por exemplo, <code>3.1.01</code>, a conta pai precisa ser <code>3.1</code>.</small>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="tipo" class="form-label">Tipo *</label>
                        <select class="form-select" id="tipo" name="tipo" required>
                            <option value="">Selecione...</option>
                            <option value="receita" {% if conta and conta.tipo == 'receita' %}selected{% endif %}>Receita</option>
                            <option value="despesa" {% if conta and conta.tipo == 'despesa' %}selected{% endif %}>Despesa</option>
                            <option value="ativo" {% if conta and conta.tipo == 'ativo' %}selected{% endif %}>Ativo</option>
                            <option value="passivo" {% if conta and conta.tipo == 'passivo' %}selected{% endif %}>Passivo</option>
                        </select>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="natureza" class="form-label">Natureza *</label>
                        <select class="form-select" id="natureza" name="natureza" required>
                            <option value="">Selecione...</option>
                            <option value="empresarial" {% if conta and conta.natureza == 'empresarial' %}selected{% endif %}>Empresarial</option>
                            <option value="pessoal" {% if conta and conta.natureza == 'pessoal' %}selected{% endif %}>Pessoal</option>
                        </select>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="categoria" class="form-label">Categoria</label>
                        <input type="text" class="form-control" id="categoria" name="categoria" 
                               value="{{ conta.categoria if conta else '' }}" 
                               placeholder="Ex: Vendas, Folha, Impostos">
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="subcategoria" class="form-label">Subcategoria</label>
                        <input type="text" class="form-control" id="subcategoria" name="subcategoria" 
                               value="{{ conta.subcategoria if conta else '' }}" 
                               placeholder="Detalhamento">
                    </div>
                </div>
            </div>
            
            <div class="mb-3">
                <label for="descricao" class="form-label">Descrição</label>
                <textarea class="form-control" id="descricao" name="descricao" rows="3" 
                          placeholder="Descreva o uso desta conta contábil">{{ conta.descricao if conta else '' }}</textarea>
            </div>
            
            {% if conta %}
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="ativo" name="ativo" 
                           {% if conta.ativo %}checked{% endif %}>
                    <label class="form-check-label" for="ativo">
                        Conta Ativa
                    </label>
                </div>
            </div>
            {% endif %}
            
            <hr>
            
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle"></i> Salvar
                </button>
                <a href="{{ url_for('plano_contas') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Cancelar
                </a>
            </div>
        </form>
    </div>
</div>

<div class="alert alert-info mt-4">
    <h6><i class="bi bi-lightbulb"></i> Exemplos de Estrutura:</h6>
    <ul class="mb-0">
        <li><strong>1.x.xx</strong> - Ativos (Caixa, Bancos, Contas a Receber)</li>
        <li><strong>2.x.xx</strong> - Passivos (Fornecedores, Empréstimos)</li>
        <li><strong>3.x.xx</strong> - Receitas (Vendas, Serviços, Comissões)</li>
        <li><strong>4.x.xx</strong> - Despesas (Folha, Impostos, Operacionais)</li>
    </ul>
</div>

{# Manual de Campos #}
<div class="card mt-4">
    <div class="card-header bg-light">
        <h6 class="mb-0"><i class="bi bi-book"></i> Manual de Preenchimento</h6>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h6 class="text-primary"><i class="bi bi-hash"></i> Código</h6>
                <p class="small text-muted mb-3">
                    Número hierárquico que identifica a conta. Use o padrão <code>X.X.XX</code> onde o primeiro número indica o grupo principal.
                    <br><em>Exemplos: 1.1.01, 3.2.05, 4.1.03</em>
                </p>
                
                <h6 class="text-primary"><i class="bi bi-card-text"></i> Nome da Conta</h6>
                <p class="small text-muted mb-3">
                    Nome descritivo da conta contábil. Seja específico para facilitar a identificação.
                    <br><em>Exemplos: "Receita de Vendas de Produtos", "Despesa com Energia Elétrica"</em>
                </p>
                
                <h6 class="text-primary"><i class="bi bi-tags"></i> Categoria / Subcategoria</h6>
                <p class="small text-muted mb-3">
                    Agrupamentos opcionais para organizar melhor suas contas e facilitar relatórios.
                    <br><em>Categoria: "Vendas", "Folha de Pagamento", "Impostos"</em>
                    <br><em>Subcategoria: "Comissões", "INSS Patronal", "ICMS"</em>
                </p>
            </div>
            
            <div class="col-md-6">
                <h6 class="text-danger"><i class="bi bi-exclamation-diamond"></i> Tipo (Campo Principal)</h6>
                <div class="small mb-3">
                    <table class="table table-sm table-bordered mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 25%">Tipo</th>
                                <th>Quando Usar</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span class="badge bg-success">Receita</span></td>
                                <td>Entradas de dinheiro: vendas, serviços, aluguéis recebidos, comissões, juros recebidos</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-danger">Despesa</span></td>
                                <td>Saídas de dinheiro: folha, aluguel, energia, água, impostos, materiais, combustível</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-primary">Ativo</span></td>
                                <td>Bens e direitos: caixa, bancos, estoque, veículos, imóveis, contas a receber</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-warning text-dark">Passivo</span></td>
                                <td>Obrigações: fornecedores, empréstimos, contas a pagar, impostos a recolher</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <h6 class="text-primary"><i class="bi bi-briefcase"></i> Natureza</h6>
                <p class="small text-muted mb-0">
                    <strong>Empresarial:</strong> Contas relacionadas às operações da empresa.<br>
                    <strong>Pessoal:</strong> Contas de sócios ou gastos pessoais (retiradas, pró-labore).
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}