{% extends 'base.html' %}

{% block title %}Configuração de Mesas e Comandas - CapeFood{% endblock %}

{% block content %}
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4><i class="bi bi-grid-3x3-gap text-danger"></i> Configuração de Mesas e Comandas</h4>
        <div class="d-flex gap-2">
            <a href="{{ permissoes_app_garcom.urls.home if permissoes_app_garcom and permissoes_app_garcom.urls else url_for('food.dashboard_food') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Voltar ao Food Inicial
            </a>
            <a href="{{ url_for('food.pdv_mesas') }}" class="btn btn-primary">
                <i class="bi bi-grid"></i> Ir para Controle de Mesas
            </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 %}

    <!-- Abas principais -->
    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-mesas">
                <i class="bi bi-grid-3x3"></i> Mesas
                <span class="badge bg-primary ms-1">{{ mesas|selectattr('tipo', 'eq', 'mesa')|list|length if mesas else 0 }}</span>
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-comandas">
                <i class="bi bi-card-text"></i> Comandas
                <span class="badge bg-warning text-dark ms-1">{{ mesas|selectattr('tipo', 'eq', 'comanda')|list|length if mesas else 0 }}</span>
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-config">
                <i class="bi bi-gear"></i> Ambientes e Setores
            </button>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for('food.perfis_garcom_food') }}">
                <i class="bi bi-shield-lock"></i> Perfis App Garçom
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for('food.configuracoes_cardapio_digital') }}">
                <i class="bi bi-menu-app"></i> Cardápio Digital
            </a>
        </li>
    </ul>

    <div class="tab-content">
        <!-- TAB MESAS -->
        <div class="tab-pane fade show active" id="tab-mesas">
            <div class="row">
                <!-- Formulário criar mesas em lote -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <i class="bi bi-plus-circle"></i> Criar Mesas em Lote
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('food.criar_mesas_lote') }}">
                                <div class="row g-2 mb-3">
                                    <div class="col-6">
                                        <label class="form-label small">Número Inicial *</label>
                                        <input type="number" class="form-control" name="numero_inicial" value="1" min="1" required>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label small">Número Final *</label>
                                        <input type="number" class="form-control" name="numero_final" value="10" min="1" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label small">Ambiente</label>
                                    <select class="form-select" name="ambiente_id">
                                        <option value="">-- Sem ambiente --</option>
                                        {% for ambiente in ambientes %}
                                        <option value="{{ ambiente.id }}">{{ ambiente.nome }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label small">Capacidade (lugares)</label>
                                    <input type="number" class="form-control" name="capacidade" value="4" min="1">
                                </div>
                                <button type="submit" class="btn btn-success w-100">
                                    <i class="bi bi-plus-lg"></i> Criar Mesas
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- Estatísticas Mesas -->
                    <div class="card mt-3">
                        <div class="card-body p-2">
                            <div class="row text-center">
                                <div class="col-3">
                                    <div class="fs-5 fw-bold text-primary">{{ mesas|selectattr('tipo', 'eq', 'mesa')|list|length }}</div>
                                    <small class="text-muted">Total</small>
                                </div>
                                <div class="col-3">
                                    <div class="fs-5 fw-bold text-success">{{ mesas|selectattr('tipo', 'eq', 'mesa')|selectattr('status', 'eq', 'livre')|list|length }}</div>
                                    <small class="text-muted">Livres</small>
                                </div>
                                <div class="col-3">
                                    <div class="fs-5 fw-bold text-danger">{{ mesas|selectattr('tipo', 'eq', 'mesa')|selectattr('status', 'eq', 'ocupada')|list|length }}</div>
                                    <small class="text-muted">Ocupadas</small>
                                </div>
                                <div class="col-3">
                                    <div class="fs-5 fw-bold text-warning">{{ mesas|selectattr('tipo', 'eq', 'mesa')|selectattr('status', 'eq', 'reservada')|list|length }}</div>
                                    <small class="text-muted">Reserv.</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Lista de Mesas -->
                <div class="col-md-8">
                    <div class="card mb-3 border-info">
                        <div class="card-header bg-info text-white">
                            <i class="bi bi-person-badge"></i> Garçom fixo por mesa
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('food.salvar_garcom_fixo_mesas_food') }}" id="formGarcomFixoMesas">
                                <div class="row g-2 align-items-end">
                                    <div class="col-md-6">
                                        <label class="form-label small fw-bold">Garçom responsável</label>
                                        <select class="form-select" name="garcom_fixo_usuario_id">
                                            <option value="">-- Remover vínculo fixo --</option>
                                            {% for usuario in usuarios_garcom if usuario.id and usuario.disponivel %}
                                            <option value="{{ usuario.id }}">{{ usuario.nome or usuario.username }}{% if usuario.perfil_food_nome %} · {{ usuario.perfil_food_nome }}{% endif %}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check mt-4 pt-2">
                                            <input class="form-check-input" type="checkbox" value="on" id="aplicarComandasAbertas" name="aplicar_comandas_abertas">
                                            <label class="form-check-label small" for="aplicarComandasAbertas">
                                                Repasse também os atendimentos já abertos
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-2 d-grid">
                                        <button type="submit" class="btn btn-info text-white">
                                            <i class="bi bi-check2-square"></i> Aplicar
                                        </button>
                                    </div>
                                </div>
                                <div class="form-text mt-2">
                                    Selecione as mesas abaixo para definir quem atende de forma fixa. Ao abrir uma mesa vinculada, o app do garçom passa a respeitar esse responsável.
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-grid-3x3"></i> Mesas Cadastradas</span>
                            <form method="POST" action="{{ url_for('food.excluir_todas_mesas') }}" style="display:inline;">
                                <input type="hidden" name="tipo" value="mesa">
                                <button type="submit" class="btn btn-outline-danger btn-sm" 
                                        onclick="return confirm('Excluir TODAS as mesas livres?')">
                                    <i class="bi bi-trash"></i> Limpar Todas
                                </button>
                            </form>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                <table class="table table-hover table-sm mb-0">
                                    <thead class="table-light sticky-top">
                                        <tr>
                                            <th class="text-center" style="width:40px;">
                                                <input type="checkbox" class="form-check-input" id="selecionarTodasMesas">
                                            </th>
                                            <th>Nº</th>
                                            <th>Ambiente</th>
                                            <th>Garçom fixo</th>
                                            <th class="text-center">Capacidade</th>
                                            <th class="text-center">Status</th>
                                            <th class="text-center">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for mesa in mesas if mesa.tipo == 'mesa' or not mesa.tipo %}
                                        <tr>
                                            <td class="text-center align-middle">
                                                <input type="checkbox"
                                                       class="form-check-input mesa-checkbox"
                                                       name="mesa_ids"
                                                       value="{{ mesa.id }}"
                                                       form="formGarcomFixoMesas">
                                            </td>
                                            <td><strong class="fs-6">{{ mesa.numero }}</strong></td>
                                            <td>
                                                {% if mesa.ambiente %}
                                                    <span class="badge bg-primary">{{ mesa.ambiente.nome }}</span>
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if mesa.garcom_fixo %}
                                                    <span class="badge bg-info text-dark">{{ mesa.garcom_fixo.username }}</span>
                                                {% else %}
                                                    <span class="text-muted small">Livre</span>
                                                {% endif %}
                                            </td>
                                            <td class="text-center">
                                                <i class="bi bi-people"></i> {{ mesa.capacidade or 4 }}
                                            </td>
                                            <td class="text-center">
                                                {% if mesa.status == 'livre' %}
                                                    <span class="badge bg-success">Livre</span>
                                                {% elif mesa.status == 'ocupada' %}
                                                    <span class="badge bg-danger">Ocupada</span>
                                                {% elif mesa.status == 'reservada' %}
                                                    <span class="badge bg-warning text-dark">Reservada</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">{{ mesa.status }}</span>
                                                {% endif %}
                                            </td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-outline-primary btn-sm py-0"
                                                        onclick="abrirModalQrComanda({{ mesa.id }}, '{{ mesa.numero }}')"
                                                        title="QR Comanda Digital">
                                                    <i class="bi bi-qr-code"></i>
                                                </button>
                                                {% if mesa.status == 'livre' %}
                                                <form method="POST" action="{{ url_for('food.excluir_mesa_form', mesa_id=mesa.id) }}" style="display:inline;">
                                                    <button type="submit" class="btn btn-outline-danger btn-sm py-0" 
                                                            onclick="return confirm('Excluir mesa {{ mesa.numero }}?')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                                {% else %}
                                                <span class="text-muted small">Em uso</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% else %}
                                        <tr>
                                            <td colspan="7" class="text-center py-4 text-muted">
                                                <i class="bi bi-inbox fs-3"></i>
                                                <p class="mb-0">Nenhuma mesa cadastrada</p>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB COMANDAS -->
        <div class="tab-pane fade" id="tab-comandas">
            <div class="row">
                <!-- Formulário criar comandas em lote -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header bg-warning">
                            <i class="bi bi-plus-circle"></i> Criar Comandas em Lote
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('food.criar_comandas_lote') }}">
                                <div class="row g-2 mb-3">
                                    <div class="col-6">
                                        <label class="form-label small">Número Inicial *</label>
                                        <input type="number" class="form-control" name="numero_inicial" value="1" min="1" required>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label small">Número Final *</label>
                                        <input type="number" class="form-control" name="numero_final" value="100" min="1" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label small">Prefixo (opcional)</label>
                                    <input type="text" class="form-control" name="prefixo" placeholder="Ex: C" maxlength="3">
                                    <small class="text-muted">Ex: C001, C002...</small>
                                </div>
                                <button type="submit" class="btn btn-success w-100">
                                    <i class="bi bi-plus-lg"></i> Criar Comandas
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- Estatísticas Comandas -->
                    <div class="card mt-3">
                        <div class="card-body p-2">
                            <div class="row text-center">
                                <div class="col-4">
                                    <div class="fs-5 fw-bold text-warning">{{ mesas|selectattr('tipo', 'eq', 'comanda')|list|length }}</div>
                                    <small class="text-muted">Total</small>
                                </div>
                                <div class="col-4">
                                    <div class="fs-5 fw-bold text-success">{{ mesas|selectattr('tipo', 'eq', 'comanda')|selectattr('status', 'eq', 'livre')|list|length }}</div>
                                    <small class="text-muted">Livres</small>
                                </div>
                                <div class="col-4">
                                    <div class="fs-5 fw-bold text-danger">{{ mesas|selectattr('tipo', 'eq', 'comanda')|selectattr('status', 'eq', 'ocupada')|list|length }}</div>
                                    <small class="text-muted">Em Uso</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Lista de Comandas -->
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-card-text"></i> Comandas Cadastradas</span>
                            <form method="POST" action="{{ url_for('food.excluir_todas_mesas') }}" style="display:inline;">
                                <input type="hidden" name="tipo" value="comanda">
                                <button type="submit" class="btn btn-outline-danger btn-sm" 
                                        onclick="return confirm('Excluir TODAS as comandas livres?')">
                                    <i class="bi bi-trash"></i> Limpar Todas
                                </button>
                            </form>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                <table class="table table-hover table-sm mb-0">
                                    <thead class="table-light sticky-top">
                                        <tr>
                                            <th>Nº Comanda</th>
                                            <th class="text-center">Status</th>
                                            <th class="text-center">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for mesa in mesas if mesa.tipo == 'comanda' %}
                                        <tr>
                                            <td><strong class="fs-6">{{ mesa.numero }}</strong></td>
                                            <td class="text-center">
                                                {% if mesa.status == 'livre' %}
                                                    <span class="badge bg-success">Livre</span>
                                                {% elif mesa.status == 'ocupada' %}
                                                    <span class="badge bg-danger">Em Uso</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">{{ mesa.status }}</span>
                                                {% endif %}
                                            </td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-outline-primary btn-sm py-0"
                                                        onclick="abrirModalQrComanda({{ mesa.id }}, '{{ mesa.numero }}')"
                                                        title="QR Comanda Digital">
                                                    <i class="bi bi-qr-code"></i>
                                                </button>
                                                {% if mesa.status == 'livre' %}
                                                <form method="POST" action="{{ url_for('food.excluir_mesa_form', mesa_id=mesa.id) }}" style="display:inline;">
                                                    <button type="submit" class="btn btn-outline-danger btn-sm py-0" 
                                                            onclick="return confirm('Excluir comanda {{ mesa.numero }}?')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                                {% else %}
                                                <span class="text-muted small">Em uso</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% else %}
                                        <tr>
                                            <td colspan="3" class="text-center py-4 text-muted">
                                                <i class="bi bi-inbox fs-3"></i>
                                                <p class="mb-0">Nenhuma comanda cadastrada</p>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB CONFIGURAÇÕES (Ambientes e Setores) -->
        <div class="tab-pane fade" id="tab-config">
            <div class="card mb-3 border-primary">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-qr-code"></i> Lógica Food + Comanda Digital (QR)</span>
                    <small class="opacity-75">Configuração operacional</small>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('food.salvar_configuracao_comanda_digital') }}">
                        <div class="row g-3 align-items-start">
                            <div class="col-md-4">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="controleMesa" name="controle_mesa_habilitado"
                                           {% if controle_mesa_habilitado %}checked{% endif %}>
                                    <label class="form-check-label" for="controleMesa">
                                        Controle de Mesa
                                    </label>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="controleComandaFisica" name="controle_comanda_fisica_habilitado"
                                           {% if controle_comanda_fisica_habilitado %}checked{% endif %}>
                                    <label class="form-check-label" for="controleComandaFisica">
                                        Controle de Comanda (física)
                                    </label>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="comandaDigitalLoja" name="comanda_digital_loja_habilitada"
                                           {% if comanda_digital_loja_habilitada %}checked{% endif %}>
                                    <label class="form-check-label" for="comandaDigitalLoja">
                                        Controle de Comanda Digital
                                    </label>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="comandaDigitalGrupo" name="comanda_digital_grupo_habilitado"
                                           {% if comanda_digital_grupo_habilitado %}checked{% endif %}>
                                    <label class="form-check-label" for="comandaDigitalGrupo">
                                        Comanda Digital habilitada no grupo
                                    </label>
                                </div>
                                <small class="text-muted d-block mt-2">
                                    A Comanda Digital depende da chave da loja e do grupo.
                                </small>
                            </div>

                            <div class="col-md-8">
                                <label class="form-label fw-bold">Mensagem de boas-vindas (QR)</label>
                                <textarea class="form-control mb-2" id="mensagemBoasVindasComanda" name="mensagem_boas_vindas_comanda" rows="2" maxlength="220" placeholder="Ex.: Seja bem-vindo à CapeSystem">{{ mensagem_boas_vindas_comanda or 'Seja bem-vindo à CapeSystem' }}</textarea>
                                <small class="text-muted d-block mb-3">
                                    Esta mensagem aparece na primeira tela após o cliente ler o QR Code.
                                </small>

                                <div class="row g-2 mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Cor primária (QR)</label>
                                        <input type="color" class="form-control form-control-color w-100" name="comanda_digital_cor_primaria" value="{{ comanda_digital_cor_primaria or '#EF4444' }}" title="Cor principal dos botões e destaques">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Cor de fundo (QR)</label>
                                        <input type="color" class="form-control form-control-color w-100" name="comanda_digital_cor_fundo" value="{{ comanda_digital_cor_fundo or '#F5F7FB' }}" title="Cor de fundo da página da comanda digital">
                                    </div>
                                </div>

                                <div class="row g-2 mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Fonte do título</label>
                                        <select class="form-select" name="comanda_digital_fonte_titulo" id="comandaDigitalFonteTitulo">
                                            <option value="Inter" {% if (comanda_digital_fonte_titulo or 'Inter') == 'Inter' %}selected{% endif %}>Inter</option>
                                            <option value="Segoe UI" {% if comanda_digital_fonte_titulo == 'Segoe UI' %}selected{% endif %}>Segoe UI</option>
                                            <option value="Arial" {% if comanda_digital_fonte_titulo == 'Arial' %}selected{% endif %}>Arial</option>
                                            <option value="Verdana" {% if comanda_digital_fonte_titulo == 'Verdana' %}selected{% endif %}>Verdana</option>
                                            <option value="Poppins" {% if comanda_digital_fonte_titulo == 'Poppins' %}selected{% endif %}>Poppins</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Tamanho do título (px)</label>
                                        <input type="range" class="form-range" min="14" max="36" step="1" name="comanda_digital_tamanho_titulo" id="comandaDigitalTamanhoTitulo" value="{{ comanda_digital_tamanho_titulo or 19 }}">
                                        <small class="text-muted">Valor atual: <strong id="previewTamanhoTituloValor">{{ comanda_digital_tamanho_titulo or 19 }}px</strong></small>
                                    </div>
                                </div>
                                <small class="text-muted d-block mb-3">
                                    Dica: use cores da identidade visual do cliente para deixar a experiência mais personalizada.
                                </small>

                                <div class="card border-0 shadow-sm mb-3">
                                    <div class="card-body" style="background:#f8fafc; border:1px dashed #cbd5e1; border-radius:10px;">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <label class="form-label fw-bold mb-0">Preview ao vivo (QR)</label>
                                            <button type="button" id="btnRestaurarTemaComanda" class="btn btn-outline-secondary btn-sm">
                                                Restaurar padrão
                                            </button>
                                        </div>
                                        <div id="previewComandaDigital" style="
                                            border-radius: 12px;
                                            border: 1px solid #e2e8f0;
                                            padding: 14px;
                                            background: {{ comanda_digital_cor_fundo or '#F5F7FB' }};
                                        ">
                                            <div style="
                                                background: linear-gradient(135deg, #fff, #fff5f5);
                                                border: 1px solid #fecaca;
                                                border-radius: 10px;
                                                padding: 10px;
                                            ">
                                                <div style="font-weight:700; color:#0f172a; margin-bottom:6px;">🍽️ Bem-vindo</div>
                                                <div id="previewMensagemBoasVindas" style="font-weight:800; font-size:1.04rem; color:#7f1d1d; margin-bottom:8px;">
                                                    {{ mensagem_boas_vindas_comanda or 'Seja bem-vindo à CapeSystem' }}
                                                </div>
                                                <button type="button" id="previewBotaoComanda" class="btn btn-sm" style="background: {{ comanda_digital_cor_primaria or '#EF4444' }}; color:#fff; border:0; border-radius:8px; font-weight:700;">
                                                    Continuar
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label fw-bold mb-0">Mesa padrão para QR</label>
                                </div>
                                <div class="input-group mb-2">
                                    <select class="form-select" id="mesaQrPadraoMesaId" name="mesa_qr_padrao_mesa_id">
                                        <option value="">-- Selecione (opcional) --</option>
                                        {% for mesa in mesas if mesa.ativo and (mesa.tipo == 'mesa' or not mesa.tipo) %}
                                        <option value="{{ mesa.id }}"
                                                data-numero="{{ mesa.numero }}"
                                                {% if mesa_qr_padrao_mesa_id and mesa_qr_padrao_mesa_id == mesa.id %}selected{% endif %}>
                                            Mesa {{ mesa.numero }}
                                            {% if mesa.ambiente %} - {{ mesa.ambiente.nome }}{% endif %}
                                        </option>
                                        {% endfor %}
                                    </select>
                                    <button class="btn btn-outline-primary" type="button" onclick="abrirQrPadraoSelecionado('mesa')">
                                        <i class="bi bi-qr-code"></i> Gerar QR
                                    </button>
                                </div>

                                <label class="form-label fw-bold mt-3">Comanda física padrão para QR</label>
                                <div class="input-group mb-2">
                                    <select class="form-select" id="mesaQrPadraoComandaId" name="mesa_qr_padrao_comanda_id">
                                        <option value="">-- Selecione (opcional) --</option>
                                        {% for mesa in mesas if mesa.ativo and mesa.tipo == 'comanda' %}
                                        <option value="{{ mesa.id }}"
                                                data-numero="{{ mesa.numero }}"
                                                {% if mesa_qr_padrao_comanda_id and mesa_qr_padrao_comanda_id == mesa.id %}selected{% endif %}>
                                            Comanda física {{ mesa.numero }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                    <button class="btn btn-outline-primary" type="button" onclick="abrirQrPadraoSelecionado('comanda')">
                                        <i class="bi bi-qr-code"></i> Gerar QR
                                    </button>
                                </div>

                                <small class="text-muted d-block">
                                    Defina números padrão separados para mesa e comanda física.
                                </small>

                                <label class="form-label fw-bold mt-3">Setor padrão de expedição / balcão</label>
                                <select class="form-select mb-2" id="setorExpedicaoId" name="setor_expedicao_id">
                                    <option value="">-- Detectar automaticamente --</option>
                                    {% for setor in setores %}
                                    <option value="{{ setor.id }}" {% if setor_expedicao_id and setor_expedicao_id == setor.id %}selected{% endif %}>
                                        {{ setor.nome }}{% if setor.codigo %} ({{ setor.codigo }}){% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted d-block">
                                    Quando um pedido for marcado como pronto, o ticket será enviado para este setor. Se deixar em branco, o sistema tenta localizar por código/nome.
                                </small>

                                <label class="form-label fw-bold mt-3">Setor padrão do caixa / solicitações financeiras</label>
                                <select class="form-select mb-2" id="setorCaixaId" name="setor_caixa_id">
                                    <option value="">-- Detectar automaticamente --</option>
                                    {% for setor in setores %}
                                    <option value="{{ setor.id }}" {% if setor_caixa_id and setor_caixa_id == setor.id %}selected{% endif %}>
                                        {{ setor.nome }}{% if setor.codigo %} ({{ setor.codigo }}){% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted d-block">
                                    Conferências e demais solicitações financeiras do App do Garçom tentam imprimir primeiro neste setor. Se deixar em branco, o sistema procura automaticamente um setor com código/nome de caixa.
                                </small>
                            </div>
                        </div>

                        <div class="mt-3 d-flex justify-content-end">
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-check-lg"></i> Salvar Configurações
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="row">
                <!-- AMBIENTES -->
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <i class="bi bi-building"></i> Ambientes
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('food.criar_ambiente_form') }}" class="mb-3">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="nome" placeholder="Nome do ambiente (Salão, Terraço...)" required>
                                    <button type="submit" class="btn btn-success">
                                        <i class="bi bi-plus"></i> Criar
                                    </button>
                                </div>
                            </form>
                            
                            <table class="table table-sm table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>Nome</th>
                                        <th class="text-center">Mesas</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ambiente in ambientes %}
                                    <tr>
                                        <td>{{ ambiente.nome }}</td>
                                        <td class="text-center">
                                            <span class="badge bg-secondary">
                                                {{ mesas | selectattr('ambiente_id', 'eq', ambiente.id) | list | length }}
                                            </span>
                                        </td>
                                        <td class="text-end">
                                            <form method="POST" action="{{ url_for('food.excluir_ambiente_form', ambiente_id=ambiente.id) }}" style="display:inline;">
                                                <button type="submit" class="btn btn-outline-danger btn-sm py-0" 
                                                        onclick="return confirm('Excluir ambiente {{ ambiente.nome }}?')">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    {% else %}
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            <i class="bi bi-info-circle"></i> Nenhum ambiente
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- SETORES DE PRODUÇÃO -->
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-warning">
                            <i class="bi bi-fire"></i> Setores de Produção
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('food.criar_setor_form') }}" class="mb-3">
                                <div class="row g-2">
                                    <div class="col-md-5">
                                        <input type="text" class="form-control" name="nome" placeholder="Nome do setor (Cozinha, Bar...)" required>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" class="form-control text-uppercase" name="codigo" maxlength="10" placeholder="Código">
                                    </div>
                                    <div class="col-md-4 d-grid">
                                        <button type="submit" class="btn btn-success">
                                            <i class="bi bi-plus"></i> Criar Setor
                                        </button>
                                    </div>
                                </div>
                                <div class="form-check form-switch mt-2">
                                    <input type="checkbox" class="form-check-input" name="impressao_automatica" id="setorImpressaoAutomatica" checked>
                                    <label class="form-check-label" for="setorImpressaoAutomatica">
                                        Impressão automática ao lançar itens
                                    </label>
                                </div>
                            </form>
                            
                            <table class="table table-sm table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>Nome</th>
                                        <th>Impressora</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for setor in setores %}
                                    <tr>
                                        <td>
                                            <i class="bi bi-circle-fill text-warning"></i>
                                            {{ setor.nome }}
                                            {% if setor.codigo %}
                                            <small class="text-muted">({{ setor.codigo }})</small>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% set impressora_bridge_local = setor.impressora_nome and setor.impressora_nome.startswith('bridge_local::') %}
                                            {% set impressora_nome_exibicao = (setor.impressora_nome or '').replace('bridge_local::', '') %}
                                            {% if setor.impressora_nome or setor.impressora_ip %}
                                            <span class="badge {% if impressora_bridge_local %}bg-primary{% else %}bg-success{% endif %}">
                                                <i class="bi {% if impressora_bridge_local %}bi-laptop{% else %}bi-printer{% endif %}"></i>
                                                {{ impressora_nome_exibicao or setor.impressora_ip }}
                                            </span>
                                            {% if setor.impressora_ip %}
                                            <small class="text-muted ms-1">{{ setor.impressora_ip }}</small>
                                            {% endif %}
                                            {% else %}
                                            <span class="text-muted small">Não configurada</span>
                                            {% endif %}
                                        </td>
                                        <td class="text-end">
                                            <a href="{{ url_for('food.producao_cozinha') }}?setor_id={{ setor.id }}" class="btn btn-outline-dark btn-sm py-0" target="_blank" title="Abrir monitor deste setor">
                                                <i class="bi bi-display"></i>
                                            </a>
                                            <a href="{{ url_for('food.producao_cozinha') }}?setor_id={{ setor.id }}&monitor=1&travado=1" class="btn btn-outline-secondary btn-sm py-0" target="_blank" title="Abrir monitor TV travado neste setor">
                                                <i class="bi bi-tv"></i>
                                            </a>
                                            <button type="button" class="btn btn-outline-primary btn-sm py-0" 
                                                    onclick="abrirModalImpressoraSetor({{ setor.id }}, '{{ setor.nome }}', '{{ setor.impressora_nome or '' }}', '{{ setor.impressora_ip or '' }}')"
                                                    title="Configurar impressora">
                                                <i class="bi bi-printer"></i>
                                            </button>
                                            <form method="POST" action="{{ url_for('food.excluir_setor_form', setor_id=setor.id) }}" style="display:inline;">
                                                <button type="submit" class="btn btn-outline-danger btn-sm py-0" 
                                                        onclick="return confirm('Excluir setor {{ setor.nome }}?')">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    {% else %}
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            <i class="bi bi-info-circle"></i> Nenhum setor
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal QR Comanda Digital -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalQrComanda" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="bi bi-qr-code"></i> QR Comanda Digital</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="mb-2">Mesa/Comanda: <strong id="qrMesaNumero"></strong></p>
                <div id="qrComandaFeedback" class="alert alert-info">Gerando link público...</div>
                <div class="row g-3">
                    <div class="col-md-5 text-center">
                        <img id="qrComandaImagem" src="" alt="QR Code Comanda Digital" class="img-fluid border rounded" style="max-height:260px; display:none;">
                    </div>
                    <div class="col-md-7">
                        <label class="form-label fw-bold" id="qrLabelPublica">URL Pública (VPS)</label>
                        <div class="input-group mb-2">
                            <input type="text" class="form-control" id="qrComandaUrlPublica" readonly>
                            <button class="btn btn-outline-secondary" type="button" onclick="copiarQrUrl('qrComandaUrlPublica')">
                                <i class="bi bi-clipboard"></i>
                            </button>
                        </div>

                        <label class="form-label fw-bold" id="qrLabelLocal">URL Local (fallback)</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="qrComandaUrlLocal" readonly>
                            <button class="btn btn-outline-secondary" type="button" onclick="copiarQrUrl('qrComandaUrlLocal')">
                                <i class="bi bi-clipboard"></i>
                            </button>
                        </div>
                        <small class="text-muted d-block mt-2" id="qrComandaHint">
                            Dica: configure <code>CAPEFOOD_PUBLIC_BASE_URL</code> com a URL do VPS para acesso externo fora do Wi-Fi local.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Configurar Impressora do Setor -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalImpressoraSetor" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title">
                    <i class="bi bi-printer"></i> Configurar Impressora
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="formImpressoraSetor">
                <div class="modal-body">
                    <input type="hidden" name="setor_id" id="setorImpressoraId">
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Setor:</label>
                        <span id="setorImpressoraNome" class="text-primary fw-bold"></span>
                    </div>
                    
                    <div class="mb-3">
                        <label for="impressoraNome" class="form-label">
                            <i class="bi bi-printer"></i> Impressora
                        </label>
                        <div class="input-group">
                            <select class="form-select" id="impressoraNome" name="impressora_nome">
                                <option value="">-- Nenhuma impressora --</option>
                            </select>
                            <button type="button" class="btn btn-outline-secondary" onclick="carregarImpressoras()" title="Atualizar lista">
                                <i class="bi bi-arrow-clockwise" id="iconRecarregar"></i>
                            </button>
                        </div>
                        <small class="text-muted" id="impressoraAjudaTexto">Selecione a impressora instalada no host onde o CapeServer está rodando</small>
                    </div>

                    <div id="impressoraAvisoAmbiente" class="alert alert-warning small d-none mb-3"></div>
                    
                    <div class="mb-3">
                        <label for="impressoraIp" class="form-label">
                            <i class="bi bi-ethernet"></i> IP (Opcional - para impressoras de rede)
                        </label>
                        <input type="text" class="form-control" id="impressoraIp" name="impressora_ip" 
                               placeholder="Ex: 192.168.0.100">
                        <small class="text-muted">Preencha apenas se for impressora de rede (não USB)</small>
                    </div>
                    
                    <div id="impressoraInfo" class="alert alert-success small d-none">
                        <i class="bi bi-check-circle"></i>
                        <span id="impressoraInfoTexto"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-danger" onclick="limparImpressora()">
                        <i class="bi bi-x-lg"></i> Remover
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check-lg"></i> Salvar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let impressorasCarregadas = [];
let impressoraAtualSetor = '';
let modalQrComanda = null;
const FOOD_LOCAL_PRINTER_BRIDGE_PREFIX = 'bridge_local::';
const FOOD_LOCAL_PRINTER_BRIDGE_URLS = [
    'http://127.0.0.1:9876',
    'http://localhost:9876'
];

