{% extends "base.html" %}

{% block title %}Mapa de Atendimento - CapeFood{% endblock %}

{% block extra_css %}
<style>
    @keyframes pulse-soft {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.18); }
        50% { transform: scale(1.01); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0.04); }
    }

    @keyframes shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    @keyframes spin-soft {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes fade-lift {
        from { opacity: 0.2; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .mapa-atendimento-shell {
        padding: 1.2rem 0 2rem;
        background:
            radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 28%),
            radial-gradient(circle at top right, rgba(239, 68, 68, 0.08), transparent 24%),
            linear-gradient(180deg, #f8fafc 0%, #eef2ff 52%, #f8fafc 100%);
        min-height: calc(100vh - 120px);
    }

    .hero-card,
    .panel-card {
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 24px;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    }

    .hero-card {
        padding: 1.4rem 1.5rem;
        margin-bottom: 1.15rem;
    }

    .hero-title {
        font-size: 1.9rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 0.25rem;
    }

    .hero-subtitle {
        color: #64748b;
        margin-bottom: 0;
    }

    .hero-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
        margin-top: 0.85rem;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        border-radius: 999px;
        padding: 0.55rem 0.9rem;
        font-size: 0.82rem;
        font-weight: 700;
        background: rgba(59, 130, 246, 0.08);
        color: #1d4ed8;
    }

    .hero-actions {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
    }

    .hero-status-stack {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .hero-status-card {
        border-radius: 18px;
        padding: 0.9rem 1rem;
        border: 1px solid rgba(191, 219, 254, 0.55);
        background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.92));
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .hero-status-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
    }

    .hero-status-card.success {
        border-color: rgba(110, 231, 183, 0.55);
        background: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(255,255,255,0.92));
    }

    .hero-status-card.warning {
        border-color: rgba(252, 211, 77, 0.55);
        background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255,255,255,0.92));
    }

    .hero-status-card.danger {
        border-color: rgba(252, 165, 165, 0.58);
        background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(255,255,255,0.92));
        animation: pulse-soft 2.6s ease-in-out infinite;
    }

    .hero-status-label {
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
    }

    .hero-status-value {
        margin-top: 0.3rem;
        font-size: 1.05rem;
        font-weight: 800;
        color: #0f172a;
    }

    .hero-status-note {
        margin-top: 0.2rem;
        color: #64748b;
        font-size: 0.76rem;
        font-weight: 600;
    }

    .hero-meta {
        margin-top: 0.85rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
        color: #64748b;
        font-size: 0.82rem;
        font-weight: 700;
    }

    .hero-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
    }

    .hero-meta-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #22c55e;
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
    }

    .hero-actions .btn {
        border-radius: 14px;
        padding: 0.78rem 1.1rem;
        font-weight: 700;
    }

    .panel-card {
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .panel-head {
        padding: 1rem 1.2rem;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95);
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255,255,255,0.9));
    }

    .panel-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
    }

    .panel-subtitle {
        margin: 0.2rem 0 0;
        color: #64748b;
        font-size: 0.8rem;
    }

    .panel-body {
        padding: 1.2rem;
    }

    .filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 0.9rem;
        align-items: end;
    }

    .summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 0.9rem;
    }

    .summary-card {
        position: relative;
        border-radius: 20px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.9));
        padding: 1rem 1rem 0.95rem;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
        overflow: hidden;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .summary-card::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: rgba(59, 130, 246, 0.55);
    }

    .summary-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
    }

    .summary-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
    }

    .summary-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        background: rgba(59, 130, 246, 0.10);
        color: #1d4ed8;
    }

    .summary-card.success .summary-icon {
        background: rgba(16, 185, 129, 0.12);
        color: #047857;
    }

    .summary-card.success::before {
        background: rgba(16, 185, 129, 0.78);
    }

    .summary-card.warning .summary-icon {
        background: rgba(245, 158, 11, 0.14);
        color: #b45309;
    }

    .summary-card.warning::before {
        background: rgba(245, 158, 11, 0.82);
    }

    .summary-card.danger .summary-icon {
        background: rgba(239, 68, 68, 0.12);
        color: #b91c1c;
    }

    .summary-card.danger::before {
        background: rgba(239, 68, 68, 0.88);
    }

    .summary-label {
        font-size: 0.78rem;
        color: #64748b;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .summary-value {
        margin-top: 0.28rem;
        font-size: 1.75rem;
        line-height: 1.05;
        font-weight: 800;
        color: #0f172a;
    }

    .summary-note {
        margin-top: 0.35rem;
        color: #94a3b8;
        font-size: 0.78rem;
        font-weight: 600;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.36rem 0.7rem;
        border-radius: 999px;
        font-size: 0.74rem;
        font-weight: 700;
    }

    .status-pill.aberta {
        background: rgba(239, 68, 68, 0.12);
        color: #b91c1c;
    }

    .status-pill.resolvida {
        background: rgba(16, 185, 129, 0.14);
        color: #047857;
    }

    .status-pill.cancelada {
        background: rgba(100, 116, 139, 0.14);
        color: #475569;
    }

    .chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        padding: 0.34rem 0.7rem;
        background: rgba(59, 130, 246, 0.08);
        color: #1d4ed8;
        font-size: 0.76rem;
        font-weight: 700;
    }

    .chip.warn {
        background: rgba(245, 158, 11, 0.15);
        color: #b45309;
    }

    .chip.danger {
        background: rgba(239, 68, 68, 0.12);
        color: #b91c1c;
    }

    .chip.live {
        background: rgba(16, 185, 129, 0.12);
        color: #047857;
    }

    .table-tight th {
        font-size: 0.76rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #64748b;
        font-weight: 800;
        white-space: nowrap;
    }

    .table-tight td {
        vertical-align: middle;
    }

    .mini-muted {
        font-size: 0.78rem;
        color: #64748b;
    }

    .alert-soft {
        border: none;
        border-radius: 18px;
        padding: 0.95rem 1rem;
    }

    .empty-state {
        text-align: center;
        color: #94a3b8;
        font-weight: 600;
        padding: 1.4rem 0.8rem;
    }

    .garcom-nome {
        font-weight: 800;
        color: #0f172a;
    }

    .garcom-meta {
        font-size: 0.78rem;
        color: #64748b;
    }

    .section-stack {
        display: grid;
        gap: 1rem;
    }

    .insight-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.9rem;
    }

    .insight-card {
        border-radius: 20px;
        padding: 1rem 1rem 0.95rem;
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92));
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .insight-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
    }

    .insight-label {
        font-size: 0.74rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
    }

    .insight-value {
        margin-top: 0.35rem;
        font-size: 1.08rem;
        font-weight: 800;
        color: #0f172a;
    }

    .insight-note {
        margin-top: 0.3rem;
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .insight-card.primary {
        background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(255,255,255,0.92));
        border-color: rgba(147, 197, 253, 0.48);
    }

    .insight-card.success {
        background: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(255,255,255,0.92));
        border-color: rgba(110, 231, 183, 0.44);
    }

    .insight-card.warning {
        background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255,255,255,0.92));
        border-color: rgba(252, 211, 77, 0.42);
    }

    .insight-card.danger {
        background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(255,255,255,0.92));
        border-color: rgba(252, 165, 165, 0.42);
    }

    .garcom-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
    }

    .garcom-card {
        border-radius: 22px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,252,0.92));
        padding: 1rem;
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
        position: relative;
        overflow: hidden;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
        animation: fade-lift 0.35s ease;
    }

    .garcom-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 38px rgba(15, 23, 42, 0.09);
    }

    .garcom-card::after {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        background: rgba(59, 130, 246, 0.55);
    }

    .garcom-card.warning::after {
        background: rgba(245, 158, 11, 0.72);
    }

    .garcom-card.danger::after {
        background: rgba(239, 68, 68, 0.78);
    }

    .garcom-card.danger {
        border-color: rgba(252, 165, 165, 0.46);
    }

    .garcom-card.success::after {
        background: rgba(16, 185, 129, 0.72);
    }

    .garcom-card-head {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        align-items: flex-start;
        margin-bottom: 0.9rem;
    }

    .garcom-card-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 0.25rem;
    }

    .garcom-card-subtitle {
        font-size: 0.8rem;
        color: #64748b;
        font-weight: 600;
    }

    .garcom-score {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.42rem 0.68rem;
        border-radius: 999px;
        font-size: 0.74rem;
        font-weight: 800;
        background: rgba(59, 130, 246, 0.08);
        color: #1d4ed8;
        white-space: nowrap;
    }

    .garcom-score.warning {
        background: rgba(245, 158, 11, 0.14);
        color: #b45309;
    }

    .garcom-score.danger {
        background: rgba(239, 68, 68, 0.12);
        color: #b91c1c;
    }

    .garcom-pressure {
        margin-bottom: 0.9rem;
    }

    .garcom-pressure-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.35rem;
    }

    .garcom-pressure-label {
        font-size: 0.72rem;
        color: #64748b;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .garcom-pressure-value {
        font-size: 0.78rem;
        font-weight: 800;
        color: #0f172a;
    }

    .garcom-pressure-track {
        width: 100%;
        height: 10px;
        border-radius: 999px;
        background: rgba(226, 232, 240, 0.95);
        overflow: hidden;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    }

    .garcom-pressure-fill {
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
        transition: width 0.35s ease;
    }

    .garcom-pressure-fill.warning {
        background: linear-gradient(90deg, #facc15 0%, #f59e0b 100%);
    }

    .garcom-pressure-fill.danger {
        background: linear-gradient(90deg, #fb7185 0%, #ef4444 100%);
    }

    .garcom-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
        margin-bottom: 0.9rem;
    }

    .garcom-metric {
        border-radius: 16px;
        padding: 0.72rem 0.8rem;
        background: rgba(248, 250, 252, 0.92);
        border: 1px solid rgba(226, 232, 240, 0.9);
    }

    .garcom-metric-label {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .garcom-metric-value {
        margin-top: 0.22rem;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 800;
    }

    .garcom-card-footer {
        display: grid;
        gap: 0.55rem;
    }

    .garcom-card-label {
        font-size: 0.74rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #64748b;
    }

    .feedback-inline {
        border-radius: 18px;
        border: 1px solid rgba(248, 113, 113, 0.3);
        background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(255,255,255,0.95));
        color: #991b1b;
        padding: 0.95rem 1rem;
        font-weight: 700;
        display: none;
        margin-bottom: 1rem;
    }

    .feedback-inline.show {
        display: block;
        animation: fade-lift 0.25s ease;
    }

    .feedback-inline.success {
        border-color: rgba(110, 231, 183, 0.45);
        background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(255,255,255,0.95));
        color: #065f46;
    }

    .birro-helper {
        margin-top: 0.45rem;
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 600;
    }

    .sticky-panel-group {
        position: sticky;
        top: 1rem;
    }

    .loading-surface {
        position: relative;
        overflow: hidden;
    }

    .loading-surface::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(248,250,252,0) 0%, rgba(255,255,255,0.72) 50%, rgba(248,250,252,0) 100%);
        background-size: 200% 100%;
        animation: shimmer 1.4s linear infinite;
        pointer-events: none;
    }

    .btn-loading {
        pointer-events: none;
        opacity: 0.86;
    }

    .btn-loading .fa-sync-alt,
    .btn-loading .fa-save {
        animation: spin-soft 0.9s linear infinite;
    }

    .table-critical-row {
        background: linear-gradient(180deg, rgba(254, 242, 242, 0.85), rgba(255,255,255,0.98));
    }

    .table-watch-row {
        background: linear-gradient(180deg, rgba(255, 251, 235, 0.92), rgba(255,255,255,0.98));
    }

    @media (max-width: 991.98px) {
        .hero-actions {
            justify-content: flex-start;
        }

        .hero-status-stack {
            grid-template-columns: 1fr;
        }

        .sticky-panel-group {
            position: static;
        }
    }

    @media (max-width: 767.98px) {
        .summary-top {
            align-items: flex-start;
        }

        .summary-value {
            font-size: 1.45rem;
        }

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

{% block content %}
<div class="mapa-atendimento-shell">
    <div class="container-fluid">
        <div class="hero-card">
            <div class="row g-4 align-items-center">
                <div class="col-xl-8">
                    <div class="hero-title"><i class="fas fa-route me-2 text-primary"></i>Mapa de Atendimento</div>
                    <p class="hero-subtitle">Visão gerencial do salão para acompanhar garçons, mesas/comandas em aberto, valores recebidos, atendimentos abandonados e birros lançados manualmente.</p>
                    <div class="hero-badges">
                        <span class="hero-badge"><i class="fas fa-chair"></i> Operação em tempo real</span>
                        <span class="hero-badge"><i class="fas fa-user-tie"></i> Consolidação por garçom</span>
                        <span class="hero-badge"><i class="fas fa-exclamation-triangle"></i> Alerta de abandono configurável</span>
                    </div>
                    <div class="hero-status-stack" id="heroStatusGrid">
                        <div class="hero-status-card">
                            <div class="hero-status-label">Pulso da casa</div>
                            <div class="hero-status-value">Carregando...</div>
                            <div class="hero-status-note">Consolidando atendimentos atuais</div>
                        </div>
                        <div class="hero-status-card">
                            <div class="hero-status-label">Ponto de atenção</div>
                            <div class="hero-status-value">Carregando...</div>
                            <div class="hero-status-note">Aguardando leitura das mesas críticas</div>
                        </div>
                        <div class="hero-status-card">
                            <div class="hero-status-label">Birro em foco</div>
                            <div class="hero-status-value">Carregando...</div>
                            <div class="hero-status-note">Ocorrências do período selecionado</div>
                        </div>
                    </div>
                    <div class="hero-meta">
                        <span class="hero-meta-item"><span class="hero-meta-dot"></span><span id="ultimaAtualizacaoMapa">Atualizando leitura do painel...</span></span>
                        <span class="hero-meta-item"><i class="fas fa-calendar-alt text-primary"></i><span id="heroPeriodoMapa">Período operacional em carregamento</span></span>
                    </div>
                </div>
                <div class="col-xl-4">
                    <div class="hero-actions">
                        <a href="{{ url_for('food.dashboard_food') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Dashboard
                        </a>
                        <button type="button" class="btn btn-primary" id="btnAtualizarMapa">
                            <i class="fas fa-sync-alt me-2"></i>Atualizar agora
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div id="feedbackMapa" class="feedback-inline"></div>

        <div class="panel-card">
            <div class="panel-head">
                <h5 class="panel-title"><i class="fas fa-filter me-2 text-primary"></i>Filtros operacionais</h5>
                <p class="panel-subtitle">Valor recebido usa o período escolhido. Valor em aberto e mesas abandonadas são sempre da operação atual.</p>
            </div>
            <div class="panel-body">
                <form id="filtroMapaForm" class="filter-grid">
                    <div>
                        <label class="form-label fw-semibold">Data inicial</label>
                        <input type="date" class="form-control" name="data_inicio" id="data_inicio" value="{{ data_inicio_padrao }}">
                    </div>
                    <div>
                        <label class="form-label fw-semibold">Data final</label>
                        <input type="date" class="form-control" name="data_fim" id="data_fim" value="{{ data_fim_padrao }}">
                    </div>
                    <div>
                        <label class="form-label fw-semibold">Abandono após</label>
                        <div class="input-group">
                            <input type="number" min="10" max="240" step="5" class="form-control" name="minutos_abandono" id="minutos_abandono" value="{{ minutos_abandono_padrao }}">
                            <span class="input-group-text">min</span>
                        </div>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-dark w-100">
                            <i class="fas fa-search me-2"></i>Aplicar filtros
                        </button>
                    </div>
                </form>
                <div class="mini-muted mt-3" id="textoPeriodoMapa">Carregando dados do período...</div>
            </div>
        </div>

        <div class="panel-card">
            <div class="panel-head">
                <h5 class="panel-title"><i class="fas fa-chart-pie me-2 text-success"></i>Resumo do atendimento</h5>
                <p class="panel-subtitle">Foto rápida da operação para orientar decisão de gerente, líder ou caixa.</p>
            </div>
            <div class="panel-body">
                <div class="summary-grid" id="resumoMapaGrid"></div>
            </div>
        </div>

        <div class="panel-card">
            <div class="panel-head">
                <h5 class="panel-title"><i class="fas fa-wave-square me-2 text-primary"></i>Pulso executivo</h5>
                <p class="panel-subtitle">Resumo interpretado do salão para facilitar a leitura rápida de risco e giro.</p>
            </div>
            <div class="panel-body">
                <div class="insight-grid" id="insightMapaGrid">
                    <div class="insight-card primary">
                        <div class="insight-label">Carregando</div>
                        <div class="insight-value">Lendo operação...</div>
                        <div class="insight-note">Preparando indicadores do salão</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-xl-8">
                <div class="section-stack">
                    <div class="panel-card">
                        <div class="panel-head">
                            <h5 class="panel-title"><i class="fas fa-users me-2 text-primary"></i>Garçons e atendimentos</h5>
                            <p class="panel-subtitle">Cards operacionais com foco em pressão de atendimento, aberto, recebido e birro.</p>
                        </div>
                        <div class="panel-body">
                            <div id="garcomCardsGrid" class="garcom-card-grid">
                                <div class="empty-state">Carregando mapa de atendimento...</div>
                            </div>
                        </div>
                    </div>

                    <div class="panel-card">
                        <div class="panel-head">
                            <h5 class="panel-title"><i class="fas fa-clock me-2 text-warning"></i>Mesas/comandas abandonadas</h5>
                            <p class="panel-subtitle">Atendimentos sem movimentação acima do limite configurado.</p>
                        </div>
                        <div class="panel-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover table-tight mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Atendimento</th>
                                            <th>Garçom</th>
                                            <th class="text-center">Sem consumo</th>
                                            <th class="text-center">Tempo aberto</th>
                                            <th class="text-end">Em aberto</th>
                                            <th>Última movimentação</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbodyMesasCriticas">
                                        <tr><td colspan="6" class="empty-state">Carregando alertas...</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="section-stack sticky-panel-group">
                    <div class="panel-card">
                        <div class="panel-head">
                            <h5 class="panel-title"><i class="fas fa-file-circle-exclamation me-2 text-danger"></i>Lançar birro</h5>
                            <p class="panel-subtitle">Use quando o prejuízo for confirmado manualmente pelo usuário do sistema.</p>
                        </div>
                        <div class="panel-body">
                            <div id="alertaSchemaBirro" class="alert alert-warning alert-soft d-none mb-3"></div>
                            <form id="formBirro" class="row g-3">
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Garçom responsável</label>
                                    <select class="form-select" id="birro_usuario_id" required></select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Atendimento vinculado (opcional)</label>
                                    <select class="form-select" id="birro_comanda_id">
                                        <option value="">Selecione uma mesa/comanda em aberto</option>
                                    </select>
                                    <div class="birro-helper" id="birroHelperText">Ao vincular um atendimento, o garçom responsável é sugerido automaticamente.</div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Valor</label>
                                    <div class="input-group">
                                        <span class="input-group-text">R$</span>
                                        <input type="number" min="0" step="0.01" class="form-control" id="birro_valor" placeholder="0,00">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Descrição</label>
                                    <textarea class="form-control" id="birro_descricao" rows="4" placeholder="Ex.: cliente saiu sem pagar; divergência confirmada e assumida pelo garçom" required></textarea>
                                </div>
                                <div class="col-12 d-grid">
                                    <button type="submit" class="btn btn-danger" id="btnRegistrarBirro">
                                        <i class="fas fa-save me-2"></i>Registrar birro
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="panel-card">
                        <div class="panel-head">
                            <h5 class="panel-title"><i class="fas fa-list-check me-2 text-danger"></i>Birros do período</h5>
                            <p class="panel-subtitle">Ocorrências manuais que impactam o mapa de atendimento.</p>
                        </div>
                        <div class="panel-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover table-tight mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Garçom</th>
                                            <th class="text-end">Valor</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbodyBirros">
                                        <tr><td colspan="3" class="empty-state">Carregando ocorrências...</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let mapaAtual = null;
let carregandoMapa = false;

function formatarMoeda(valor) {
    return (Number(valor || 0)).toLocaleString('pt-BR', {
        style: 'currency',
        currency: 'BRL'
    });
}

function formatarDataBr(valor, separador = '-') {
    if (!valor) return '--';
    const texto = String(valor);
    if (/^\d{4}-\d{2}-\d{2}$/.test(texto)) {
        const [ano, mes, dia] = texto.split('-');
        return [dia, mes, ano].join(separador);
    }
    return texto;
}

function formatarDataHoraAtual() {
    return new Date().toLocaleString('pt-BR', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    }).replace(/\//g, '-');
}

function limitarPercentual(valor) {
    return Math.max(0, Math.min(100, Number(valor || 0)));
}

function percentualPressaoGarcom(garcom) {
    const espera = Math.min(100, ((Number(garcom.maior_espera_minutos || 0) / 120) * 100));
    const abandono = Math.min(100, Number(garcom.mesas_abandonadas || 0) * 28);
    const birro = Math.min(100, Number(garcom.birros_qtd || 0) * 22);
    return limitarPercentual(Math.max(espera, abandono, birro));
}

function tonePorPercentual(percentual) {
    if (percentual >= 70) return 'danger';
    if (percentual >= 35) return 'warning';
    return 'success';
}

function setBotaoCarregando(button, ativo, iconClass, texto) {
    if (!button) return;
    if (ativo) {
        button.dataset.originalHtml = button.innerHTML;
        button.innerHTML = `<i class="${iconClass} me-2"></i>${texto}`;
        button.classList.add('btn-loading');
        button.disabled = true;
        return;
    }
    button.innerHTML = button.dataset.originalHtml || button.innerHTML;
    button.classList.remove('btn-loading');
    button.disabled = false;
}

function setEstadoLoadingPainel(ativo) {
    const ids = ['resumoMapaGrid', 'insightMapaGrid', 'garcomCardsGrid', 'tbodyMesasCriticas', 'tbodyBirros'];
    ids.forEach(id => {
        const el = document.getElementById(id);
        if (!el) return;
        el.classList.toggle('loading-surface', !!ativo);
    });
}

function escapeHtml(texto) {
    return String(texto || '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function formDataMapa() {
    return {
        data_inicio: document.getElementById('data_inicio').value,
        data_fim: document.getElementById('data_fim').value,
        minutos_abandono: document.getElementById('minutos_abandono').value || 30,
    };
}

function renderResumo(resumo) {
    const cards = [
        { label: 'Garçons cadastrados', valor: resumo.garcons_cadastrados, nota: 'Base de usuários do Food', cor: 'text-primary', icon: 'fas fa-user-tie', tone: 'primary' },
        { label: 'Com atendimento', valor: resumo.garcons_com_atendimento, nota: 'Com operação ou baixa no período', cor: 'text-success', icon: 'fas fa-users', tone: 'success' },
        { label: 'Mesas ocupadas', valor: resumo.mesas_ocupadas, nota: 'Somente mesas físicas', cor: 'text-danger', icon: 'fas fa-chair', tone: 'danger' },
        { label: 'Comandas físicas', valor: resumo.comandas_fisicas_abertas, nota: 'Comandas em aberto agora', cor: 'text-warning', icon: 'fas fa-receipt', tone: 'warning' },
        { label: 'Valor em aberto', valor: formatarMoeda(resumo.valor_em_aberto), nota: 'Operação atual do salão', cor: 'text-primary', icon: 'fas fa-wallet', tone: 'primary' },
        { label: 'Valor recebido', valor: formatarMoeda(resumo.valor_recebido), nota: 'Período filtrado', cor: 'text-success', icon: 'fas fa-cash-register', tone: 'success' },
        { label: 'Mesas abandonadas', valor: resumo.mesas_abandonadas, nota: `Sem consumo por ${resumo.tempo_abandono_minutos} min ou mais`, cor: 'text-warning', icon: 'fas fa-clock', tone: 'warning' },
        { label: 'Birros', valor: `${resumo.birros_qtd} / ${formatarMoeda(resumo.birros_valor)}`, nota: 'Ocorrências manuais do período', cor: 'text-danger', icon: 'fas fa-file-circle-exclamation', tone: 'danger' },
    ];

    document.getElementById('resumoMapaGrid').innerHTML = cards.map(card => `
        <div class="summary-card ${card.tone}">
            <div class="summary-top">
                <div class="summary-label">${escapeHtml(card.label)}</div>
                <span class="summary-icon"><i class="${escapeHtml(card.icon)}"></i></span>
            </div>
            <div class="summary-value ${card.cor}">${escapeHtml(card.valor)}</div>
            <div class="summary-note">${escapeHtml(card.nota)}</div>
        </div>
    `).join('');
}

function renderHeroStatus(mapa) {
    const resumo = mapa.resumo || {};
    const mesasCriticas = mapa.mesas_criticas || [];
    const birros = mapa.birros || [];
    const birrosAbertos = birros.filter(item => item.status === 'aberta');
    const heroCards = [
        {
            label: 'Pulso da casa',
            value: `${(resumo.mesas_ocupadas || 0) + (resumo.comandas_fisicas_abertas || 0)} atendimentos ativos`,
            note: `${resumo.garcons_com_atendimento || 0} garçons com movimentação no período`,
            tone: ((resumo.mesas_ocupadas || 0) + (resumo.comandas_fisicas_abertas || 0)) > 0 ? 'success' : 'primary'
        },
        {
            label: 'Ponto de atenção',
            value: mesasCriticas.length ? `${mesasCriticas[0].mesa_label} · ${mesasCriticas[0].minutos_sem_consumo} min` : 'Operação sem abandono crítico',
            note: mesasCriticas.length ? `${mesasCriticas[0].garcom_nome} precisa de ação rápida` : 'Nenhuma mesa acima do limite configurado',
            tone: mesasCriticas.length ? 'danger' : 'success'
        },
        {
            label: 'Birro em foco',
            value: birrosAbertos.length ? `${birrosAbertos.length} aberto(s)` : 'Sem birro aberto',
            note: `${formatarMoeda(resumo.birros_valor || 0)} no período selecionado`,
            tone: birrosAbertos.length ? 'danger' : 'warning'
        }
    ];

    document.getElementById('heroStatusGrid').innerHTML = heroCards.map(card => `
        <div class="hero-status-card ${card.tone}">
            <div class="hero-status-label">${escapeHtml(card.label)}</div>
            <div class="hero-status-value">${escapeHtml(card.value)}</div>
            <div class="hero-status-note">${escapeHtml(card.note)}</div>
        </div>
    `).join('');
}

function renderInsights(mapa) {
    const resumo = mapa.resumo || {};
    const mesasCriticas = mapa.mesas_criticas || [];
    const garcons = mapa.garcons || [];
    const birros = mapa.birros || [];
    const topGarcom = garcons[0] || null;
    const primeiroRisco = mesasCriticas[0] || null;
    const birrosAbertos = birros.filter(item => item.status === 'aberta');
    const giroRecebimento = resumo.valor_recebido > 0 && resumo.valor_em_aberto > 0
        ? `${Math.max(1, Math.round((resumo.valor_recebido / resumo.valor_em_aberto) * 100))}% do aberto convertido`
        : 'Sem base suficiente para índice de conversão';

    const cards = [
        {
            tone: 'primary',
            label: 'Operação ativa',
            value: `${resumo.comandas_abertas || 0} frente(s) de atendimento`,
            note: `${resumo.garcons_com_atendimento || 0} garçom(ns) com salão em andamento`
        },
        {
            tone: primeiroRisco ? 'danger' : 'success',
            label: 'Maior risco do salão',
            value: primeiroRisco ? `${primeiroRisco.mesa_label} · ${primeiroRisco.minutos_sem_consumo} min` : 'Sem abandono crítico',
            note: primeiroRisco ? `${primeiroRisco.garcom_nome} com ${formatarMoeda(primeiroRisco.valor_aberto)} em aberto` : 'Todas as mesas estão dentro da janela esperada'
        },
        {
            tone: topGarcom && (topGarcom.mesas_abandonadas || topGarcom.valor_em_aberto) ? 'warning' : 'success',
            label: 'Garçom mais pressionado',
            value: topGarcom ? topGarcom.nome : 'Sem destaque',
            note: topGarcom ? `${topGarcom.mesas_abandonadas || 0} alerta(s) · ${formatarMoeda(topGarcom.valor_em_aberto || 0)} em aberto` : 'Sem dados suficientes no período'
        },
        {
            tone: birrosAbertos.length ? 'danger' : 'primary',
            label: 'Exposição financeira',
            value: giroRecebimento,
            note: birrosAbertos.length ? `${birrosAbertos.length} birro(s) em aberto aguardando tratativa` : 'Sem birro aberto no momento'
        }
    ];

    document.getElementById('insightMapaGrid').innerHTML = cards.map(card => `
        <div class="insight-card ${card.tone}">
            <div class="insight-label">${escapeHtml(card.label)}</div>
            <div class="insight-value">${escapeHtml(card.value)}</div>
            <div class="insight-note">${escapeHtml(card.note)}</div>
        </div>
    `).join('');
}

function renderGarcons(garcons) {
    const grid = document.getElementById('garcomCardsGrid');
    if (!garcons || !garcons.length) {
        grid.innerHTML = '<div class="empty-state">Nenhum atendimento encontrado para os filtros informados.</div>';
        return;
    }

    grid.innerHTML = garcons.map(garcom => {
        const pressao = percentualPressaoGarcom(garcom);
        const severidade = tonePorPercentual(pressao);
        const statusLabel = garcom.mesas_abandonadas > 0
            ? `${garcom.mesas_abandonadas} alerta(s) de abandono`
            : (garcom.comandas_abertas > 0 ? 'Operação em curso' : 'Sem mesa em aberto');
        const chips = (garcom.atendimentos || []).slice(0, 4).map(item => `
            <span class="chip ${item.abandonada ? 'danger' : ''}">
                ${escapeHtml(item.mesa_label)} · ${item.minutos_sem_consumo} min
            </span>
        `).join('');
        const restante = (garcom.atendimentos || []).length > 4
            ? `<span class="chip warn">+${(garcom.atendimentos || []).length - 4} atend.</span>`
            : '';
        const perfil = garcom.perfil_food_nome ? `<div class="garcom-meta">Perfil: ${escapeHtml(garcom.perfil_food_nome)}</div>` : '';
        const indisponivel = garcom.disponivel ? '' : `<div class="garcom-meta text-danger">${escapeHtml(garcom.motivo_indisponivel || 'Sem usuário disponível')}</div>`;
        const ultimaPressao = (garcom.atendimentos || [])[0];
        return `
            <div class="garcom-card ${severidade}">
                <div class="garcom-card-head">
                    <div>
                        <div class="garcom-card-title">${escapeHtml(garcom.nome)}</div>
                        <div class="garcom-card-subtitle">${escapeHtml(statusLabel)}</div>
                        ${perfil}
                        ${indisponivel}
                    </div>
                    <span class="garcom-score ${severidade}">
                        <i class="fas fa-signal"></i>${garcom.maior_espera_minutos || 0} min
                    </span>
                </div>
                <div class="garcom-metrics">
                    <div class="garcom-metric">
                        <div class="garcom-metric-label">Mesas</div>
                        <div class="garcom-metric-value">${garcom.mesas_ocupadas}</div>
                    </div>
                    <div class="garcom-metric">
                        <div class="garcom-metric-label">Comandas</div>
                        <div class="garcom-metric-value">${garcom.comandas_abertas}</div>
                    </div>
                    <div class="garcom-metric">
                        <div class="garcom-metric-label">Em aberto</div>
                        <div class="garcom-metric-value">${formatarMoeda(garcom.valor_em_aberto)}</div>
                    </div>
                    <div class="garcom-metric">
                        <div class="garcom-metric-label">Recebido</div>
                        <div class="garcom-metric-value text-success">${formatarMoeda(garcom.valor_recebido)}</div>
                    </div>
                    <div class="garcom-metric">
                        <div class="garcom-metric-label">Abandono</div>
                        <div class="garcom-metric-value ${garcom.mesas_abandonadas ? 'text-danger' : ''}">${garcom.mesas_abandonadas || 0}</div>
                    </div>
                    <div class="garcom-metric">
                        <div class="garcom-metric-label">Birro</div>
                        <div class="garcom-metric-value ${garcom.birros_qtd ? 'text-danger' : ''}">${garcom.birros_qtd || 0}</div>
                    </div>
                </div>
                <div class="garcom-pressure">
                    <div class="garcom-pressure-head">
                        <div class="garcom-pressure-label">Pressão operacional</div>
                        <div class="garcom-pressure-value">${pressao}%</div>
                    </div>
                    <div class="garcom-pressure-track">
                        <div class="garcom-pressure-fill ${severidade}" style="width:${pressao}%"></div>
                    </div>
                </div>
                <div class="garcom-card-footer">
                    <div>
                        <div class="garcom-card-label">Atendimentos monitorados</div>
                        <div class="chip-list mt-2">${chips || '<span class="chip live"><i class="fas fa-check-circle"></i>Sem mesas/comandas em aberto</span>'}${restante}</div>
                    </div>
                    <div class="mini-muted">${ultimaPressao ? `Maior pressão agora: ${escapeHtml(ultimaPressao.mesa_label)} · ${ultimaPressao.minutos_sem_consumo} min sem consumo.` : 'Sem pressão operacional relevante neste momento.'}</div>
                </div>
            </div>
        `;
    }).join('');
}

function renderMesasCriticas(mesas) {
    const tbody = document.getElementById('tbodyMesasCriticas');
    if (!mesas || !mesas.length) {
        tbody.innerHTML = '<tr><td colspan="6" class="empty-state">Nenhuma mesa/comanda acima do limite de abandono.</td></tr>';
        return;
    }

    tbody.innerHTML = mesas.map(item => `
        <tr class="${item.minutos_sem_consumo >= 90 ? 'table-critical-row' : 'table-watch-row'}">
            <td class="fw-semibold">${escapeHtml(item.mesa_label)}</td>
            <td>${escapeHtml(item.garcom_nome)}</td>
            <td class="text-center"><span class="chip danger">${item.minutos_sem_consumo} min</span></td>
            <td class="text-center">${item.tempo_aberto} min</td>
            <td class="text-end fw-semibold">${formatarMoeda(item.valor_aberto)}</td>
            <td>${escapeHtml(item.ultima_movimentacao || 'Sem movimentação')}</td>
        </tr>
    `).join('');
}

function renderBirros(birros) {
    const tbody = document.getElementById('tbodyBirros');
    if (!birros || !birros.length) {
        tbody.innerHTML = '<tr><td colspan="3" class="empty-state">Nenhum birro registrado no período.</td></tr>';
        return;
    }

    tbody.innerHTML = birros.map(item => `
        <tr class="${item.status === 'aberta' ? 'table-critical-row' : ''}">
            <td>
                <div class="fw-semibold">${escapeHtml(item.garcom_nome)}</div>
                <div class="mini-muted">${escapeHtml(item.mesa_label || item.comanda_numero || 'Sem atendimento vinculado')}</div>
                <div class="mini-muted">${escapeHtml(item.data_ocorrencia || '')}</div>
                <div class="mini-muted mt-1">${escapeHtml(item.descricao || '')}</div>
            </td>
            <td class="text-end fw-semibold text-danger">${formatarMoeda(item.valor)}</td>
            <td>
                <div class="d-grid gap-2">
                    <span class="status-pill ${escapeHtml(item.status)}">${escapeHtml(item.status)}</span>
                    ${item.status !== 'resolvida' ? `<button type="button" class="btn btn-sm btn-outline-success" onclick="atualizarStatusOcorrencia(${item.id}, 'resolvida')">Resolver</button>` : ''}
                    ${item.status === 'aberta' ? `<button type="button" class="btn btn-sm btn-outline-secondary" onclick="atualizarStatusOcorrencia(${item.id}, 'cancelada')">Cancelar</button>` : ''}
                </div>
            </td>
        </tr>
    `).join('');
}

function preencherCombosBirro(mapa) {
    const selectGarcom = document.getElementById('birro_usuario_id');
    const selectComanda = document.getElementById('birro_comanda_id');
    const alerta = document.getElementById('alertaSchemaBirro');
    const btn = document.getElementById('btnRegistrarBirro');

    const garconsDisponiveis = (mapa.garcons || []).filter(item => item.usuario_id);
    selectGarcom.innerHTML = garconsDisponiveis.length
        ? garconsDisponiveis.map(item => `<option value="${item.usuario_id}">${escapeHtml(item.nome)}</option>`).join('')
        : '<option value="">Nenhum garçom com usuário disponível</option>';

    const atendimentos = mapa.atendimentos_abertos || [];
    const atendimentoOptions = atendimentos.map(item => `
        <option value="${item.comanda_id || ''}" data-usuario-id="${item.usuario_id || ''}" data-garcom-nome="${escapeHtml(item.garcom_nome || '')}">
            ${escapeHtml(item.mesa_label)} · ${escapeHtml(item.garcom_nome)} · ${formatarMoeda(item.valor_aberto)}
        </option>
    `).join('');
    selectComanda.innerHTML = `<option value="">Selecione uma mesa/comanda em aberto</option>${atendimentoOptions}`;

    if (mapa.schema_ocorrencias_indisponivel) {
        alerta.classList.remove('d-none');
        alerta.textContent = mapa.mensagem_schema || 'Estrutura de ocorrências indisponível.';
        btn.disabled = true;
    } else {
        alerta.classList.add('d-none');
        alerta.textContent = '';
        btn.disabled = !garconsDisponiveis.length;
    }
}

function atualizarHelperBirro() {
    const atendimentoSelect = document.getElementById('birro_comanda_id');
    const helper = document.getElementById('birroHelperText');
    const optionSelecionada = atendimentoSelect.options[atendimentoSelect.selectedIndex];
    if (optionSelecionada && optionSelecionada.value) {
        const nomeGarcom = optionSelecionada.getAttribute('data-garcom-nome') || 'Garçom responsável';
        helper.textContent = `Atendimento vinculado a ${nomeGarcom}. O responsável será sugerido automaticamente.`;
        return;
    }
    helper.textContent = 'Ao vincular um atendimento, o garçom responsável é sugerido automaticamente.';
}

function exibirFeedback(mensagem) {
    const box = document.getElementById('feedbackMapa');
    if (!box) return;
    box.textContent = mensagem;
    box.classList.remove('success');
    box.classList.add('show');
}

function exibirSucesso(mensagem) {
    const box = document.getElementById('feedbackMapa');
    if (!box) return;
    box.textContent = mensagem;
    box.classList.add('show', 'success');
}

function limparFeedback() {
    const box = document.getElementById('feedbackMapa');
    if (!box) return;
    box.textContent = '';
    box.classList.remove('show', 'success');
}

async function carregarMapaAtendimento() {
    const botaoAtualizar = document.getElementById('btnAtualizarMapa');
    if (!carregandoMapa) {
        setBotaoCarregando(botaoAtualizar, true, 'fas fa-sync-alt', 'Atualizando...');
        setEstadoLoadingPainel(true);
    }
    carregandoMapa = true;

    try {
        limparFeedback();
        const filtros = formDataMapa();
        const params = new URLSearchParams(filtros);
        const response = await fetch(`{{ url_for('food.api_mapa_atendimento_food') }}?${params.toString()}`);
        const data = await response.json();
        if (!data.success) {
            throw new Error(data.message || 'Falha ao carregar o mapa de atendimento.');
        }

        mapaAtual = data.mapa;
        const filtrosTexto = mapaAtual.filtros || filtros;
        const periodoFormatado = `${formatarDataBr(filtrosTexto.data_inicio)} até ${formatarDataBr(filtrosTexto.data_fim)}`;
        document.getElementById('textoPeriodoMapa').textContent = `Recebimentos de ${periodoFormatado} | alerta de abandono com ${filtrosTexto.minutos_abandono} min.`;
        document.getElementById('heroPeriodoMapa').textContent = `Período analisado: ${periodoFormatado}`;
        document.getElementById('ultimaAtualizacaoMapa').textContent = `Leitura atualizada em ${formatarDataHoraAtual()}`;

        renderResumo(mapaAtual.resumo || {});
        renderHeroStatus(mapaAtual);
        renderInsights(mapaAtual);
        renderGarcons(mapaAtual.garcons || []);
        renderMesasCriticas(mapaAtual.mesas_criticas || []);
        renderBirros(mapaAtual.birros || []);
        preencherCombosBirro(mapaAtual);
        atualizarHelperBirro();
    } finally {
        carregandoMapa = false;
        setBotaoCarregando(botaoAtualizar, false, 'fas fa-sync-alt', 'Atualizando...');
        setEstadoLoadingPainel(false);
    }
}

async function atualizarStatusOcorrencia(id, status) {
    const response = await fetch(`{{ url_for('food.api_atualizar_ocorrencia_atendimento_food', ocorrencia_id=0) }}`.replace('/0/', `/${id}/`), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status })
    });
    const data = await response.json();
    if (!data.success) {
        throw new Error(data.message || 'Não foi possível atualizar a ocorrência.');
    }
    await carregarMapaAtendimento();
    exibirSucesso('Status da ocorrência atualizado com sucesso.');
}

