{% extends 'base.html' %}

{% block title %}Configuração do Cardápio Digital - CapeFood{% endblock %}

{% block content %}
<div class="container-fluid py-3">
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
        <div>
            <h4 class="mb-0"><i class="bi bi-menu-app text-danger"></i> Configuração do Cardápio Digital</h4>
            <small class="text-muted">Selecione os produtos que aparecem na comanda digital (QR).</small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ url_for('food.configuracoes_mesas') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Voltar
            </a>
        </div>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible fade show">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="row g-3 mb-3">
        <div class="col-md-8">
            <form method="GET" class="card">
                <div class="card-body">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-5">
                            <label class="form-label">Buscar produto</label>
                            <input type="text" class="form-control" name="busca" value="{{ busca or '' }}" placeholder="Nome do produto...">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Grupo</label>
                            <select class="form-select" name="grupo_id">
                                <option value="">Todos os grupos</option>
                                {% for grupo in grupos %}
                                <option value="{{ grupo.id }}" {% if grupo_id and grupo_id == grupo.id %}selected{% endif %}>
                                    {{ grupo.nome }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3 d-grid">
                            <button class="btn btn-primary" type="submit">
                                <i class="bi bi-search"></i> Filtrar
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Produtos listados</span>
                        <strong>{{ total_ativos }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Liberados no cardápio</span>
                        <strong class="text-success">{{ total_liberados }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Ocultos no cardápio</span>
                        <strong class="text-warning">{{ total_ativos - total_liberados }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ url_for('food.salvar_configuracoes_cardapio_digital') }}">
        <div class="card">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <span><i class="bi bi-list-check"></i> Produtos do Cardápio Digital</span>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-success btn-sm" onclick="marcarTodos(true)">Marcar todos</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="marcarTodos(false)">Desmarcar todos</button>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height: 65vh; overflow-y: auto;">
                    <table class="table table-sm table-hover align-middle mb-0">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th style="width: 60px;" class="text-center">Exibir</th>
                                <th>Produto</th>
                                <th>Grupo</th>
                                <th class="text-end">Preço</th>
                                <th class="text-center">Estoque</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for p in produtos %}
                            <tr>
                                <td class="text-center">
                                    <input class="form-check-input produto-checkbox" type="checkbox" name="produto_ids" value="{{ p.id }}"
                                           {% if p.venda_food %}checked{% endif %}>
                                </td>
                                <td>
                                    <div class="fw-semibold">{{ p.nome }}</div>
                                    <small class="text-muted">Código: {{ p.codigo_produto or '-' }}</small>
                                </td>
                                <td>{{ p.grupo.nome if p.grupo else '-' }}</td>
                                <td class="text-end">R$ {{ '%.2f'|format(p.valor_venda or 0) }}</td>
                                <td class="text-center">
                                    {% if p.controla_estoque %}
                                        {{ '%.2f'|format(p.estoque_atual or 0) }}
                                    {% else %}
                                        <span class="text-muted">N/A</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">
                                    Nenhum produto encontrado com os filtros atuais.
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-end">
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-check-lg"></i> Salvar Cardápio Digital
                </button>
            </div>
        </div>
    </form>
</div>

<script>
function marcarTodos(valor) {
    document.querySelectorAll('.produto-checkbox').forEach(cb => {
        cb.checked = !!valor;
    });
}
</script>
{% endblock %}