function ehImpressoraBridgeLocal(nome) {
    return (nome || '').startsWith(FOOD_LOCAL_PRINTER_BRIDGE_PREFIX);
}

function obterNomeImpressoraBridgeLocal(nome) {
    if (!ehImpressoraBridgeLocal(nome)) {
        return (nome || '').trim();
    }
    return (nome || '').slice(FOOD_LOCAL_PRINTER_BRIDGE_PREFIX.length).trim();
}

async function consultarBridgeLocalImpressoras() {
    for (const baseUrl of FOOD_LOCAL_PRINTER_BRIDGE_URLS) {
        try {
            const resposta = await fetch(`${baseUrl}/api/printers`, {
                method: 'GET',
                mode: 'cors',
                cache: 'no-store'
            });

            if (!resposta.ok) {
                continue;
            }

            const data = await resposta.json();
            const impressoras = Array.isArray(data.impressoras) ? data.impressoras : [];
            if (!data.success) {
                continue;
            }

            return {
                ok: true,
                baseUrl,
                impressoras: impressoras.map((imp) => ({
                    nome: `${FOOD_LOCAL_PRINTER_BRIDGE_PREFIX}${imp.nome}`,
                    nome_exibicao: imp.nome,
                    porta: imp.porta || '',
                    padrao: !!imp.padrao,
                    origem: 'bridge_local'
                })),
                message: data.message || ''
            };
        } catch (error) {
            console.debug('[FOOD][BRIDGE_LOCAL] Falha ao consultar bridge local:', baseUrl, error);
        }
    }

    return {
        ok: false,
        baseUrl: '',
        impressoras: [],
        message: 'Bridge local não encontrado nesta estação.'
    };
}

