<?php
require_once __DIR__ . "/_bootstrap.php";

//require_once __DIR__ . "/../verifica_login_garcom.php";
?>
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Garçom • Débito no Cartão</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
  :root{
    /* ===== Win10 Dark (flat, sem sombras/degradê) ===== */
    --bg:#0f0f10;
    --text:#f3f3f3;
    --muted: rgba(243,243,243,.70);

    --card: rgba(32,32,34,.92);
    --card2: rgba(26,26,28,.88);
    --input: rgba(18,18,20,.92);

    --line: rgba(255,255,255,.12);
    --line2: rgba(255,255,255,.08);

    --accent:#60cdff;
    --danger:#ff5a5f;
    --ok:#22c55e;

    --radius:18px;
    --tap: 48px;
    --focus: 0 0 0 3px rgba(96,205,255,.18);
  }

  body{
    background: var(--bg);
    color: var(--text);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
    margin:0;
    padding:16px;
  }
  .wrap{ max-width:960px; margin:0 auto; }

  /* Cards / blocks */
  .cardX{
    background: var(--card);
    border:1px solid var(--line2);
    border-radius: var(--radius);
    padding:14px;
    margin-bottom:12px;
  }

  .muted{ color: var(--muted); font-size:12px }
  .mono{ font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace }

  /* Inputs */
  .field{
    background: var(--input);
    color: var(--text);
    border:1px solid var(--line);
    border-radius: 12px;
    padding:10px 12px;
    width:100%;
    outline:none;
    font-weight:850;
  }
  .field:focus{
    border-color: rgba(96,205,255,.55);
    outline: 3px solid rgba(96,205,255,.18);
  }

  /* Buttons */
  .btnX{
    border:1px solid var(--line);
    background: rgba(255,255,255,.06);
    color: var(--text);
    border-radius: 12px;
    padding:10px 12px;
    font-weight: 950;
  }
  .btnX:hover{ background: rgba(255,255,255,.09) }

  .btnPrimary{
    background: rgba(96,205,255,.14);
    border-color: rgba(96,205,255,.28);
  }
  .btnPrimary:hover{
    background: rgba(96,205,255,.18);
    border-color: rgba(96,205,255,.36);
  }

  .btnDanger{
    background: rgba(255,90,95,.12);
    border-color: rgba(255,90,95,.28);
  }
  .btnDanger:hover{
    background: rgba(255,90,95,.16);
    border-color: rgba(255,90,95,.36);
  }

  /* Pills */
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    font-weight:950;
    font-size:12px;
    background: rgba(255,255,255,.04);
  }
  .pill.ok{ border-color: rgba(34,197,94,.45); color:#bff7d2 }
  .pill.warn{ border-color: rgba(245,158,11,.45); color:#ffe7b8 }

  video{ width:100%; max-height:260px; border-radius:14px; border:1px solid var(--line); background:#000 }
  .divider{ border-color: var(--line); opacity:1 }

  /* Modal dark (flat) */
  .modal-content{
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line2);
    border-radius: 18px;
  }
  .modal-header, .modal-footer{ border-color: var(--line2); }
  .btn-close{ filter: invert(1); opacity: .85; }
  .modal-title{ font-weight: 950; }
  .modal-body .big{ font-size: 18px; font-weight: 950; letter-spacing: .2px; }
  .modal-body .sub{ color: var(--muted); font-size: 13px; margin-top: 6px; }
  .badgeX{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:999px;
    border:1px solid var(--line2);
    font-weight: 950; font-size: 12px;
    background: rgba(255,255,255,.04);
  }

  /* ===== Camera QR ===== */
  #camBox{ width:100%; }

  #video{
    width:100%;
    height:260px;
    display:block;
    background:#000;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    object-fit:cover;
    object-position:center;
  }
  @media (max-width:480px){
    #video{ height:200px; }
  }

  #qrReader{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: #000;
  }
  #qrReader video{
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
  }
  @media (max-width:480px){
    #qrReader video{ height:200px !important; }
  }

  /* remove bootstrap shadows */
  .shadow, .shadow-sm, .shadow-lg, .btn, .card, .modal-content{ box-shadow:none !important; }

</style>
</head>

