{% extends "base.html" %}

{% block title %}Central do App do Garçom{% endblock %}

{% block extra_css %}
<style>
    .garcom-central-shell {
        padding: 1.2rem 0 2rem;
        background:
            radial-gradient(circle at top left, rgba(245, 158, 11, 0.14), transparent 25%),
            radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 25%),
            linear-gradient(180deg, #fffaf4 0%, #fff7ed 55%, #fff 100%);
        min-height: calc(100vh - 120px);
    }

    .garcom-card {
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 24px;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
        overflow: hidden;
    }

    .garcom-hero {
        padding: 1.35rem 1.45rem;
        background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,247,237,0.96));
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    }

    .garcom-title {
        font-size: 1.35rem;
        font-weight: 800;
        color: #111827;
        margin-bottom: 0.35rem;
    }

    .garcom-subtitle {
        color: #6b7280;
        margin-bottom: 0;
    }

    .garcom-pill-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        margin-top: 0.9rem;
    }

    .garcom-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.42rem 0.8rem;
        border-radius: 999px;
        background: rgba(245, 158, 11, 0.12);
        color: #92400e;
        font-size: 0.82rem;
        font-weight: 700;
    }

    .garcom-body {
        padding: 1.4rem;
    }

    .qr-card,
    .info-card,
    .action-card {
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,250,251,0.98));
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
        height: 100%;
    }

    .qr-card {
        padding: 1.25rem;
        text-align: center;
    }

    .qr-action {
        margin-top: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        min-width: 220px;
        border-radius: 14px;
        padding: 0.78rem 1rem;
        font-weight: 700;
    }

    .qr-helper {
        margin-top: 0.85rem;
        color: #64748b;
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .qr-image-shell {
        border-radius: 24px;
        background: white;
        border: 1px dashed rgba(245, 158, 11, 0.35);
        padding: 1rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-width: 260px;
        min-height: 260px;
        max-width: 100%;
    }

    .qr-image-shell img {
        width: min(260px, 100%);
        height: auto;
        display: block;
    }

    .qr-empty {
        color: #9ca3af;
        font-weight: 700;
        max-width: 240px;
    }

    .card-section-title {
        font-size: 1rem;
        font-weight: 800;
        color: #111827;
        margin-bottom: 0.35rem;
    }

    .card-section-subtitle {
        color: #6b7280;
        margin-bottom: 1rem;
        font-size: 0.92rem;
    }

    .info-card,
    .action-card {
        padding: 1.2rem;
    }

    .url-box {
        background: #f8fafc;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 16px;
        padding: 0.85rem;
        font-family: Consolas, 'Courier New', monospace;
        font-size: 0.88rem;
        color: #0f172a;
        word-break: break-all;
    }

    .meta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
        margin-top: 1rem;
    }

    .meta-item {
        border-radius: 16px;
        padding: 0.85rem 0.95rem;
        background: #fffaf0;
        border: 1px solid rgba(245, 158, 11, 0.18);
    }

    .meta-item span {
        display: block;
        font-size: 0.76rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #9a3412;
        font-weight: 800;
        margin-bottom: 0.2rem;
    }

    .meta-item strong {
        color: #111827;
        font-size: 0.96rem;
    }

    .action-list {
        display: grid;
        gap: 0.75rem;
    }

    .action-list .btn {
        border-radius: 14px;
        padding: 0.8rem 1rem;
        font-weight: 700;
    }

    .print-hint {
        margin-top: 0.85rem;
        color: #64748b;
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .howto-list {
        display: grid;
        gap: 0.75rem;
        margin: 0;
        padding-left: 1.2rem;
        color: #475569;
    }

    .helper-note {
        margin-top: 1rem;
        border-radius: 16px;
        padding: 0.95rem 1rem;
        background: #eff6ff;
        border: 1px solid rgba(59, 130, 246, 0.16);
        color: #1d4ed8;
        font-weight: 600;
    }

    @media (max-width: 767.98px) {
        .garcom-body {
            padding: 1rem;
        }

        .qr-image-shell {
            min-width: 100%;
            min-height: auto;
        }

        .meta-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="garcom-central-shell">
    <div class="container-fluid">
        <div class="garcom-card">
            <div class="garcom-hero">
                <div class="d-flex flex-wrap align-items-start gap-3">
                    <div class="me-auto">
                        <div class="garcom-title"><i class="fas fa-mobile-alt text-warning me-2"></i>Central do App do Garçom</div>
                        <p class="garcom-subtitle">Agora o atalho virou uma central rápida: link local do servidor, QR Code e atalhos de operação em um ponto só.</p>
                    </div>
                    <a href="{{ permissoes_app_garcom.urls.home }}" class="btn btn-outline-secondary rounded-pill px-3">
                        <i class="fas fa-arrow-left me-1"></i>Voltar ao Food
                    </a>
                </div>
                <div class="garcom-pill-group">
                    <span class="garcom-pill"><i class="fas fa-wifi"></i> Use no mesmo Wi-Fi/rede do servidor</span>
                    <span class="garcom-pill"><i class="fas fa-qrcode"></i> QR pronto para escanear</span>
                    <span class="garcom-pill"><i class="fas fa-link"></i> Link direto para abrir o app</span>
                </div>
            </div>

            <div class="garcom-body">
                <div class="row g-4 align-items-stretch">
                    <div class="col-lg-5">
                        <div class="qr-card">
                            <div class="card-section-title">QR Code de acesso</div>
                            <p class="card-section-subtitle">O garçom pode escanear e abrir a tela operacional direto no celular.</p>
                            <div class="qr-image-shell">
                                {% if acesso_app_garcom.qrcode_base64 %}
                                    <img src="data:image/png;base64,{{ acesso_app_garcom.qrcode_base64 }}" alt="QR Code do App do Garçom">
                                {% else %}
                                    <div class="qr-empty">
                                        <i class="fas fa-triangle-exclamation fa-2x mb-3 d-block"></i>
                                        Não foi possível gerar o QR Code agora, mas o link abaixo continua disponível.
                                    </div>
                                {% endif %}
                            </div>
                            <button type="button" class="btn btn-outline-success qr-action" onclick="imprimirQrGarcom80mm()">
                                <i class="fas fa-print"></i> Imprimir QR 80mm
                            </button>
                            <div class="qr-helper">
                                Gera uma impressão simples do QR Code em <strong>bobina térmica 80mm</strong>, pronta para deixar no balcão, caixa ou apoio do garçom.
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-7">
                        <div class="info-card mb-4">
                            <div class="card-section-title">Endereço da rede local do servidor</div>
                            <p class="card-section-subtitle">Este link usa o endereço LAN detectado no computador servidor para facilitar o acesso do celular.</p>

                            <div class="url-box" id="garcom-app-url">{{ acesso_app_garcom.url_app }}</div>

                            <div class="meta-grid">
                                <div class="meta-item">
                                    <span>IP/Host local</span>
                                    <strong>{{ acesso_app_garcom.host or 'Não identificado' }}</strong>
                                </div>
                                <div class="meta-item">
                                    <span>Porta</span>
                                    <strong>{{ acesso_app_garcom.porta or 'Padrão' }}</strong>
                                </div>
                                <div class="meta-item">
                                    <span>Origem do host</span>
                                    <strong>{{ acesso_app_garcom.origem_host }}</strong>
                                </div>
                                <div class="meta-item">
                                    <span>Rota operacional</span>
                                    <strong>{{ url_for('food.garcom_mobile_app') }}</strong>
                                </div>
                            </div>

                            <div class="helper-note">
                                <i class="fas fa-circle-info me-2"></i>
                                Se o celular não abrir, confirme se ele está na mesma rede do servidor e se a porta do sistema está liberada no Windows/firewall.
                            </div>
                        </div>

                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="action-card h-100">
                                    <div class="card-section-title">Ações rápidas</div>
                                    <p class="card-section-subtitle">Navegação mais enxuta, sem cair direto na tela operacional.</p>
                                    <div class="action-list">
                                        <a href="{{ url_for('food.garcom_mobile_app') }}" class="btn btn-warning text-dark">
                                            <i class="fas fa-mobile-screen-button me-2"></i>Abrir tela do garçom
                                        </a>
                                        <button type="button" class="btn btn-outline-primary" onclick="copiarLinkGarcom()">
                                            <i class="fas fa-copy me-2"></i>Copiar link
                                        </button>
                                        <a href="{{ url_for('food.perfis_garcom_food') }}" class="btn btn-outline-dark">
                                            <i class="fas fa-user-shield me-2"></i>Perfis do App
                                        </a>
                                        <a href="{{ url_for('food.configuracoes_mesas') }}" class="btn btn-outline-secondary">
                                            <i class="fas fa-cog me-2"></i>Configurar mesas
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="action-card h-100">
                                    <div class="card-section-title">Como usar</div>
                                    <p class="card-section-subtitle">Fluxo rápido para a equipe de atendimento.</p>
                                    <ol class="howto-list">
                                        <li>Conecte o celular do garçom na mesma rede do servidor.</li>
                                        <li>Escaneie o QR Code ou copie o link local.</li>
                                        <li>Abra a rota do app e faça login normalmente.</li>
                                        <li>Se mudar a rede/porta, recarregue esta central para atualizar o endereço.</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const dadosImpressaoGarcom = {{ acesso_app_garcom|tojson }};

async function copiarLinkGarcom() {
    const target = document.getElementById('garcom-app-url');
    const texto = (target?.textContent || '').trim();

    if (!texto) {
        alert('Link do App do Garçom não disponível no momento.');
        return;
    }

    try {
        await navigator.clipboard.writeText(texto);
        alert('Link copiado com sucesso.');
    } catch (error) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(target);
        selection.removeAllRanges();
        selection.addRange(range);
        alert('Não consegui copiar automaticamente. O link foi selecionado para você copiar manualmente.');
    }
}

function escaparHtmlImpressao(valor) {
    return String(valor ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

function imprimirQrGarcom80mm() {
    const dados = dadosImpressaoGarcom || {};
    const qrBase64 = String(dados.qrcode_base64 || '').trim();
    const empresaNome = String(dados.empresa_nome || 'CapeFood').trim() || 'CapeFood';
    const urlApp = String(dados.url_app || '').trim();
    const host = String(dados.host || '').trim() || '-';
    const porta = dados.porta || 'Padrão';
    const origemHost = String(dados.origem_host || '').trim() || '-';
    const rotaOperacional = '/food/garcom/app';

    const popup = window.open('', '_blank', 'width=420,height=720');
    if (!popup) {
        alert('Permita pop-ups do navegador para imprimir em 80mm.');
        return;
    }

    const qrHtml = qrBase64
        ? `<div class="qr-wrap"><img src="data:image/png;base64,${qrBase64}" alt="QR Code App Garçom"></div>`
        : '<div class="qr-wrap qr-empty">QR indisponível</div>';

    const html = `
        <!DOCTYPE html>
        <html lang="pt-BR">
        <head>
            <meta charset="UTF-8">
            <title>App Garçom 80mm</title>
            <style>
                @page { size: 80mm auto; margin: 4mm 3mm; }
                * { box-sizing: border-box; }
                body {
                    margin: 0 auto;
                    width: 80mm;
                    max-width: 80mm;
                    font-family: 'Courier New', monospace;
                    font-size: 12px;
                    color: #000;
                    padding: 0;
                }
                .cupom {
                    width: 80mm;
                    padding: 4mm 3mm 6mm;
                }
                .center { text-align: center; }
                .titulo {
                    font-size: 15px;
                    font-weight: bold;
                    text-transform: uppercase;
                    margin-bottom: 4px;
                }
                .subtitulo {
                    font-size: 11px;
                    margin-bottom: 8px;
                }
                .divider {
                    border-top: 1px dashed #000;
                    margin: 8px 0;
                }
                .qr-wrap {
                    text-align: center;
                    margin: 10px 0;
                }
                .qr-wrap img {
                    width: 46mm;
                    height: 46mm;
                    display: inline-block;
                }
                .qr-empty {
                    border: 1px dashed #000;
                    padding: 12px 8px;
                    font-weight: bold;
                }
                .bloco {
                    margin-bottom: 8px;
                    word-break: break-word;
                }
                .rotulo {
                    font-weight: bold;
                    text-transform: uppercase;
                }
                .link {
                    border: 1px dashed #000;
                    padding: 6px;
                    line-height: 1.45;
                }
                .rodape {
                    text-align: center;
                    font-size: 10px;
                    margin-top: 10px;
                }
                .no-print {
                    text-align: center;
                    padding: 10px;
                }
                .no-print button {
                    padding: 10px 14px;
                    font-size: 12px;
                    cursor: pointer;
                }
                @media print {
                    .no-print { display: none; }
                    body { margin: 0; }
                }
            </style>
        </head>
        <body>
            <div class="no-print"><button onclick="window.print()">Imprimir 80mm</button></div>
            <div class="cupom">
                <div class="center titulo">App do Garçom</div>
                <div class="center subtitulo">${escaparHtmlImpressao(empresaNome)}</div>
                <div class="divider"></div>
                <div class="center"><strong>Escaneie para abrir</strong></div>
                ${qrHtml}
                <div class="divider"></div>
                <div class="bloco"><span class="rotulo">Link direto:</span></div>
                <div class="bloco link">${escaparHtmlImpressao(urlApp || 'Link não disponível')}</div>
                <div class="divider"></div>
                <div class="bloco"><span class="rotulo">IP/Host:</span> ${escaparHtmlImpressao(host)}</div>
                <div class="bloco"><span class="rotulo">Porta:</span> ${escaparHtmlImpressao(porta)}</div>
                <div class="bloco"><span class="rotulo">Origem:</span> ${escaparHtmlImpressao(origemHost)}</div>
                <div class="bloco"><span class="rotulo">Rota:</span> ${escaparHtmlImpressao(rotaOperacional)}</div>
                <div class="divider"></div>
                <div class="rodape">Use o celular na mesma rede do servidor.</div>
            </div>
            <scr` + `ipt>
                window.onload = function () {
                    setTimeout(function () { window.print(); }, 300);
                };
                window.onafterprint = function () { window.close(); };
            </scr` + `ipt>
        </body>
        </html>
    `;

    popup.document.open();
    popup.document.write(html);
    popup.document.close();
}
</script>
{% endblock %}