function abrirQrMesaPadraoSelecionada() {
    abrirQrPadraoSelecionado('mesa');
}

function abrirQrPadraoSelecionado(tipo) {
    const select = tipo === 'comanda'
        ? document.getElementById('mesaQrPadraoComandaId')
        : document.getElementById('mesaQrPadraoMesaId');

    if (!select || !select.value) {
        alert(tipo === 'comanda'
            ? 'Selecione uma comanda física padrão para gerar o QR.'
            : 'Selecione uma mesa padrão para gerar o QR.');
        return;
    }

    const option = select.options[select.selectedIndex];
    const mesaNumero = option?.dataset?.numero || option?.textContent?.trim() || select.value;
    abrirModalQrComanda(select.value, mesaNumero);
}

function abrirModalQrComanda(mesaId, mesaNumero) {
    document.getElementById('qrMesaNumero').textContent = mesaNumero;
    document.getElementById('qrComandaFeedback').className = 'alert alert-warning';
    document.getElementById('qrComandaFeedback').innerHTML =
        '<strong>⚠️ Atenção:</strong> Este QR é válido por <strong>5 anos</strong>. ' +
        'Se você imprimir e plastificar, ele continua funcionando. ' +
        'Mas se fechar e abrir este painel novamente, o link pode ser regenerado — ' +
        'nesse caso, QR codes já impressos desta mesa precisarão ser reimpressos.';
    document.getElementById('qrComandaUrlPublica').value = '';
    document.getElementById('qrComandaUrlLocal').value = '';
    document.getElementById('qrLabelPublica').textContent = 'URL Pública (VPS)';
    document.getElementById('qrLabelLocal').textContent = 'URL Local (fallback)';
    document.getElementById('qrComandaHint').innerHTML = 'Dica: use <code>CAPEFOOD_PUBLIC_SHARED_BASE_URL</code> + <code>CAPEFOOD_PUBLIC_ROUTING_MODE=path</code> para links no padrão <code>sync.../loja</code>, ou configure subdomínio automático.';
    document.getElementById('qrComandaImagem').style.display = 'none';

    if (!modalQrComanda) {
        modalQrComanda = new bootstrap.Modal(document.getElementById('modalQrComanda'));
    }
    modalQrComanda.show();

    // Pequeno delay para o aviso ser lido antes de sobrescrever com o resultado
    setTimeout(() => {
        const feedbackEl = document.getElementById('qrComandaFeedback');
        if (feedbackEl && !feedbackEl.querySelector('img')) {
            feedbackEl.className = 'alert alert-info';
            feedbackEl.textContent = 'Gerando link público...';
        }
    }, 2000);

    fetch(`/food/api/mesas/${mesaId}/qrcode-publico`)
        .then(r => r.json())
        .then(data => {
            if (!data.success) {
                throw new Error(data.message || 'Falha ao gerar QR');
            }

            const urlPublica = data.url_publica || '';
            const urlLocal = data.url_local || '';
            const webPublicaOk = !!data.web_publica_ok;
            const webPublicaMsg = (data.web_publica_mensagem || '').trim();
            const baseFonte = (data.base_publica_fonte || '').trim();
            document.getElementById('qrComandaUrlPublica').value = urlPublica;
            document.getElementById('qrComandaUrlLocal').value = urlLocal;

            const labelPublica = document.getElementById('qrLabelPublica');
            const labelLocal = document.getElementById('qrLabelLocal');
            const hint = document.getElementById('qrComandaHint');

            if (webPublicaOk) {
                labelPublica.textContent = 'URL Pública (Internet)';
                labelLocal.textContent = 'URL Local (fallback)';
                let origem = 'Origem: base pública detectada.';
                if (baseFonte === 'empresa_sync_url') {
                    origem = 'Origem: configuração Sync da empresa.';
                } else if (baseFonte === 'shared_base_path_loja') {
                    origem = 'Origem: base compartilhada + path da loja.';
                } else if (baseFonte === 'shared_base_subdominio_loja') {
                    origem = 'Origem: base compartilhada + subdomínio da loja.';
                } else if (baseFonte === 'subdominio_auto_loja') {
                    origem = 'Origem: subdomínio automático por loja.';
                } else if (baseFonte === 'sync_global_config') {
                    origem = 'Origem: configuração global do Sync.';
                } else if (baseFonte === 'env_public_base_url') {
                    origem = 'Origem: CAPEFOOD_PUBLIC_BASE_URL.';
                }
                hint.innerHTML = `A URL pública está pronta para acesso externo. Compartilhe este link/QR fora da rede local normalmente. <br><small>${origem}</small>`;
            } else {
                labelPublica.textContent = 'URL de Rede Local (LAN)';
                labelLocal.textContent = 'URL Local (mesma rede)';
                hint.innerHTML = 'Para acesso externo (4G/5G ou outra rede), configure: <br>1) <code>CAPEFOOD_PUBLIC_SHARED_BASE_URL=https://sync.seudominio.com</code> + <code>CAPEFOOD_PUBLIC_ROUTING_MODE=path</code> (gera <code>/loja/food/...</code>), ou <br>2) wildcard via subdomínio.';
            }

            const img = document.getElementById('qrComandaImagem');
            const urlQr = webPublicaOk ? (urlPublica || urlLocal) : (urlLocal || urlPublica);
            img.src = `https://api.qrserver.com/v1/create-qr-code/?size=320x320&data=${encodeURIComponent(urlQr)}`;
            img.style.display = 'inline-block';

            const feedback = document.getElementById('qrComandaFeedback');
            if (!webPublicaOk) {
                feedback.className = 'alert alert-warning';
                feedback.textContent = webPublicaMsg || 'QR gerado para rede local. Fora do Wi-Fi local não irá abrir até configurar URL pública.';
            } else {
                feedback.className = 'alert alert-success';
                feedback.textContent = webPublicaMsg || `QR público gerado com sucesso: ${data.base_publica || '-'}`;
            }
        })
        .catch(err => {
            const feedback = document.getElementById('qrComandaFeedback');
            feedback.className = 'alert alert-danger';
            feedback.textContent = err.message || 'Erro ao gerar QR';
        });
}