<body>
<div class="wrap">

  <div class="cardX d-flex align-items-start justify-content-between flex-wrap gap-2">
    <div>
      <div style="font-weight:950;font-size:18px;">💳 Débito no Cartão (Garçom)</div>
      <div class="muted">Debita apenas cartão <b>EM_USO</b> (sessão aberta) e com saldo suficiente.</div>
    </div>
    <div class="d-flex gap-2 flex-wrap">
      <a class="btnX text-decoration-none" href="<?= BASE_URL ?>/public/garcom/index.php">⬅ Voltar</a>
    </div>
  </div>

  <div class="cardX">
    <div style="font-weight:950;">1) Ler / Informar cartão</div>

    <div class="row g-2 mt-2">
      <div class="col-md-8">
        <input id="codigo" class="field mono" placeholder="Código do cartão / cole QR">
      </div>
      <div class="col-md-2 d-grid">
        <button id="btnBuscar" class="btnX btnPrimary">Buscar</button>
      </div>
      <div class="col-md-2 d-grid">
        <button id="btnCam" class="btnX">📷 QR</button>
      </div>
    </div>

    <div id="camBox" style="display:none;margin-top:12px;">
      <div id="qrReader" style="width:100%;"></div>
      <div class="row g-2 mt-2">
        <div class="col-6 d-grid"><button id="btnTrocar" class="btnX">🔄 Trocar</button></div>
        <div class="col-6 d-grid"><button id="btnFecharCam" class="btnX btnDanger">✖ Fechar</button></div>
      </div>
      <div class="muted mt-2">Se não funcionar, digite o código manualmente.</div>
    </div>

    <hr class="divider mt-3 mb-3">

    <div class="d-flex flex-wrap gap-2 align-items-center">
      <div class="muted">Cartão:</div>
      <div class="mono" id="cCodigo" style="font-weight:950;">—</div>
      <span class="pill ok" id="cSaldo">Saldo: R$ 0,00</span>
      <span class="pill" id="cStatus">Status: —</span>
    </div>
    <div class="muted mt-2" id="cCliente">Cliente: —</div>
  </div>

  <div class="cardX">
    <div style="font-weight:950;">2) Debitar</div>

    <div class="row g-2 mt-2">
      <div class="col-md-4">
        <label class="muted mb-1">Valor (R$)</label>
        <input id="valor" class="field mono" placeholder="0,00" inputmode="decimal">
      </div>
      <div class="col-md-4">
        <label class="muted mb-1">Motivo</label>
        <input id="motivo" class="field" value="CONSUMO" placeholder="CONSUMO">
      </div>
      <div class="col-md-4">
        <label class="muted mb-1">Obs (opcional)</label>
        <input id="obs" class="field" placeholder="Ex: Água / Porção / Mesa 10 / etc">
      </div>
    </div>

    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-3">
      <div class="muted">
        <span class="badgeX">⚙️ Confirmação antes de debitar</span>
      </div>
      <div class="form-check form-switch" style="user-select:none;">
        <input class="form-check-input" type="checkbox" id="chkConfirm" checked>
        <label class="form-check-label muted" for="chkConfirm">Ativar</label>
      </div>
    </div>

    <div id="debitoBox" class="d-grid mt-3">
      <button id="btnDebitar" class="btnX btnDanger">Debitar agora</button>
    </div>

    <div id="debitoBloq" class="muted mt-2" style="display:none;">
      ⛔ Para debitar, o cartão precisa estar com status <b>EM_USO</b>.
    </div>
  </div>

</div>

<!-- Modal Mensagens -->
<div class="modal fade" id="modalMsg" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title" id="modalMsgTitle">Mensagem</div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
      </div>
      <div class="modal-body">
        <div class="big" id="modalMsgBig">—</div>
        <div class="sub" id="modalMsgSub"></div>

        <div class="d-flex flex-wrap gap-2 mt-3" id="modalMsgBadges" style="display:none;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Confirmar Débito -->
<div class="modal fade" id="modalConfirm" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">Confirmar débito</div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
      </div>
      <div class="modal-body">
        <div class="big">Você confirma este débito?</div>
        <div class="sub" id="confirmSub"></div>

        <div class="d-flex flex-wrap gap-2 mt-3">
          <span class="badgeX mono" id="confirmCodigo">Cartão: —</span>
          <span class="badgeX mono" id="confirmValor">Valor: —</span>
          <span class="badgeX" id="confirmSaldo">Saldo atual: —</span>
        </div>

        <div class="muted mt-3">
          Dica: confira o valor com o cliente antes de confirmar.
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-danger" id="btnConfirmDebito">Confirmar</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/html5-qrcode"></script>

