{% extends "base.html" %}

{% block title %}{% if categoria %}Editar{% else %}Nova{% endif %} Categoria{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">
        <i class="bi bi-{% if categoria %}pencil{% else %}plus-circle{% endif %}"></i> 
        {% if categoria %}Editar{% else %}Nova{% endif %} Categoria
    </h1>
    <a href="{{ url_for('categorias') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> Voltar
    </a>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <form method="POST" class="form-lockable">
                    <div class="mb-3">
                        <label class="form-label">Nome da Categoria *</label>
                        <input type="text" class="form-control" name="nome" 
                               value="{% if categoria %}{{ categoria.nome }}{% endif %}" 
                               placeholder="Ex: Alimentação, Transporte, Vendas..."
                               required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Tipo *</label>
                        <select class="form-select" name="tipo" id="tipo_categoria" required>
                            <option value="">Selecione...</option>
                            <option value="receita" {% if categoria and categoria.tipo == 'receita' %}selected{% endif %}>
                                Receita
                            </option>
                            <option value="despesa" {% if categoria and categoria.tipo == 'despesa' %}selected{% endif %}>
                                Despesa
                            </option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Cor</label>
                        <input type="color" class="form-control form-control-color" name="cor" 
                               value="{% if categoria %}{{ categoria.cor }}{% else %}#6c757d{% endif %}" 
                               title="Escolha a cor da categoria">
                        <small class="text-muted">Cor usada nos gráficos e relatórios</small>
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" name="vincular_dre" id="vincular_dre"
                                   {% if not categoria or categoria.vincular_dre %}checked{% endif %}>
                            <label class="form-check-label" for="vincular_dre">
                                <i class="bi bi-link-45deg"></i> Vincular ao plano DRE
                            </label>
                        </div>
                        <small class="text-muted">
                            Desmarque para deixar a categoria apenas com centro de custo padrão, sem exigir vínculo DRE neste cadastro.
                        </small>
                    </div>

                    <div class="mb-3" id="grupo_plano_dre">
                        <label class="form-label">
                            <i class="bi bi-diagram-3"></i> Plano de Contas (DRE) *
                        </label>
                        <select class="form-select" name="plano_contas_id" id="plano_contas_id" required>
                            <option value="">Selecione o plano de contas...</option>
                            {% for plano in planos_contas %}
                            <option value="{{ plano.id }}" 
                                    data-tipo="{{ plano.tipo }}"
                                    {% if categoria and categoria.plano_contas_id == plano.id %}selected{% endif %}>
                                {{ plano.codigo }} - {{ plano.nome }}
                                {% if plano.categoria %} ({{ plano.categoria }}){% endif %}
                            </option>
                            {% endfor %}
                        </select>
                        <small class="text-muted" id="ajuda_plano_dre">
                            <i class="bi bi-info-circle"></i> Vincula esta categoria ao DRE (Demonstrativo de Resultado)
                        </small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">
                            <i class="bi bi-diagram-2"></i> Centro de Custo Padrão
                        </label>
                        <select class="form-select" name="centro_custo_padrao_id">
                            <option value="">Sem centro padrão</option>
                            {% for centro in centros_custo %}
                            <option value="{{ centro.id }}"
                                    {% if categoria and categoria.centro_custo_padrao_id == centro.id %}selected{% endif %}>
                                {% if centro.codigo %}{{ centro.codigo }} - {% endif %}{{ centro.nome }}
                            </option>
                            {% endfor %}
                        </select>
                        <small class="text-muted">
                            <i class="bi bi-magic"></i> Quando a categoria for escolhida nas despesas, este centro poderá ser sugerido automaticamente.
                        </small>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> {% if categoria %}Atualizar{% else %}Cadastrar{% endif %}
                        </button>
                        <a href="{{ url_for('categorias') }}" class="btn btn-secondary">
                            Cancelar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="bi bi-lightbulb"></i> Dicas</h5>
            </div>
            <div class="card-body">
                <p><strong>Categorias de Receita:</strong></p>
                <ul>
                    <li>Vendas de produtos/serviços</li>
                    <li>Juros e multas recebidos</li>
                    <li>Investimentos</li>
                </ul>

                <p class="mt-3"><strong>Categorias de Despesa:</strong></p>
                <ul>
                    <li>Fornecedores e insumos</li>
                    <li>Salários e encargos</li>
                    <li>Aluguel e contas fixas</li>
                    <li>Marketing e publicidade</li>
                </ul>

                <div class="alert alert-warning mt-3">
                    <i class="bi bi-exclamation-triangle"></i>
                    <strong>Atenção:</strong> Categorias que possuem transações vinculadas não podem ser excluídas.
                </div>

                <div class="alert alert-info mt-3 mb-0">
                    <i class="bi bi-stars"></i>
                    <strong>Rotina inteligente:</strong> várias categorias podem apontar para o mesmo plano DRE, ou operar sem vínculo DRE, e cada categoria pode ter um centro de custo padrão para acelerar a classificação.
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
(function () {
    const tipoSelect = document.getElementById('tipo_categoria');
    const planoSelect = document.getElementById('plano_contas_id');
    const vincularDreCheckbox = document.getElementById('vincular_dre');
    const grupoPlanoDre = document.getElementById('grupo_plano_dre');
    const ajudaPlanoDre = document.getElementById('ajuda_plano_dre');
    if (!tipoSelect || !planoSelect || !vincularDreCheckbox || !grupoPlanoDre) {
        return;
    }

    const opcoesOriginais = Array.from(planoSelect.options).map((option) => ({
        value: option.value,
        text: option.textContent,
        tipo: option.dataset.tipo || '',
        selected: option.selected,
    }));

    function renderizarPlanos() {
        const tipoSelecionado = (tipoSelect.value || '').trim().toLowerCase();
        const valorAtual = planoSelect.value || opcoesOriginais.find((opcao) => opcao.selected)?.value || '';

        planoSelect.innerHTML = '';
        opcoesOriginais.forEach((opcao) => {
            if (opcao.value && tipoSelecionado && opcao.tipo && opcao.tipo !== tipoSelecionado) {
                return;
            }

            const option = document.createElement('option');
            option.value = opcao.value;
            option.textContent = opcao.text;
            option.dataset.tipo = opcao.tipo;
            if (valorAtual && valorAtual === opcao.value) {
                option.selected = true;
            }
            planoSelect.appendChild(option);
        });

        if (valorAtual && !Array.from(planoSelect.options).some((opcao) => opcao.value === valorAtual)) {
            planoSelect.value = '';
        }

        atualizarEstadoPlanoDre();
    }

    function atualizarEstadoPlanoDre() {
        const vincularDre = vincularDreCheckbox.checked;
        planoSelect.required = vincularDre;
        planoSelect.disabled = !vincularDre;
        grupoPlanoDre.classList.toggle('opacity-75', !vincularDre);
        if (ajudaPlanoDre) {
            ajudaPlanoDre.innerHTML = vincularDre
                ? '<i class="bi bi-info-circle"></i> Vincula esta categoria ao DRE (Demonstrativo de Resultado)'
                : '<i class="bi bi-dash-circle"></i> DRE desativado para esta categoria. O centro de custo padrão continuará disponível.';
        }
        if (!vincularDre) {
            planoSelect.value = '';
        }
    }

    tipoSelect.addEventListener('change', renderizarPlanos);
    vincularDreCheckbox.addEventListener('change', atualizarEstadoPlanoDre);
    renderizarPlanos();
})();
</script>
{% endblock %}