function copiarQrUrl(inputId) {
    const el = document.getElementById(inputId);
    if (!el || !el.value) return;
    el.select();
    document.execCommand('copy');
}

function carregarImpressoras() {
    const select = document.getElementById('impressoraNome');
    const icon = document.getElementById('iconRecarregar');
    const avisoAmbiente = document.getElementById('impressoraAvisoAmbiente');
    const ajudaTexto = document.getElementById('impressoraAjudaTexto');
    
    // Animação de loading
    icon.classList.add('spin-animation');
    select.innerHTML = '<option value="">Carregando impressoras...</option>';
    avisoAmbiente.classList.add('d-none');
    avisoAmbiente.textContent = '';
    
    Promise.allSettled([
        fetch('/food/api/impressoras', { cache: 'no-store' }).then(r => r.json()),
        consultarBridgeLocalImpressoras()
    ])
        .then((resultados) => {
            icon.classList.remove('spin-animation');

            const dadosServidor = resultados[0]?.status === 'fulfilled' ? (resultados[0].value || {}) : {};
            const dadosBridge = resultados[1]?.status === 'fulfilled' ? (resultados[1].value || {}) : { ok: false, impressoras: [] };

            if (dadosServidor.success || dadosBridge.ok) {
                const listaServidor = Array.isArray(dadosServidor.impressoras)
                    ? dadosServidor.impressoras.map((imp) => ({
                        nome: imp.nome,
                        nome_exibicao: imp.nome,
                        porta: imp.porta || '',
                        padrao: !!imp.padrao,
                        origem: 'servidor'
                    }))
                    : [];
                const listaBridge = Array.isArray(dadosBridge.impressoras) ? dadosBridge.impressoras : [];
                const contexto = dadosServidor.contexto || {};
                const avisoServidor = (dadosServidor.message || '').trim();
                const avisoBridge = (dadosBridge.message || '').trim();
                impressorasCarregadas = [...listaBridge, ...listaServidor];
                
                // Limpar opções
                let opcaoVazia = '-- Nenhuma impressora --';
                if (!impressorasCarregadas.length && contexto.acesso_publico) {
                    opcaoVazia = '-- Nenhuma impressora detectada no servidor cloud --';
                } else if (!impressorasCarregadas.length) {
                    opcaoVazia = '-- Nenhuma impressora detectada neste servidor --';
                }
                select.innerHTML = `<option value="">${opcaoVazia}</option>`;
                
                // Adicionar impressoras
                impressorasCarregadas.forEach(imp => {
                    const option = document.createElement('option');
                    option.value = imp.nome;
                    option.textContent = imp.nome_exibicao + (imp.padrao ? ' ⭐ (Padrão)' : '');
                    if (imp.porta) {
                        option.textContent += ` [${imp.porta}]`;
                    }
                    if (imp.origem === 'bridge_local') {
                        option.textContent += ' [Esta estação]';
                    } else if (imp.origem === 'servidor') {
                        option.textContent += ' [Servidor]';
                    }
                    select.appendChild(option);
                });
                
                // Selecionar a atual se houver
                if (impressoraAtualSetor) {
                    select.value = impressoraAtualSetor;
                }
                
                // Se não encontrou mas tem valor, adicionar como opção
                if (impressoraAtualSetor && !select.value) {
                    const option = document.createElement('option');
                    option.value = impressoraAtualSetor;
                    option.textContent = `${obterNomeImpressoraBridgeLocal(impressoraAtualSetor) || impressoraAtualSetor} (não encontrada)`;
                    select.appendChild(option);
                    select.value = impressoraAtualSetor;
                }

                if (dadosBridge.ok) {
                    ajudaTexto.textContent = `Impressoras desta estação carregadas via bridge local (${dadosBridge.baseUrl}). Você também pode usar IP para impressora de rede.`;
                } else if (contexto.acesso_publico) {
                    ajudaTexto.textContent = 'No cloud, o combo lista apenas impressoras do servidor. Para a loja, use impressora de rede por IP ou instale o bridge local nesta estação.';
                } else {
                    ajudaTexto.textContent = 'Selecione a impressora instalada no host onde o CapeServer está rodando';
                }

                const avisos = [avisoServidor, (!dadosBridge.ok && contexto.acesso_publico) ? avisoBridge : ''].filter(Boolean);
                if (avisos.length) {
                    avisoAmbiente.textContent = avisos.join(' ');
                    avisoAmbiente.classList.remove('d-none');
                }
            }
        })
        .catch(err => {
            icon.classList.remove('spin-animation');
            console.error('Erro ao carregar impressoras:', err);
            select.innerHTML = '<option value="">Erro ao carregar impressoras</option>';
            ajudaTexto.textContent = 'Não foi possível consultar as impressoras do servidor neste momento.';
            avisoAmbiente.textContent = 'Falha ao consultar a lista de impressoras. Se estiver no cloud, use o IP da impressora de rede ou verifique a integração local.';
            avisoAmbiente.classList.remove('d-none');
        });
}