<script>
(() => {
  const CARTAO_API = '../cartao/api.php'; // ✅ caminho correto a partir de /garcom/cartao.php

  // ===== UI modals =====
  const modalMsgEl = document.getElementById('modalMsg');
  const modalMsg = new bootstrap.Modal(modalMsgEl);
  const $mt = document.getElementById('modalMsgTitle');
  const $mb = document.getElementById('modalMsgBig');
  const $ms = document.getElementById('modalMsgSub');
  const $badges = document.getElementById('modalMsgBadges');

  function showModal(title, big, sub='', badges=[]) {
    $mt.textContent = title || 'Mensagem';
    $mb.textContent = big || '—';
    $ms.textContent = sub || '';
    if (badges && badges.length) {
      $badges.style.display = 'flex';
      $badges.innerHTML = badges.map(t => `<span class="badgeX">${escapeHtml(t)}</span>`).join('');
    } else {
      $badges.style.display = 'none';
      $badges.innerHTML = '';
    }
    modalMsg.show();
  }

  const modalConfirmEl = document.getElementById('modalConfirm');
  const modalConfirm = new bootstrap.Modal(modalConfirmEl);
  const $confirmSub = document.getElementById('confirmSub');
  const $confirmCodigo = document.getElementById('confirmCodigo');
  const $confirmValor = document.getElementById('confirmValor');
  const $confirmSaldo = document.getElementById('confirmSaldo');
  const btnConfirmDebito = document.getElementById('btnConfirmDebito');

  // ===== helpers =====
  function escapeHtml(s){
    return String(s ?? '')
      .replaceAll('&','&amp;').replaceAll('<','&lt;')
      .replaceAll('>','&gt;').replaceAll('"','&quot;')
      .replaceAll("'","&#039;");
  }
  function fmtBRL(n){
    n = Number(n||0);
    return n.toLocaleString('pt-BR', {minimumFractionDigits:2, maximumFractionDigits:2});
  }
  function normalizeCodigo(raw){
    raw = (raw || '').trim();
    if (!raw) return '';
    const tokens = raw.split(/[^A-Za-z0-9_-]+/g).filter(Boolean);
    if (tokens.length) return tokens[tokens.length - 1];
    return raw.replace(/[^A-Za-z0-9_-]/g,'') || raw;
  }

  async function apiGet(params){
    const url = CARTAO_API + '?' + new URLSearchParams(params).toString();
    const r = await fetch(url, { credentials:'same-origin' });
    const t = await r.text();
    try { return JSON.parse(t); } catch { return {ok:false, error:'Resposta inválida do servidor.'}; }
  }
  async function apiPost(action, body){
    const url = CARTAO_API + '?action=' + encodeURIComponent(action);
    const r = await fetch(url, {
      method:'POST',
      credentials:'same-origin',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify(body||{})
    });
    const t = await r.text();
    try { return JSON.parse(t); } catch { return {ok:false, error:'Resposta inválida do servidor.'}; }
  }

  // ===== state =====
  let cartaoAtual = null;
  let saldoAtual = 0;

  const elCodigo = document.getElementById('codigo');
  const elValor  = document.getElementById('valor');
  const elMotivo = document.getElementById('motivo');
  const elObs    = document.getElementById('obs');

  const cCodigo = document.getElementById('cCodigo');
  const cSaldo  = document.getElementById('cSaldo');
  const cStatus = document.getElementById('cStatus');
  const cCliente= document.getElementById('cCliente');

  const btnBuscar = document.getElementById('btnBuscar');
  const btnDebitar = document.getElementById('btnDebitar');

  const debitoBox = document.getElementById('debitoBox');
  const debitoBloq = document.getElementById('debitoBloq');
  const chkConfirm = document.getElementById('chkConfirm');

  function statusEmUso(cartao){
    return String(cartao?.status || '').toUpperCase() === 'EM_USO';
  }

  function updateDebitoUI(){
    const ok = (cartaoAtual && statusEmUso(cartaoAtual));
    debitoBox.style.display = ok ? 'grid' : 'none';
    debitoBloq.style.display = ok ? 'none' : 'block';
  }

  function setResumo(cartao, saldo){
    cartaoAtual = cartao || null;
    saldoAtual = Number(saldo || 0);

    cCodigo.textContent = cartaoAtual?.codigo || '—';
    cSaldo.textContent  = 'Saldo: R$ ' + fmtBRL(saldoAtual);

    const st = cartaoAtual?.status || '—';
    cStatus.textContent = 'Status: ' + st;

    // pinta o pill do saldo conforme
    cSaldo.classList.remove('ok','warn');
    if (saldoAtual <= 0) cSaldo.classList.add('warn');
    else cSaldo.classList.add('ok');

    const nome = (cartaoAtual?.nome||'').trim();
    const cel  = (cartaoAtual?.celular||'').trim();
    cCliente.textContent = 'Cliente: ' + (nome ? nome : '—') + (cel ? (' • ' + cel) : '');

    updateDebitoUI();
  }

  async function buscar(){
    const codigo = normalizeCodigo(elCodigo.value);
    if (!codigo) return showModal('Atenção', 'Informe o código do cartão', 'Você pode digitar ou ler o QR.');

    const j = await apiGet({action:'cartao_buscar', codigo});
    if (!j.ok) return showModal('Erro', 'Não foi possível buscar o cartão', j.error || 'Erro desconhecido.');

    setResumo(j.cartao, j.saldo);

    if (!statusEmUso(j.cartao)) {
      showModal(
        'Cartão não está em uso',
        'Este cartão não está EM_USO',
        'Para debitar, o cartão precisa estar com sessão aberta.',
        ['Status atual: ' + (j.cartao?.status || '—')]
      );
    }
  }

  function parseValorBR(v){
    v = (v || '').trim();
    if (!v) return NaN;
    // remove milhar e troca vírgula por ponto
    v = v.replace(/\./g,'').replace(',', '.');
    return parseFloat(v);
  }

  function validateDebito(valor){
    if (!cartaoAtual) return {ok:false, title:'Atenção', big:'Carregue um cartão antes de debitar.'};
    if (!statusEmUso(cartaoAtual)) return {ok:false, title:'Cartão inválido', big:'Cartão precisa estar EM_USO para debitar.'};
    if (!(valor > 0)) return {ok:false, title:'Atenção', big:'Informe um valor válido.'};

    if (saldoAtual < valor) {
      return {
        ok:false,
        title:'Saldo insuficiente',
        big:'Saldo insuficiente para este débito',
        sub:`Saldo atual: R$ ${fmtBRL(saldoAtual)} • Valor solicitado: R$ ${fmtBRL(valor)}`,
        badges:[
          'Falta: R$ ' + fmtBRL(valor - saldoAtual),
          'Cartão: ' + (cartaoAtual?.codigo || '—')
        ]
      };
    }
    return {ok:true};
  }

  async function executarDebito(valor){
    btnDebitar.disabled = true;
    btnDebitar.textContent = 'Processando...';
    try{
      const motivo = (elMotivo.value || 'CONSUMO').trim() || 'CONSUMO';
      const obs    = (elObs.value || '').trim();

      const j = await apiPost('cartao_debitar', {
        codigo: cartaoAtual.codigo,
        valor: valor,
        motivo: motivo,
        observacao: obs || null
      });

      if (!j.ok) {
        // se voltar saldo insuficiente do backend, exibe bonito também
        const msg = (j.error || 'Não foi possível debitar.');
        if (msg.toLowerCase().includes('saldo')) {
          showModal('Saldo insuficiente', 'Saldo insuficiente', msg, ['Cartão: ' + cartaoAtual.codigo]);
        } else if (msg.toLowerCase().includes('não autenticado')) {
          showModal('Sessão expirada', 'Faça login novamente', 'Sua sessão do garçom expirou. Refaça o login.');
        } else {
          showModal('Erro', 'Não foi possível debitar', msg);
        }
        return;
      }

      setResumo(j.cartao, j.saldo);

      elValor.value = '';
      elObs.value = '';

      showModal(
        'Débito confirmado',
        'Débito registrado com sucesso ✅',
        `Novo saldo: R$ ${fmtBRL(Number(j.saldo||0))}`,
        ['Cartão: ' + (j.cartao?.codigo || '—'), 'Motivo: ' + (elMotivo.value || 'CONSUMO')]
      );

    } finally {
      btnDebitar.disabled = false;
      btnDebitar.textContent = 'Debitar agora';
    }
  }

  async function debitar(){
    const valor = parseValorBR(elValor.value);
    const v = validateDebito(valor);
    if (!v.ok) {
      showModal(v.title || 'Atenção', v.big || '—', v.sub || '', v.badges || []);
      return;
    }

    // confirmação opcional
    if (chkConfirm.checked) {
      $confirmSub.textContent = (elObs.value || '').trim() ? ('Obs: ' + (elObs.value || '').trim()) : 'Sem observação.';
      $confirmCodigo.textContent = 'Cartão: ' + (cartaoAtual?.codigo || '—');
      $confirmValor.textContent  = 'Valor: R$ ' + fmtBRL(valor);
      $confirmSaldo.textContent  = 'Saldo atual: R$ ' + fmtBRL(saldoAtual);

      // remove handler antigo
      btnConfirmDebito.onclick = null;
      btnConfirmDebito.onclick = async () => {
        modalConfirm.hide();
        await executarDebito(valor);
      };

      modalConfirm.show();
      return;
    }

    await executarDebito(valor);
  }

  btnBuscar.addEventListener('click', buscar);
  elCodigo.addEventListener('keydown', (e)=>{ if (e.key === 'Enter') buscar(); });

  btnDebitar.addEventListener('click', debitar);
  elValor.addEventListener('keydown', (e)=>{ if (e.key === 'Enter') debitar(); });

  // inicia com botão bloqueado
  setResumo(null, 0);

  // ===== câmera QR (html5-qrcode) =====
  let qr = null;
  let camList = [];
  let camIndex = 0;

  const camBox = document.getElementById('camBox');

  function isSecureOk(){
    const host = location.hostname;
    const isLocal = (host === 'localhost' || host === '127.0.0.1');
    return window.isSecureContext || isLocal;
  }

  async function loadCameras(){
    if (!window.Html5Qrcode) {
      showModal(
        'Erro',
        'html5-qrcode não carregou',
        'Verifique se o script https://unpkg.com/html5-qrcode está acima do seu JS.'
      );
      return false;
    }

    if (!isSecureOk()){
      showModal(
        'Erro',
        'Câmera requer HTTPS',
        'No celular, use HTTPS (ou teste em localhost).'
      );
      return false;
    }

    try{
      camList = await Html5Qrcode.getCameras();
      if (!camList || camList.length === 0){
        showModal(
          'Erro',
          'Nenhuma câmera encontrada',
          'Verifique as permissões da câmera no navegador.'
        );
        return false;
      }

      // tenta pegar traseira (quando label vem preenchido)
      const back = camList.findIndex(c => /back|rear|traseira|environment/i.test(c.label || ''));
      camIndex = (back >= 0 ? back : 0);

      return true;
    }catch(e){
      showModal('Erro', 'Falha ao listar câmeras', String(e?.message || e));
      return false;
    }
  }

  async function stopCam(){
    try{
      if (qr){
        try { await qr.stop(); } catch(_e){}
        try { await qr.clear(); } catch(_e){}
        qr = null;
      }
    }catch(_e){}

    camBox.style.display = 'none';
    const el = document.getElementById('qrReader');
    if (el) el.innerHTML = '';
  }

  async function startCam(){
    const ok = await loadCameras();
    if (!ok) return;

    camBox.style.display = 'block';

    // recria sempre (evita estado travado)
    qr = new Html5Qrcode('qrReader');

    const config = {
      fps: 12,
      qrbox: { width: 240, height: 240 },
      disableFlip: true
    };

    const cam = camList[camIndex];
    const constraints = { deviceId: { exact: cam.id } };

    try{
      await qr.start(
        constraints,
        config,
        async (decodedText) => {
          const code = normalizeCodigo(decodedText || '');
          if (!code) return;

          elCodigo.value = code;
          await stopCam();
          await buscar();
        },
        (_err) => {} // ignora erros por frame
      );
    }catch(e){
      await stopCam();
      showModal('Erro', 'Não foi possível abrir a câmera', String(e?.message || e));
    }
  }

  async function trocarCam(){
    if (!camList || camList.length <= 1){
      showModal('Atenção', 'Não há outra câmera disponível.');
      return;
    }
    camIndex = (camIndex + 1) % camList.length;
    await stopCam();
    await startCam();
  }

  document.getElementById('btnCam').addEventListener('click', startCam);
  document.getElementById('btnFecharCam').addEventListener('click', stopCam);
  document.getElementById('btnTrocar').addEventListener('click', trocarCam);

  

})();
</script>
</body>
</html>
