<?php
  require_once __DIR__ . "/_bootstrap.php";
?>
<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Garçom - Pedidos</title>

  <style>
    /* ====== Windows 10 Dark (padrão do projeto) ====== */
    :root{
      --bg:#1e1e1e;
      --card:#252526;
      --card2:#2d2d30;
      --text:#f3f3f3;
      --muted:#bdbdbd;
      --line: rgba(255,255,255,.10);

      --shadow: 0 10px 24px rgba(0,0,0,.45);
      --radius: 14px;

      --accent:#0078d4;
      --accent2:#2b88d8;

      --ok:#22c55e;
      --warn:#f59e0b;
      --orange:#ff8a4c;
      --danger:#ff5a5f;

      --chip: rgba(255,255,255,.04);
      --btn: #2d2d30;
      --btnHover:#3a3a3d;

      --input:#1f1f1f;
      --focus: rgba(0,120,212,.45);
    }

    /* mantém compat com seu JS (data-theme="dark") */
    [data-theme="dark"]{
      --bg:#1e1e1e;
      --card:#252526;
      --card2:#2d2d30;
      --text:#f3f3f3;
      --muted:#bdbdbd;
      --line: rgba(255,255,255,.10);

      --shadow: 0 10px 24px rgba(0,0,0,.45);
      --radius: 14px;

      --accent:#0078d4;
      --accent2:#2b88d8;

      --ok:#22c55e;
      --warn:#f59e0b;
      --orange:#ff8a4c;
      --danger:#ff5a5f;

      --chip: rgba(255,255,255,.04);
      --btn: #2d2d30;
      --btnHover:#3a3a3d;

      --input:#1f1f1f;
      --focus: rgba(0,120,212,.45);
    }

    [data-theme="light"]{
      --bg:#f3f3f3;
      --card:#ffffff;
      --card2:#f7f7f7;
      --text:#111827;
      --muted:#4b5563;
      --line: rgba(17,24,39,.12);

      --shadow: 0 10px 24px rgba(17,24,39,.12);

      --accent:#0078d4;
      --accent2:#2b88d8;

      --ok:#16a34a;
      --warn:#b45309;
      --orange:#c2410c;
      --danger:#dc2626;

      --chip: rgba(2,6,23,.05);
      --btn: #f3f4f6;
      --btnHover:#e5e7eb;

      --input:#ffffff;
      --focus: rgba(0,120,212,.35);
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial;
      background: var(--bg);
      color:var(--text);
      padding:16px;
    }

    .wrap{ max-width: 1200px; margin:0 auto; }

    /* ===== TOPBAR ===== */
    .topbar{
      display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
      flex-wrap:wrap; margin-bottom:14px;
    }
    .title{ display:flex; gap:12px; align-items:center; }
    .logo{
      width:44px; height:44px; border-radius:12px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: var(--shadow);
      display:flex; align-items:center; justify-content:center;
      font-size:22px;
      border:1px solid rgba(255,255,255,.08);
    }
    h1{ margin:0; font-size:20px; letter-spacing:.2px; font-weight:900; }
    .subtitle{ margin-top:4px; color:var(--muted); font-size:13px; }

    /* ===== BUTTONS ===== */
    .controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .btn{
      border:1px solid var(--line);
      background: var(--btn);
      color:var(--text);
      padding:10px 12px;
      border-radius:10px;
      cursor:pointer;
      transition: transform .06s ease, background .12s ease, border-color .12s ease, filter .12s ease;
      user-select:none;
      font-weight:800;
    }
    .btn:hover{ background: var(--btnHover); }
    .btn:active{ transform: translateY(1px); }

    .btn.primary{
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border-color: rgba(0,120,212,.35);
      color:#fff;
      box-shadow: var(--shadow);
    }
    .btn.toggled{
      border-color: rgba(0,120,212,.45);
      box-shadow: 0 0 0 3px var(--focus);
    }

    .pill{
      display:inline-flex; gap:8px; align-items:center;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background: var(--chip);
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
    }
    .pill .dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.35); }
    [data-theme="light"] .pill .dot{ background: rgba(17,24,39,.25); }
    .pill.on{ color: var(--ok); border-color: rgba(34,197,94,.35); }
    .pill.on .dot{ background: var(--ok); }
    .pill.off{ color: var(--danger); border-color: rgba(255,90,95,.35); }
    .pill.off .dot{ background: var(--danger); }

    /* ===== PANEL ===== */
    .panel{
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      box-shadow: var(--shadow);
    }

    .filters{
      display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
      margin-top:10px;
    }
    .field{
      display:flex; flex-direction:column; gap:6px;
      min-width: 180px;
      flex:1;
    }
    label{ font-size:12px; color:var(--muted); }

    input, select{
      border:1px solid var(--line);
      background: var(--input);
      color: var(--text);
      border-radius: 10px;
      padding: 10px 12px;
      outline:none;
    }
    input::placeholder{ color: color-mix(in srgb, var(--muted) 80%, transparent); }
    input:focus, select:focus{
      border-color: rgba(0,120,212,.65);
      box-shadow: 0 0 0 3px var(--focus);
    }

    .summary{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap:10px;
      margin-top:12px;
    }
    .stat{
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius: 12px;
      background: var(--card2);
    }
    .stat .k{ color: var(--muted); font-size:12px; }
    .stat .v{ font-size:18px; font-weight:900; margin-top:2px; }

    @media (max-width: 720px){
      .summary{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .field{ min-width: 140px; }
    }

    /* ===== LIST LAYOUT ===== */
    .list{ margin-top: 14px; display:grid; gap: 12px; }

    /* ===== ORDER CARD ===== */
    .order{
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: var(--card);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .order.atrasado{
      border-color: rgba(255,90,95,.55);
      box-shadow: 0 14px 30px rgba(255,90,95,.10), var(--shadow);
    }

    /* ✅ piscar suave para novo ENVIADO */
    .order.flash{
      animation: flashPulse 1.2s ease-in-out 0s 2;
      border-color: rgba(245,158,11,.55);
      box-shadow: 0 14px 30px rgba(245,158,11,.10), var(--shadow);
    }
    @keyframes flashPulse{
      0% { transform: translateY(0); }
      20%{ transform: translateY(-1px); }
      50%{ box-shadow: 0 14px 35px rgba(245,158,11,.18), var(--shadow); }
      100%{ transform: translateY(0); }
    }

    .orderHead{
      display:flex;
      gap:12px;
      justify-content:space-between;
      align-items:flex-start;
      padding: 12px;
      border-bottom: 1px solid var(--line);
      flex-wrap:wrap;
      background: var(--card2);
    }
    .left{ display:flex; flex-direction:column; gap:6px; min-width: 240px; }
    .mesa{ font-size:18px; font-weight:900; letter-spacing:.3px; }
    .meta{
      display:flex; gap:8px; flex-wrap:wrap; align-items:center;
      color: var(--muted);
      font-size:12px;
    }

    .badge{
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
      border: 1px solid var(--line);
      background: var(--chip);
    }
    .badge .dot{ width:8px; height:8px; border-radius:50%; }

    /* cores por status */
    .b-enviado{ color: var(--warn); border-color: rgba(245,158,11,.35); }
    .b-enviado .dot{ background: var(--warn); }

    .b-aceito{ color: var(--accent); border-color: rgba(0,120,212,.35); }
    .b-aceito .dot{ background: var(--accent); }

    .b-preparo{ color: var(--orange); border-color: rgba(255,138,76,.35); }
    .b-preparo .dot{ background: var(--orange); }

    .b-entregue{ color: var(--ok); border-color: rgba(34,197,94,.35); }
    .b-entregue .dot{ background: var(--ok); }

    .b-atraso{ color: var(--danger); border-color: rgba(255,90,95,.55); }
    .b-atraso .dot{ background: var(--danger); }

    .actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

    .actionBtn{
      padding:10px 12px;
      border-radius: 10px;
      border:1px solid var(--line);
      background: var(--btn);
      color: var(--text);
      cursor:pointer;
      font-weight:500;
      min-width: 110px;
      text-align:center;
      transition: transform .06s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
    }
    .actionBtn:hover{ background: var(--btnHover); }
    .actionBtn:active{ transform: translateY(1px); }
    .actionBtn:disabled{ opacity:.45; cursor:not-allowed; }

    .actionBtn.accept{ border-color: rgba(0,120,212,.35); }
    .actionBtn.prep{ border-color: rgba(255,138,76,.35); }
    .actionBtn.done{ border-color: rgba(34,197,94,.35); }

    .actionBtn.reject{ border-color: rgba(255,90,95,.45); }
    .actionBtn.reject:hover{ background: color-mix(in srgb, rgba(255,90,95,.22) 35%, var(--btnHover)); }

    /* ===== Chamados (Novo) ===== */
    .callCard{
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: var(--card);
      box-shadow: var(--shadow);
      overflow:hidden;
      padding:12px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .callTitle{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      font-size:16px;
    }
    .callMeta{
      margin-top:6px;
      color:var(--muted);
      font-size:12px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .callActions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .callBtn{
      padding:10px 12px;
      border-radius: 10px;
      border:1px solid var(--line);
      background: var(--btn);
      color: var(--text);
      cursor:pointer;
      font-weight:900;
      min-width: 130px;
      text-align:center;
      transition: transform .06s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
    }
    .callBtn:hover{ background: var(--btnHover); }
    .callBtn:active{ transform: translateY(1px); }
    .callBtn.done{ border-color: rgba(34,197,94,.35); }

    /* ===== Modal Recusa ===== */
    .overlayRecusa{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.65);
      display:none;
      align-items:center;
      justify-content:center;
      padding: 16px;
      z-index: 9999;
    }
    .overlayRecusa.show{ display:flex; }
    .modalRecusa{
      width: min(560px, 100%);
      border:1px solid var(--line);
      border-radius: 14px;
      background: var(--card);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .modalRecusa .mh{
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      background: var(--card2);
    }
    .modalRecusa .mh .ttl{ font-weight: 900; }
    .modalRecusa .mh .x{
      border:1px solid var(--line);
      background: var(--btn);
      color: var(--text);
      border-radius: 10px;
      padding: 8px 10px;
      cursor:pointer;
      font-weight: 900;
    }
    .modalRecusa .mh .x:hover{ background: var(--btnHover); }
    .modalRecusa .mb{ padding: 14px 16px; display:grid; gap:10px; }

    .modalRecusa textarea{
      width: 100%;
      min-height: 110px;
      resize: vertical;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      background: var(--input);
      color: var(--text);
      outline: none;
    }
    .modalRecusa textarea:focus{
      border-color: rgba(0,120,212,.65);
      box-shadow: 0 0 0 3px var(--focus);
    }

    .modalRecusa .err{ display:none; color: var(--danger); font-weight:900; }
    .modalRecusa .mf{
      padding: 12px 16px;
      border-top: 1px solid var(--line);
      display:flex;
      justify-content:flex-end;
      gap:10px;
      background: var(--card2);
    }
    .modalRecusa .btnGhost{
      border:1px solid var(--line);
      background: var(--btn);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 10px;
      cursor:pointer;
      font-weight: 900;
    }
    .modalRecusa .btnGhost:hover{ background: var(--btnHover); }
    .modalRecusa .btnDanger{
      border:none;
      background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 70%, #000 30%));
      color:#fff;
      padding: 10px 12px;
      border-radius: 10px;
      cursor:pointer;
      font-weight: 900;
      box-shadow: var(--shadow);
    }
    .modalRecusa .btnDanger:disabled{ opacity:.55; cursor:not-allowed; }

    .items{ padding: 12px; }

    .itemsGrid{
      display:grid;
      grid-template-columns: 1.2fr .4fr .6fr;
      gap: 8px;
      align-items:center;
      border-top: 1px dashed var(--line);
      padding-top: 10px;
      margin-top: 10px;
    }

    .itemRow{
      display:grid;
      grid-template-columns: 1.2fr .4fr .6fr;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px dashed var(--line);
      align-items:center;
    }

    .itemName{ font-weight:900; }
    .itemObs{ color: var(--muted); font-size:12px; margin-top:2px; }
    .qty{ font-weight:900; text-align:center; }
    .price{ text-align:right; color: var(--muted); font-weight:900; }

    @media (max-width: 720px){
      .actionBtn{ min-width: 110px; }
      .itemsGrid, .itemRow{ grid-template-columns: 1fr .4fr; }
      .price{ display:none; }
      .callBtn{ min-width: 110px; }
    }

    .empty{
      padding: 18px;
      border:1px dashed var(--line);
      border-radius: var(--radius);
      text-align:center;
      color: var(--muted);
      background: var(--card);
      box-shadow: var(--shadow);
    }

    /* ===== KANBAN ===== */
    .kanban{
      margin-top:14px;
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap:12px;
    }
    @media (max-width: 980px){
      .kanban{ grid-template-columns: 1fr; }
    }

    .col{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .colHead{
      padding:12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid var(--line);
      background: var(--card2);
    }

    .colTitle{
      font-weight:900;
      display:flex;
      gap:8px;
      align-items:center;
    }
    .colCount{
      font-weight:900;
      color: var(--muted);
      background: var(--chip);
      border:1px solid var(--line);
      padding:4px 8px;
      border-radius:999px;
      font-size:12px;
    }
    .colBody{ padding:12px; display:grid; gap:12px; }

    /* cartão compacto para kanban */
    .mini .orderHead{ padding:12px; border-bottom:none; background: transparent; }
    .mini .items{ padding:0 12px 12px 12px; }
    .mini .itemsGrid{ display:none; }
    .mini .itemRow{ grid-template-columns: 1fr .4fr; }
    .mini .price{ display:none; }
/* ===== Liberação (UI) ===== */
.release-card{
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(32,32,34,.72);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.release-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.release-title{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.release-ico{
  width:40px; height:40px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  font-size: 18px;
}
.release-title h3{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
}
.release-sub{
  margin-top: 4px;
  font-size: 12px;
  opacity: .75;
}
.release-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.release-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 800;
}
.release-badge.ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); }
.release-badge.warn{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }
.release-badge.danger{ border-color: rgba(255,90,95,.35); background: rgba(255,90,95,.10); }

.release-list{
  margin-top: 12px;
  display:grid;
  gap:10px;
}
.release-item{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}
.release-left{
  min-width: 220px;
}
.release-row1{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.release-mesa{
  font-weight: 900;
}
.release-meta{
  font-size: 12px;
  opacity: .75;
}
.release-chips{
  margin-top: 8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.release-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 750;
  max-width: 100%;
}
.release-chip .muted{
  opacity: .75;
  font-weight: 600;
}
.release-chip .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.release-right{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.rbtn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 8px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 800;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  user-select:none;
}
.rbtn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.rbtn:active{ transform: translateY(1px); }
.rbtn.primary{
  border-color: rgba(96,205,255,.35);
  background: rgba(96,205,255,.14);
}
.rbtn.danger{
  border-color: rgba(255,90,95,.35);
  background: rgba(255,90,95,.10);
}

  
  </style>
</head>

<body>
<div class="wrap">

  <div class="topbar">
    <div class="title">
      <div class="logo">🍽️</div>
      <div>
        <h1>Painel do Garçom</h1>
        <div class="subtitle">
          Kanban • Fixar ENVIADOS • beep + piscar (somente em ENVIADO)
        </div>
      </div>
    </div>

    <div class="controls">
      <button class="btn primary" onclick="atualizar()">Atualizar</button>

      <button class="btn" id="btnFixar" onclick="toggleFixar()">📌 Fixar ENVIADOS</button>

      <button class="btn" id="btnModo" onclick="toggleModo()">🧱 Kanban</button>

      <button class="btn" onclick="ativarSom()">🔊 Som</button>
      <span id="somStatus" class="pill off"><span class="dot"></span>Som: OFF</span>

      <button class="btn" onclick="toggleTheme()">🌗 Tema</button>
    </div>
  </div>

  <div class="panel">
    <div class="filters">
      <div class="field">
        <label>Mesa</label>
        <select id="fMesa" onchange="render()">
          <option value="">Todas</option>
        </select>
      </div>

      <div class="field">
        <label>Buscar (produto)</label>
        <input id="fBusca" placeholder="Ex.: X-bacon" oninput="render()">
      </div>

      <div class="field" style="min-width:220px; flex:0.9;">
        <label>Status</label>
        <select id="fStatus" onchange="render()">
          <option value="">Todos</option>
          <option value="ENVIADO">Somente ENVIADO</option>
          <option value="ACEITO">Somente ACEITO</option>
          <option value="EM_PREPARO">Somente EM_PREPARO</option>
          <option value="ENTREGUE">Somente ENTREGUE</option>
        </select>
      </div>
    </div>

    <div class="summary">
      <div class="stat"><div class="k">ENVIADO</div><div class="v" id="sEnviado">0</div></div>
      <div class="stat"><div class="k">ACEITO</div><div class="v" id="sAceito">0</div></div>
      <div class="stat"><div class="k">EM PREPARO</div><div class="v" id="sPreparo">0</div></div>
      <div class="stat"><div class="k">ATRASADOS (&gt;10m)</div><div class="v" id="sAtraso">0</div></div>
    </div>
  </div>

  <!-- ✅ NOVO: Chamados de Garçom -->
  <div class="panel" style="margin-top:14px;">
    <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;">
      <div style="font-weight:900;">🛎️ Chamados de Garçom</div>
      <span id="chamadosPill" class="pill"><span class="dot"></span>0 pendente(s)</span>
    </div>
    <div id="chamadosList" class="list" style="margin-top:12px;"></div>
  </div>

  
  <!-- ✅ Liberação de mesa/conta (cliente só pede após liberar) -->
  <div class="release-card">
    <div class="release-head">
      <div class="release-title">
        <div class="release-ico">🧾</div>
        <div>
          <h3>
            Mesas aguardando liberação
            <span id="pendCount" class="release-badge warn" style="display:none; margin-left:8px;">0</span>
          </h3>
          <div class="release-sub">O cliente só consegue fazer pedido após o garçom liberar.</div>
        </div>
      </div>

      <div class="release-actions">
        <button class="rbtn" type="button" onclick="carregarMesasPendentes()">Atualizar</button>
      </div>
    </div>

    <div id="mesasPendentesBox" class="release-list">
      <div class="release-meta">Carregando…</div>
    </div>
  </div>

  <div id="lista" class="list"></div>

</div>


<!-- ✅ MODAL / OVERLAY LIBERAÇÃO -->
<div id="overlayLiberacao" class="overlayRecusa" onclick="overlayLiberacaoClick(event)">
  <div class="modalRecusa" role="dialog" aria-modal="true" onclick="event.stopPropagation()">
    <div class="mh">
      <div class="ttl">🔓 Liberação de mesa/conta</div>
      <button class="x" onclick="fecharLiberacao()">✕</button>
    </div>

    <div class="mb">
      <div style="font-weight:900; margin-bottom:6px;">Liberar a mesa/conta para o cliente poder pedir?</div>

      <div id="libInfo" style="color:var(--muted); font-size:12px; line-height:1.35;"></div>

      <div id="libErr" class="err"></div>
    </div>

    <div class="mf">
      <button class="btn" onclick="fecharLiberacao()">Cancelar</button>
      <button class="btn" style="border-color: rgba(255,90,95,.35)" onclick="confirmarRecusa()">Recusar</button>
      <button class="btn primary" onclick="confirmarLiberacao()">Liberar</button>
    </div>
  </div>
</div>


<!-- ✅ MODAL / OVERLAY RECUSA -->
<div id="overlayRecusa" class="overlayRecusa" onclick="overlayClick(event)">
  <div class="modalRecusa" role="dialog" aria-modal="true" onclick="event.stopPropagation()">
    <div class="mh">
      <div class="ttl">⛔ Recusar pedido</div>
      <button class="x" onclick="fecharRecusa()">✕</button>
    </div>

    <div class="mb">
      <div style="color:var(--muted); font-size:12px;">
        Informe o motivo da recusa (obrigatório)
      </div>

      <textarea id="recusaMotivo" placeholder="Ex.: Produto indisponível / erro no pedido / cozinha fechada..."></textarea>

      <div id="recusaErr" class="err"></div>
    </div>

    <div class="mf">
      <button class="btnGhost" onclick="fecharRecusa()">Cancelar</button>
      <button class="btnDanger" id="btnConfirmarRecusa" onclick="confirmarRecusa()">Confirmar</button>
    </div>
  </div>
</div>

<script>
const API = './api.php';
/* ================= THEME ================= */
function applyTheme(theme){
  document.documentElement.setAttribute("data-theme", theme);
  localStorage.setItem("garcom_theme", theme);
}
function toggleTheme(){
  const current = document.documentElement.getAttribute("data-theme") || "dark";
  applyTheme(current === "dark" ? "light" : "dark");
}
(function initTheme(){
  const saved = localStorage.getItem("garcom_theme");
  applyTheme(saved || "dark");
})();

/* ================= UTIL ================= */
function money(v){ return "R$ " + Number(v).toFixed(2); }
// Converte criado_em para timestamp (ms) de forma robusta.
// Heurística importante: muitos backends gravam DATETIME em UTC sem timezone na string.
// Se interpretarmos como horário LOCAL, em clientes -03:00 isso pode virar "hora futura",
// e a contagem fica 0 (não marca atraso). Aqui tentamos LOCAL e UTC e escolhemos o mais plausível.
function parseCriadoEmToMs(s){
  if(!s) return 0;
  s = String(s).trim();
  if(!s) return 0;

  // MySQL/ISO sem timezone: YYYY-MM-DD HH:MM:SS(.mmm)  ou  YYYY-MM-DDTHH:MM:SS(.mmm)
  const m = s.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/);
  if(m){
    const y   = Number(m[1]);
    const mo  = Number(m[2]) - 1;
    const d   = Number(m[3]);
    const h   = Number(m[4]);
    const mi  = Number(m[5]);
    const se  = Number(m[6] || 0);
    const ms  = Number((m[7] || "0").padEnd(3,"0"));

    const localMs = new Date(y, mo, d, h, mi, se, ms).getTime();
    const utcMs   = Date.UTC(y, mo, d, h, mi, se, ms);
    const now     = Date.now();

    const dLocal = now - localMs;
    const dUtc   = now - utcMs;

    // Se um deles estiver no futuro (diff negativo), preferimos o outro.
    if (Number.isFinite(dLocal) && dLocal >= 0 && (dUtc < 0 || !Number.isFinite(dUtc))) return localMs;
    if (Number.isFinite(dUtc) && dUtc >= 0 && (dLocal < 0 || !Number.isFinite(dLocal))) return utcMs;

    // Se ambos são válidos e no passado, preferimos o menor diff (mais recente) -> tende a ser o correto quando o backend grava local.
    if (Number.isFinite(dLocal) && dLocal >= 0 && Number.isFinite(dUtc) && dUtc >= 0) {
      return (dLocal <= dUtc) ? localMs : utcMs;
    }

    // fallback seguro
    return Number.isFinite(localMs) ? localMs : (Number.isFinite(utcMs) ? utcMs : 0);
  }

  // BR: DD/MM/YYYY HH:MM(:SS)
  const br = s.match(/^(\d{2})\/(\d{2})\/(\d{4})(?:[ T](\d{2}):(\d{2})(?::(\d{2}))?)?$/);
  if(br){
    const d  = Number(br[1]);
    const mo = Number(br[2]) - 1;
    const y  = Number(br[3]);
    const h  = Number(br[4] || 0);
    const mi = Number(br[5] || 0);
    const se = Number(br[6] || 0);
    const t = new Date(y, mo, d, h, mi, se).getTime();
    return Number.isFinite(t) ? t : 0;
  }

  // fallback: ISO completo com timezone
  const dt = new Date(s);
  const t = dt.getTime();
  return Number.isFinite(t) ? t : 0;
}

function minutosDesde(dataStr){
  const t = parseCriadoEmToMs(dataStr);
  if(!t) return 0;
  const diff = Date.now() - t;
  if(diff <= 0) return 0;
  return Math.floor(diff / 60000);
}
const ordemStatus = { ENVIADO:1, ACEITO:2, EM_PREPARO:3, ENTREGUE:4 };
function pode(statusAtual, alvo){
  return (ordemStatus[alvo] || 0) > (ordemStatus[statusAtual] || 0);
}
function badgeClass(st){
  if(st==="ENVIADO") return "b-enviado";
  if(st==="ACEITO") return "b-aceito";
  if(st==="EM_PREPARO") return "b-preparo";
  if(st==="ENTREGUE") return "b-entregue";
  return "b-enviado";
}

/* ================= SETTINGS (localStorage) ================= */
let fixarEnviados = localStorage.getItem("garcom_fixar") === "1";
let modoKanban    = localStorage.getItem("garcom_kanban") === "1";

function updateTogglesUI(){
  const btnFixar = document.getElementById("btnFixar");
  btnFixar.classList.toggle("toggled", fixarEnviados);
  btnFixar.textContent = fixarEnviados ? "📌 Fixar ENVIADOS: ON" : "📌 Fixar ENVIADOS";

  const btnModo = document.getElementById("btnModo");
  btnModo.classList.toggle("toggled", modoKanban);
  btnModo.textContent = modoKanban ? "📋 Lista" : "🧱 Kanban";
}
function toggleFixar(){
  fixarEnviados = !fixarEnviados;
  localStorage.setItem("garcom_fixar", fixarEnviados ? "1" : "0");
  updateTogglesUI();
  render();
}
function toggleModo(){
  modoKanban = !modoKanban;
  localStorage.setItem("garcom_kanban", modoKanban ? "1" : "0");
  updateTogglesUI();
  render();
}
updateTogglesUI();

/* ================= BEEP + FLASH ================= */
let audioCtx = null;
let somAtivo = false;
let enviadosAvisados = new Set();
let primeiraCarga = true;
let novosEnviadosIds = new Set();

function setSomUI(){
  const el = document.getElementById("somStatus");
  el.innerHTML = `<span class="dot"></span>Som: ${somAtivo ? "ON" : "OFF"}`;
  el.className = "pill " + (somAtivo ? "on" : "off");
}
function beep(){
  if(!somAtivo || !audioCtx) return;
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.type = "sine";
  osc.frequency.value = 880;
  gain.gain.value = 0.07;
  osc.connect(gain);
  gain.connect(audioCtx.destination);
  osc.start();
  osc.stop(audioCtx.currentTime + 0.12);
}
async function ativarSom(){
  try{
    if(!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    if(audioCtx.state === "suspended") await audioCtx.resume();
    somAtivo = true;
    setSomUI();
    beep();
  }catch(e){
    alert("Não foi possível ativar o som neste navegador.");
  }
}
setSomUI();

/* ================= DATA ================= */
let pedidosAll = [];

/* ================= CHAMADOS (Novo) ================= */
let chamadosAll = [];
let chamadosAvisados = new Set();
let primeiraCargaChamados = true;

function setChamadosPill(n){
  const pill = document.getElementById("chamadosPill");
  if(!pill) return;
  pill.innerHTML = `<span class="dot"></span>${n} pendente(s)`;
  pill.className = "pill " + (n > 0 ? "on" : "");
}

function callHTML(c){
  const mesa = Number(c.mesa || 0);
  const criado = c.criado_em || "";
  const id = String(c.id || "");

  return `
    <div class="callCard">
      <div>
        <div class="callTitle">🛎️ Mesa ${mesa} chamou o garçom</div>
        <div class="callMeta">
          <span class="pill">Criado: ${criado}</span>
          ${c.conta_id ? `<span class="pill">Conta #${c.conta_id}</span>` : ``}
        </div>
      </div>

      <div class="callActions">
        <button class="callBtn done" onclick="atenderChamado('${id}')">✅ Atender</button>
      </div>
    </div>
  `;
}

function detectarNovosChamados(chamados){
  if(primeiraCargaChamados){
    chamados.forEach(c => chamadosAvisados.add(String(c.id)));
    primeiraCargaChamados = false;
    return;
  }

  let temNovo = false;
  chamados.forEach(c=>{
    const id = String(c.id);
    if(!chamadosAvisados.has(id)){
      chamadosAvisados.add(id);
      temNovo = true;
    }
  });

  if(temNovo){
    beep(); setTimeout(beep, 160);
  }
}

async function carregarChamados(){
  try{
    const url = API + '?action=listar_chamados&pendentes=1';
    const r = await fetch(url, { credentials:'same-origin' });
    const out = await r.json().catch(()=>({}));

    const box = document.getElementById("chamadosList");
    if(!box) return;

    if(!r.ok || !out.ok){
      setChamadosPill(0);
      const msg = (out && out.error) ? out.error : `HTTP ${r.status}`;
      box.innerHTML = `<div class="empty">Não foi possível carregar chamados.<br><span style="opacity:.8">${escapeHtml(msg)} • ${escapeHtml(url)}</span></div>`;
      return;
    }

    chamadosAll = out.chamados || [];
    setChamadosPill(chamadosAll.length);
    detectarNovosChamados(chamadosAll);

    if(chamadosAll.length === 0){
      box.innerHTML = `<div class="empty">Sem chamados no momento.</div>`;
      return;
    }

    const badge = document.getElementById('pendCount');
if (badge){
  if (arr.length){
    badge.textContent = String(arr.length);
    badge.style.display = '';
  }else{
    badge.style.display = 'none';
  }
}

box.innerHTML = arr.map(r=>{
  const contaId = String(r.conta_id||'');
  const mesa = String(r.mesa||'');
  const aberta = String(r.aberta_em||'');
  const nome = String(r.cliente_nome||'');
  const tel = String(r.cliente_celular||'');
  const st = Number(r.liberada ?? 0); // 0 pendente | 2 recusada

  const stLabel = (st === 2) ? 'RECUSADA' : 'PENDENTE';
  const stClass = (st === 2) ? 'danger' : 'warn';
  const btnText = (st === 2) ? 'Reavaliar' : 'Autorizar';

  const chipCliente = (nome || tel)
    ? `<div class="release-chip"><span class="muted">Cliente</span> <span>${escHtml(nome || '—')}</span> <span class="muted">Tel</span> <span class="mono">${escHtml(tel || '—')}</span></div>`
    : `<div class="release-chip"><span class="muted">Cliente</span> <span>—</span> <span class="muted">Tel</span> <span class="mono">—</span></div>`;

  return `
    <div class="release-item">
      <div class="release-left">
        <div class="release-row1">
          <div class="release-mesa">Mesa <b>${escHtml(mesa)}</b></div>
          <div class="release-meta">• Conta #${escHtml(contaId)}</div>
          <span class="release-badge ${stClass}">${stLabel}</span>
        </div>

        <div class="release-meta" style="margin-top:6px;">Aberta em: ${escHtml(aberta || '-')}</div>

        <div class="release-chips">
          ${chipCliente}
        </div>
      </div>

      <div class="release-right">
        <button class="rbtn danger" type="button" onclick="abrirModalLiberacao(${Number(contaId)}, ${Number(mesa)}, true)">Recusar</button>
        <button class="rbtn primary" type="button" onclick="abrirModalLiberacao(${Number(contaId)}, ${Number(mesa)}, false)">${btnText}</button>
      </div>
    </div>
  `;
}).join('');

  }catch(e){
    const box = document.getElementById("chamadosList");
    if(box) box.innerHTML = `<div class="empty">Erro ao carregar chamados.</div>`;
    setChamadosPill(0);
  }
}

async function atenderChamado(id){
  try{
    const r = await fetch(API + '?action=atender_chamado&id=' + encodeURIComponent(id), { credentials:'same-origin' });
    const out = await r.json().catch(()=>({}));
    if(!r.ok || !out.ok){
      alert(out.error || "Não foi possível atender o chamado.");
      return;
    }
    await carregarChamados();
  }catch(e){
    alert("Erro ao atender o chamado.");
  }
}

/* ================= API STATUS ================= */
async function setStatus(pedidoId, status){
  try{
    const r = await fetch(API + '?action=status', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({pedido_id: pedidoId, status})
    });
    const out = await r.json().catch(()=>({}));
    if(!r.ok || !out.ok){
      alert(out.error || "Não foi possível atualizar o status");
      return;
    }
    await atualizar();
  }catch(e){
    alert("Erro ao atualizar status");
  }
}

/* ================= RECUSA ================= */
let pedidoRecusaId = 0;

function overlayClick(ev){
  if(ev.target && ev.target.id === "overlayRecusa") fecharRecusa();
}
function abrirRecusa(pedidoId){
  pedidoRecusaId = Number(pedidoId || 0);
  const ov = document.getElementById("overlayRecusa");
  const ta = document.getElementById("recusaMotivo");
  const err = document.getElementById("recusaErr");

  ta.value = "";
  err.style.display = "none";
  err.textContent = "";

  ov.classList.add("show");
  setTimeout(()=> ta.focus(), 50);
}
function fecharRecusa(){
  pedidoRecusaId = 0;
  document.getElementById("overlayRecusa").classList.remove("show");
}
async function confirmarRecusa(){
  const motivo = (document.getElementById("recusaMotivo").value || "").trim();
  const err = document.getElementById("recusaErr");
  const btn = document.getElementById("btnConfirmarRecusa");

  err.style.display = "none";
  err.textContent = "";

  if(!pedidoRecusaId){
    err.textContent = "Pedido inválido.";
    err.style.display = "block";
    return;
  }
  if(motivo.length < 3){
    err.textContent = "Descreva o motivo da recusa (mín. 3 caracteres).";
    err.style.display = "block";
    return;
  }

  btn.disabled = true;
  try{
    const r = await fetch(API + '?action=recusar', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({pedido_id: pedidoRecusaId, motivo})
    });
    const out = await r.json().catch(()=>({}));

    if(!r.ok || !out.ok){
      err.textContent = out.error || "Não foi possível recusar o pedido.";
      err.style.display = "block";
      btn.disabled = false;
      return;
    }

    fecharRecusa();
    await atualizar();
  }catch(e){
    err.textContent = "Erro ao comunicar com o servidor.";
    err.style.display = "block";
  }finally{
    btn.disabled = false;
  }
}
document.addEventListener("keydown", (e)=>{
  if(e.key === "Escape"){
    const ov = document.getElementById("overlayRecusa");
    if(ov && ov.classList.contains("show")) fecharRecusa();
  }
});

/* ================= FILTER HELPERS ================= */
function preencherMesas(pedidos){
  const sel = document.getElementById("fMesa");
  const atual = sel.value;

  const mesas = Array.from(new Set(pedidos.map(p => Number(p.mesa)).filter(Boolean))).sort((a,b)=>a-b);
  sel.innerHTML = `<option value="">Todas</option>` + mesas.map(m => `<option value="${m}">Mesa ${m}</option>`).join("");

  if(mesas.includes(Number(atual))) sel.value = atual;
}
function atualizarResumo(pedidos){
  let e=0,a=0,p=0,atr=0;
  pedidos.forEach(x=>{
    const st = String((x.status ?? "ENVIADO")).trim().toUpperCase();
    if(st==="ENVIADO") e++;
    if(st==="ACEITO") a++;
    if(st==="EM_PREPARO") p++;
    const mins = minutosDesde(x.criado_em);
    if(st!=="ENTREGUE" && mins>=10) atr++;
  });
  document.getElementById("sEnviado").textContent = e;
  document.getElementById("sAceito").textContent = a;
  document.getElementById("sPreparo").textContent = p;
  document.getElementById("sAtraso").textContent = atr;
}

/* ================= CARD HTML ================= */
function cardHTML(p, compact=false){
  const st = p.status || "ENVIADO";
  const mins = minutosDesde(p.criado_em);
  const atrasado = (st !== "ENTREGUE") && (mins >= 10);

  const display = p.sessao_seq ? `Pedido #${p.sessao_seq}` : `Pedido #${p.pedido_id}`;
  const badge = atrasado ? "b-atraso" : badgeClass(st);
  const badgeTxt = atrasado ? `Atrasado • ${mins} min` : `${st} • ${mins} min`;

  const itens = (p.itens || []).map(i=>{
    return `
      <div class="itemRow">
        <div>
          <div class="itemName">${i.produto}</div>
          ${i.observacao ? `<div class="itemObs">Obs: ${i.observacao}</div>` : ``}
        </div>
        <div class="qty">${i.qtd}x</div>
        <div class="price">${money(i.preco_unit)}</div>
      </div>
    `;
  }).join("");

  const isFlash = novosEnviadosIds.has(String(p.pedido_id)) && st === "ENVIADO";
  const cls = [
    "order",
    compact ? "mini" : "",
    atrasado ? "atrasado" : "",
    isFlash ? "flash" : ""
  ].join(" ").trim();

  return `
    <div class="${cls}">
      <div class="orderHead">
        <div class="left">
          <div class="mesa">Mesa ${p.mesa}</div>
          <div class="meta">
            <span class="badge ${badge}"><span class="dot"></span>${badgeTxt}</span>
            <span class="pill">Conta #${p.conta_id}</span>
            <span class="pill">${display}</span>
          </div>
          <div class="subtitle" style="margin-top:2px;">Criado em: <span style="color:var(--muted)">${p.criado_em}</span></div>
        </div>

        <div class="actions">
          <button class="actionBtn accept" ${pode(st,"ACEITO") ? `onclick="setStatus(${p.pedido_id},'ACEITO')"` : "disabled"}>
            ✅ Aceitar
          </button>

          <button class="actionBtn reject" ${(st!=="ENTREGUE" && st!=="CANCELADO") ? `onclick="abrirRecusa(${p.pedido_id})"` : "disabled"}>
            ⛔ Recusar
          </button>

          <button class="actionBtn prep" ${pode(st,"EM_PREPARO") ? `onclick="setStatus(${p.pedido_id},'EM_PREPARO')"` : "disabled"}>
            🍳 Em preparo
          </button>
          <button class="actionBtn done" ${pode(st,"ENTREGUE") ? `onclick="setStatus(${p.pedido_id},'ENTREGUE')"` : "disabled"}>
            🚚 Entregue
          </button>
        </div>
      </div>

      <div class="items">
        ${compact ? "" : `
          <div class="itemsGrid" style="border-top:none; padding-top:0; margin-top:0;">
            <div style="color:var(--muted); font-weight:900;">Itens</div>
            <div style="color:var(--muted); font-weight:900; text-align:center;">Qtd</div>
            <div style="color:var(--muted); font-weight:900; text-align:right;">Preço</div>
          </div>
        `}
        ${itens}
      </div>
    </div>
  `;
}

/* ================= RENDER (LIST / KANBAN) ================= */
function getFiltered(){
  const mesa = document.getElementById("fMesa").value.trim();
  const busca = document.getElementById("fBusca").value.trim().toLowerCase();
  const stFilter = document.getElementById("fStatus").value.trim();

  let pedidos = [...pedidosAll];
  if(mesa) pedidos = pedidos.filter(p => String(p.mesa) === mesa);
  if(stFilter) pedidos = pedidos.filter(p => (p.status || "") === stFilter);
  if(busca){
    pedidos = pedidos.filter(p =>
      (p.itens || []).some(i => String(i.produto || "").toLowerCase().includes(busca))
    );
  }
  return pedidos;
}

function sortPedidos(pedidos){
  if(!modoKanban && fixarEnviados){
    pedidos.sort((a,b) => {
      const aE = (a.status === "ENVIADO") ? 0 : 1;
      const bE = (b.status === "ENVIADO") ? 0 : 1;
      if(aE !== bE) return aE - bE;

      const da = parseCriadoEmToMs(a.criado_em);
      const db = parseCriadoEmToMs(b.criado_em);
      if(da !== db) return da - db;

      return (a.mesa - b.mesa);
    });
    return pedidos;
  }

  pedidos.sort((a,b) => {
    const sa = ordemStatus[a.status] || 99;
    const sb = ordemStatus[b.status] || 99;
    if(sa !== sb) return sa - sb;

    const da = parseCriadoEmToMs(a.criado_em);
    const db = parseCriadoEmToMs(b.criado_em);
    if(da !== db) return da - db;

    return (a.mesa - b.mesa);
  });
  return pedidos;
}

function render(){
  atualizarResumo(pedidosAll);

  const lista = document.getElementById("lista");
  const pedidos = sortPedidos(getFiltered());

  if(novosEnviadosIds.size){
    setTimeout(()=> { novosEnviadosIds.clear(); }, 3000);
  }

  if(pedidos.length === 0){
    lista.className = "list";
    lista.innerHTML = `<div class="empty">Nenhum pedido encontrado com os filtros atuais.</div>`;
    return;
  }

  if(!modoKanban){
    lista.className = "list";
    lista.innerHTML = pedidos.map(p => cardHTML(p,false)).join("");
    return;
  }

const colEnviado  = [];
const colAceito   = [];
const colPreparo  = [];
const colEntregue = [];

pedidos.forEach(p=>{
  const st = (p.status || "ENVIADO").toUpperCase().trim();

  if(st === "ENVIADO") colEnviado.push(p);
  else if(st === "ACEITO") colAceito.push(p);
  else if(st === "EM_PREPARO") colPreparo.push(p);
  else if(st === "ENTREGUE") colEntregue.push(p);
  else colEnviado.push(p); // fallback seguro
});


  const byOld = (a,b)=> parseCriadoEmToMs(a.criado_em) - parseCriadoEmToMs(b.criado_em);
  colEnviado.sort(byOld);
  colPreparo.sort(byOld);
  colEntregue.sort(byOld);

  lista.className = "";
  lista.innerHTML = `
  <div class="kanban">
    <div class="col">
      <div class="colHead">
        <div class="colTitle">🟡 ENVIADO</div>
        <div class="colCount">${colEnviado.length}</div>
      </div>
      <div class="colBody">
        ${colEnviado.map(p=>cardHTML(p,true)).join("") || `<div class="empty">Sem pedidos</div>`}
      </div>
    </div>

    <div class="col">
      <div class="colHead">
        <div class="colTitle">🔵 ACEITO</div>
        <div class="colCount">${colAceito.length}</div>
      </div>
      <div class="colBody">
        ${colAceito.map(p=>cardHTML(p,true)).join("") || `<div class="empty">Sem pedidos</div>`}
      </div>
    </div>

    <div class="col">
      <div class="colHead">
        <div class="colTitle">🟠 EM PREPARO</div>
        <div class="colCount">${colPreparo.length}</div>
      </div>
      <div class="colBody">
        ${colPreparo.map(p=>cardHTML(p,true)).join("") || `<div class="empty">Sem pedidos</div>`}
      </div>
    </div>

    <div class="col">
      <div class="colHead">
        <div class="colTitle">🟢 ENTREGUE</div>
        <div class="colCount">${colEntregue.length}</div>
      </div>
      <div class="colBody">
        ${colEntregue.map(p=>cardHTML(p,true)).join("") || `<div class="empty">Sem pedidos</div>`}
      </div>
    </div>
  </div>
`;

}

/* ================= NEW ENVIADO detection (beep + flash) ================= */
function detectarNovosEnviados(pedidos){
  if(primeiraCarga){
    pedidos.forEach(p => {
      if((p.status || "") === "ENVIADO") enviadosAvisados.add(String(p.pedido_id));
    });
    primeiraCarga = false;
    return;
  }

  let temNovoEnviado = false;

  pedidos.forEach(p => {
    if((p.status || "") !== "ENVIADO") return;
    const id = String(p.pedido_id);
    if(!enviadosAvisados.has(id)){
      enviadosAvisados.add(id);
      novosEnviadosIds.add(id);
      temNovoEnviado = true;
    }
  });

  if(temNovoEnviado){
    beep(); setTimeout(beep, 180);
  }
}


// ================= LIBERAÇÃO DE MESA/CONTA =================
function esc(s){ return String(s ?? '').replace(/[&<>"']/g, m=>({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;' }[m])); }

let libContaAtual = null;

function abrirLiberacaoModal(row){
  libContaAtual = row || null;
  const ov = document.getElementById('overlayLiberacao');
  const info = document.getElementById('libInfo');
  const err = document.getElementById('libErr');
  if(err) err.textContent = '';

  if(info){
    const mesa = row?.mesa ?? '-';
    const contaId = row?.conta_id ?? '-';
    const nome = row?.cliente_nome ? row.cliente_nome : '(cliente não identificado)';
    const tel = row?.cliente_celular ? row.cliente_celular : '-';
    const aberto = row?.aberta_em ? row.aberta_em : '-';
    const status = Number(row?.liberacao_status ?? 0);
    const badge = (status === 2) ? 'RECUSADA' : 'PENDENTE';
    info.innerHTML = `
      <div class="pill" style="margin-bottom:10px;">
        <span class="dot" style="background:${status===2 ? 'var(--danger)' : 'var(--warn)'}"></span>
        ${badge}
      </div>
      <div><b>Mesa:</b> ${esc(mesa)} &nbsp; <b>Conta:</b> #${esc(contaId)}</div>
      <div><b>Cliente:</b> ${esc(nome)} &nbsp; <b>Tel:</b> ${esc(tel)}</div>
      <div><b>Aberta em:</b> ${esc(aberto)}</div>
    `;
  }
  ov?.classList.add('show');
}

function fecharLiberacao(){
  libContaAtual = null;
  document.getElementById('overlayLiberacao')?.classList.remove('show');
}

function overlayLiberacaoClick(ev){
  if(ev?.target?.id === 'overlayLiberacao') fecharLiberacao();
}

async function confirmarLiberacao(){
  const err = document.getElementById('libErr');
  if(err) err.textContent = '';
  if(!libContaAtual?.conta_id) return;

  try{
    const r = await fetch(API + '?action=liberar_mesa', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({conta_id: Number(libContaAtual.conta_id)})
    });
    const j = await r.json();
    if(!j.ok){
      if(err) err.textContent = j.error || 'Falha ao liberar.';
      return;
    }
    fecharLiberacao();
    await carregarMesasPendentes();
    // opcional: atualizar pedidos também
    atualizar();
  }catch(e){
    if(err) err.textContent = String(e?.message || e);
  }
}

async function confirmarRecusa(){
  const err = document.getElementById('libErr');
  if(err) err.textContent = '';
  if(!libContaAtual?.conta_id) return;

  try{
    const r = await fetch(API + '?action=recusar_liberacao', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({conta_id: Number(libContaAtual.conta_id)})
    });
    const j = await r.json();
    if(!j.ok){
      if(err) err.textContent = j.error || 'Falha ao recusar.';
      return;
    }
    fecharLiberacao();
    await carregarMesasPendentes();
  }catch(e){
    if(err) err.textContent = String(e?.message || e);
  }
}

function liberarBtnLabel(status){
  status = Number(status||0);
  return (status===2) ? 'Reavaliar' : 'Autorizar';
}

function statusPill(status){
  status = Number(status||0);
  if(status===2){
    return `<span class="pill"><span class="dot" style="background:var(--danger)"></span>RECUSADA</span>`;
  }
  return `<span class="pill"><span class="dot" style="background:var(--warn)"></span>PENDENTE</span>`;
}

async function carregarMesasPendentes(){
  const box = document.getElementById('mesasPendentesBox');
  const count = document.getElementById('pendentesCount');
  if(!box) return;

  box.innerHTML = `<div class="empty">Carregando…</div>`;

  try{
    const r = await fetch(API + '?action=mesas_pendentes');
    const j = await r.json();

    if(!j.ok){
      box.innerHTML = `<div class="empty">Erro ao carregar mesas.</div>`;
      if(count) count.textContent = '0';
      return;
    }

    const arr = Array.isArray(j.mesas) ? j.mesas : [];
    if(count) count.textContent = String(arr.length);

    if(arr.length === 0){
      box.innerHTML = `<div class="empty">Nenhuma mesa aguardando liberação.</div>`;
      return;
    }

    box.innerHTML = arr.map(row=>{
      const mesa = row.mesa ?? '-';
      const contaId = row.conta_id ?? '-';
      const nome = row.cliente_nome ?? '';
      const tel = row.cliente_celular ?? '';
      const aberto = row.aberta_em ?? '-';
      const st = Number(row.liberacao_status ?? 0);

      return `
        <div class="item">
          <div class="rowTop">
            <div class="left">
              <div class="strong">Mesa ${esc(mesa)} <span class="muted">• Conta #${esc(contaId)}</span></div>
              <div class="muted" style="margin-top:4px;">
                ${nome ? `<b>Cliente:</b> ${esc(nome)} &nbsp; <b>Tel:</b> ${esc(tel||'-')}` : `<b>Cliente:</b> <span class="muted">(não identificado)</span>`}
              </div>
              <div class="muted" style="margin-top:4px;"><b>Aberta em:</b> ${esc(aberto)}</div>
            </div>
            <div class="right" style="display:flex; flex-direction:column; gap:8px; align-items:flex-end;">
              ${statusPill(st)}
              <button class="btn primary" type="button" onclick='abrirLiberacaoModal(${JSON.stringify(row).replace(/</g,"\\u003c")})'>${liberarBtnLabel(st)}</button>
            </div>
          </div>
        </div>
      `;
    }).join('');

  }catch(e){
    box.innerHTML = `<div class="empty">Erro ao carregar mesas.</div>`;
    if(count) count.textContent = '0';
  }
}
// ==========================================================

/* ================= FETCH ================= */
async function atualizar(){
  try{
    const r = await fetch(API + '?action=pedidos');
    const out = await r.json();

    if(!out.ok){
      const lista = document.getElementById("lista");
      lista.className = "list";
      lista.innerHTML = `<div class="empty">Erro ao carregar pedidos.</div>`;
      return;
    }

    // ✅ Manter ENTREGUE visível na tela do garçom enquanto a conta estiver ABERTA.
    pedidosAll = (out.pedidos || []);
    preencherMesas(pedidosAll);
    detectarNovosEnviados(pedidosAll);
    render();
  }catch(e){
    const lista = document.getElementById("lista");
    lista.className = "list";
    lista.innerHTML = `<div class="empty">Erro ao carregar pedidos.</div>`;
  }
}

/* init */
atualizar();
carregarChamados();
carregarMesasPendentes();

setInterval(atualizar, 3000);
setInterval(carregarChamados, 4000);
setInterval(carregarMesasPendentes, 4000);
</script>
</body>
</html>