function abrirModalImpressoraSetor(setorId, nome, impressoraNome, impressoraIp) {
    document.getElementById('setorImpressoraId').value = setorId;
    document.getElementById('setorImpressoraNome').textContent = nome;
    document.getElementById('impressoraIp').value = impressoraIp || '';
    
    // Guardar impressora atual para selecionar após carregar lista
    impressoraAtualSetor = impressoraNome || '';
    
    // Definir action do form
    document.getElementById('formImpressoraSetor').action = `/food/configuracoes/setores/${setorId}/impressora`;
    
    // Carregar impressoras
    carregarImpressoras();
    
    // Mostrar modal
    new bootstrap.Modal(document.getElementById('modalImpressoraSetor')).show();
}

function limparImpressora() {
    document.getElementById('impressoraNome').value = '';
    document.getElementById('impressoraIp').value = '';
}

// Mostrar info da porta quando selecionar impressora
document.getElementById('impressoraNome').addEventListener('change', function() {
    const nome = this.value;
    const infoDiv = document.getElementById('impressoraInfo');
    const infoTexto = document.getElementById('impressoraInfoTexto');
    
    if (nome) {
        const imp = impressorasCarregadas.find(i => i.nome === nome);
        if (imp && imp.porta) {
            // Se porta parece ser IP, sugerir
            if (imp.porta.match(/\d+\.\d+\.\d+\.\d+/)) {
                document.getElementById('impressoraIp').value = imp.porta.replace(/:.+/, '');
                infoTexto.textContent = `Porta: ${imp.porta} - IP preenchido automaticamente`;
            } else {
                infoTexto.textContent = ehImpressoraBridgeLocal(nome)
                    ? `Bridge local desta estação · Porta/Fila: ${imp.porta}`
                    : `Porta: ${imp.porta}`;
            }
            infoDiv.classList.remove('d-none');
        } else if (ehImpressoraBridgeLocal(nome)) {
            infoTexto.textContent = 'Impressora local da estação via bridge localhost';
            infoDiv.classList.remove('d-none');
        } else {
            infoDiv.classList.add('d-none');
        }
    } else {
        infoDiv.classList.add('d-none');
    }
});

