{% extends 'base.html' %}
{% block title %}{% if grupo %}Editar{% else %}Novo{% endif %} Grupo de Produto{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-collection"></i>
                        {% if grupo %}Editar Grupo{% else %}Novo Grupo{% endif %}
                    </h5>
                </div>
                <div class="card-body">
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    <form method="POST">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label class="form-label">Nome *</label>
                                <input type="text" class="form-control" name="nome" required
                                       value="{{ grupo.nome if grupo else '' }}"
                                       placeholder="Ex: Bebidas, Limpeza, Alimentos">
                            </div>
                            {% set icones_padrao = ['🍽️','🥤','🍕','🍔','🍟','🍨','☕','🥗','🍝'] %}
                            {% set icone_atual = (grupo.icone if grupo and grupo.icone else '') %}
                            {% set icone_personalizado = icone_atual and icone_atual not in icones_padrao %}
                            <div class="col-md-2 mb-3">
                                <label class="form-label">Ícone</label>
                                <select class="form-select" name="icone" id="grupoIconeSelect" title="Ícone opcional para o grupo">
                                    <option value="" {% if not grupo or not grupo.icone %}selected{% endif %}>Padrão</option>
                                    <option value="🍽️" {% if grupo and grupo.icone == '🍽️' %}selected{% endif %}>🍽️ Geral</option>
                                    <option value="🥤" {% if grupo and grupo.icone == '🥤' %}selected{% endif %}>🥤 Bebidas</option>
                                    <option value="🍕" {% if grupo and grupo.icone == '🍕' %}selected{% endif %}>🍕 Pizza</option>
                                    <option value="🍔" {% if grupo and grupo.icone == '🍔' %}selected{% endif %}>🍔 Lanches</option>
                                    <option value="🍟" {% if grupo and grupo.icone == '🍟' %}selected{% endif %}>🍟 Petiscos</option>
                                    <option value="🍨" {% if grupo and grupo.icone == '🍨' %}selected{% endif %}>🍨 Sobremesa</option>
                                    <option value="☕" {% if grupo and grupo.icone == '☕' %}selected{% endif %}>☕ Café</option>
                                    <option value="🥗" {% if grupo and grupo.icone == '🥗' %}selected{% endif %}>🥗 Saladas</option>
                                    <option value="🍝" {% if grupo and grupo.icone == '🍝' %}selected{% endif %}>🍝 Massas</option>
                                    <option value="__custom__" {% if icone_personalizado %}selected{% endif %}>✨ Personalizado</option>
                                </select>
                            </div>
                            <div class="col-md-2 mb-3">
                                <label class="form-label">Cor</label>
                                <input type="color" class="form-control form-control-color w-100" name="cor"
                                       value="{{ grupo.cor if grupo and grupo.cor else '#6c757d' }}"
                                       title="Escolha uma cor para identificar o grupo">
                            </div>
                        </div>

                        <div class="row" id="rowIconeCustom" style="display: {{ 'flex' if icone_personalizado else 'none' }};">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Ícone personalizado (emoji)</label>
                                <input type="text" class="form-control" name="icone_custom" id="grupoIconeCustom"
                                       maxlength="16" placeholder="Ex.: 🧁"
                                       value="{{ icone_atual if icone_personalizado else '' }}">
                                <small class="text-muted">Use um emoji curto para aparecer no cardápio digital.</small>
                            </div>
                        </div>

                        <!-- Grupo Pai (Hierarquia) -->
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label class="form-label">
                                    <i class="bi bi-diagram-3"></i> Grupo Pai (Hierarquia)
                                </label>
                                <select class="form-select" name="grupo_pai_id" id="grupo_pai_id">
                                    <option value="">-- Grupo Raiz (Nenhum) --</option>
                                    {% if grupos_disponiveis %}
                                        {% for g in grupos_disponiveis %}
                                        <option value="{{ g.id }}" 
                                                {% if grupo and grupo.grupo_pai_id == g.id %}selected{% endif %}>
                                            {{ '└─ ' * (g.nivel or 0) }}{{ g.nome }}
                                        </option>
                                        {% endfor %}
                                    {% endif %}
                                </select>
                                <small class="text-muted">
                                    Selecione um grupo pai para criar uma hierarquia (ex: Bebidas > Refrigerantes > Cola)
                                </small>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Ordem de Exibição</label>
                                <input type="number" class="form-control" name="ordem" min="0"
                                       value="{{ grupo.ordem if grupo else 0 }}"
                                       placeholder="0">
                                <small class="text-muted">Menor número = exibe primeiro</small>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Descrição</label>
                            <textarea class="form-control" name="descricao" rows="2"
                                      placeholder="Descrição opcional do grupo">{{ grupo.descricao if grupo else '' }}</textarea>
                        </div>

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

                        <!-- CAMPOS CONTÁBEIS -->
                        {% if contas_estoque or contas_cmv or contas_receita %}
                        <hr>
                        <h6 class="mb-3">
                            <i class="bi bi-journal-text text-success"></i> Configuração Contábil
                            <small class="text-muted">(Padrão para produtos do grupo)</small>
                        </h6>
                        
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">
                                    <i class="bi bi-box-seam text-primary"></i> Conta de Estoque
                                </label>
                                <select class="form-select form-select-sm" name="conta_estoque_id">
                                    <option value="">-- Selecione --</option>
                                    {% for conta in contas_estoque %}
                                    <option value="{{ conta.id }}" 
                                            {% if grupo and grupo.conta_estoque_id == conta.id %}selected{% endif %}>
                                        {{ conta.codigo }} - {{ conta.nome }}
                                    </option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted">Ex: 1.1.4.01 - Mercadorias</small>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label class="form-label">
                                    <i class="bi bi-graph-down-arrow text-danger"></i> Conta de CMV
                                </label>
                                <select class="form-select form-select-sm" name="conta_cmv_id">
                                    <option value="">-- Selecione --</option>
                                    {% for conta in contas_cmv %}
                                    <option value="{{ conta.id }}" 
                                            {% if grupo and grupo.conta_cmv_id == conta.id %}selected{% endif %}>
                                        {{ conta.codigo }} - {{ conta.nome }}
                                    </option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted">Ex: 5.1.1 - CMV Mercadorias</small>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label class="form-label">
                                    <i class="bi bi-graph-up-arrow text-success"></i> Conta de Receita
                                </label>
                                <select class="form-select form-select-sm" name="conta_receita_id">
                                    <option value="">-- Selecione --</option>
                                    {% for conta in contas_receita %}
                                    <option value="{{ conta.id }}" 
                                            {% if grupo and grupo.conta_receita_id == conta.id %}selected{% endif %}>
                                        {{ conta.codigo }} - {{ conta.nome }}
                                    </option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted">Ex: 4.1.1 - Venda Mercadorias</small>
                            </div>
                        </div>
                        
                        <div class="alert alert-info py-2 small">
                            <i class="bi bi-lightbulb"></i>
                            <strong>Dica:</strong> Configure as contas no grupo para que todos os produtos
                            herdem automaticamente. Produtos podem ter contas próprias se necessário.
                        </div>
                        {% endif %}

                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('grupos_produto') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Voltar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg"></i> Salvar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function initIconeCustomGrupo() {
    const select = document.getElementById('grupoIconeSelect');
    const row = document.getElementById('rowIconeCustom');
    const input = document.getElementById('grupoIconeCustom');
    if (!select || !row || !input) return;

    const toggle = () => {
        const custom = select.value === '__custom__';
        row.style.display = custom ? 'flex' : 'none';
        if (!custom) input.value = '';
    };

    select.addEventListener('change', toggle);
    toggle();
})();
</script>
{% endblock %}