async function registrarBirro(event) {
    event.preventDefault();
    const btnRegistrar = document.getElementById('btnRegistrarBirro');
    const atendimentoSelect = document.getElementById('birro_comanda_id');
    const optionSelecionada = atendimentoSelect.options[atendimentoSelect.selectedIndex];
    const usuarioIdAtendimento = optionSelecionada ? optionSelecionada.getAttribute('data-usuario-id') : '';

    const payload = {
        tipo: 'birro',
        usuario_id: document.getElementById('birro_usuario_id').value || usuarioIdAtendimento || null,
        comanda_id: atendimentoSelect.value || null,
        valor: document.getElementById('birro_valor').value || 0,
        descricao: document.getElementById('birro_descricao').value,
    };

    setBotaoCarregando(btnRegistrar, true, 'fas fa-save', 'Registrando...');
    try {
        const response = await fetch(`{{ url_for('food.api_registrar_ocorrencia_atendimento_food') }}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const data = await response.json();
        if (!data.success) {
            throw new Error(data.message || 'Não foi possível registrar o birro.');
        }

        document.getElementById('formBirro').reset();
        atualizarHelperBirro();
        await carregarMapaAtendimento();
        exibirSucesso('Birro registrado com sucesso no mapa de atendimento.');
    } finally {
        setBotaoCarregando(btnRegistrar, false, 'fas fa-save', 'Registrando...');
    }
}

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('btnAtualizarMapa').addEventListener('click', () => carregarMapaAtendimento().catch(exibirErro));
    document.getElementById('filtroMapaForm').addEventListener('submit', (event) => {
        event.preventDefault();
        carregarMapaAtendimento().catch(exibirErro);
    });
    document.getElementById('formBirro').addEventListener('submit', (event) => {
        registrarBirro(event).catch(exibirErro);
    });
    document.getElementById('birro_comanda_id').addEventListener('change', (event) => {
        const optionSelecionada = event.target.options[event.target.selectedIndex];
        const usuarioId = optionSelecionada ? optionSelecionada.getAttribute('data-usuario-id') : '';
        if (usuarioId) {
            document.getElementById('birro_usuario_id').value = usuarioId;
        }
        atualizarHelperBirro();
    });

    carregarMapaAtendimento().catch(exibirErro);
});

function exibirErro(error) {
    const mensagem = error && error.message ? error.message : 'Falha inesperada ao carregar o mapa de atendimento.';
    exibirFeedback(mensagem);
    console.error(error);
}
</script>
{% endblock %}