function atualizarPreviewComandaDigital() {
    const inputMensagem = document.getElementById('mensagemBoasVindasComanda');
    const inputCorPrimaria = document.querySelector('input[name="comanda_digital_cor_primaria"]');
    const inputCorFundo = document.querySelector('input[name="comanda_digital_cor_fundo"]');
    const inputFonteTitulo = document.querySelector('select[name="comanda_digital_fonte_titulo"]');
    const inputTamanhoTitulo = document.querySelector('input[name="comanda_digital_tamanho_titulo"]');

    const previewBox = document.getElementById('previewComandaDigital');
    const previewMensagem = document.getElementById('previewMensagemBoasVindas');
    const previewBotao = document.getElementById('previewBotaoComanda');
    const previewTamanhoTituloValor = document.getElementById('previewTamanhoTituloValor');

    if (!previewBox || !previewMensagem || !previewBotao) return;

    const mensagem = (inputMensagem?.value || '').trim() || 'Seja bem-vindo à CapeSystem';
    const corPrimaria = (inputCorPrimaria?.value || '#EF4444');
    const corFundo = (inputCorFundo?.value || '#F5F7FB');
    const fonteTitulo = (inputFonteTitulo?.value || 'Inter');
    const tamanhoTitulo = Number(inputTamanhoTitulo?.value || 19);

    previewMensagem.textContent = mensagem;
    previewBotao.style.background = corPrimaria;
    previewBox.style.background = corFundo;
    previewMensagem.style.fontFamily = `${fonteTitulo}, Inter, Arial, sans-serif`;
    previewMensagem.style.fontSize = `${tamanhoTitulo}px`;
    if (previewTamanhoTituloValor) {
        previewTamanhoTituloValor.textContent = `${tamanhoTitulo}px`;
    }
}

function restaurarTemaComandaPadrao() {
    const inputMensagem = document.getElementById('mensagemBoasVindasComanda');
    const inputCorPrimaria = document.querySelector('input[name="comanda_digital_cor_primaria"]');
    const inputCorFundo = document.querySelector('input[name="comanda_digital_cor_fundo"]');
    const inputFonteTitulo = document.querySelector('select[name="comanda_digital_fonte_titulo"]');
    const inputTamanhoTitulo = document.querySelector('input[name="comanda_digital_tamanho_titulo"]');

    if (inputMensagem) inputMensagem.value = 'Seja bem-vindo à CapeSystem';
    if (inputCorPrimaria) inputCorPrimaria.value = '#EF4444';
    if (inputCorFundo) inputCorFundo.value = '#F5F7FB';
    if (inputFonteTitulo) inputFonteTitulo.value = 'Inter';
    if (inputTamanhoTitulo) inputTamanhoTitulo.value = '19';

    atualizarPreviewComandaDigital();
}

document.getElementById('mensagemBoasVindasComanda')?.addEventListener('input', atualizarPreviewComandaDigital);
document.querySelector('input[name="comanda_digital_cor_primaria"]')?.addEventListener('input', atualizarPreviewComandaDigital);
document.querySelector('input[name="comanda_digital_cor_fundo"]')?.addEventListener('input', atualizarPreviewComandaDigital);
document.querySelector('select[name="comanda_digital_fonte_titulo"]')?.addEventListener('change', atualizarPreviewComandaDigital);
document.querySelector('input[name="comanda_digital_tamanho_titulo"]')?.addEventListener('input', atualizarPreviewComandaDigital);
document.getElementById('btnRestaurarTemaComanda')?.addEventListener('click', restaurarTemaComandaPadrao);

document.getElementById('selecionarTodasMesas')?.addEventListener('change', function() {
    document.querySelectorAll('.mesa-checkbox').forEach((checkbox) => {
        checkbox.checked = this.checked;
    });
});

atualizarPreviewComandaDigital();
</script>

<style>
.spin-animation {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>

{% endblock %}