<?php
session_start();

require 'conexao.php';
require 'config.php';
require 'includes/inc_verifica_caixa.php';

$label = '';
$tipo    = (isset($_GET['tipo'])) ? $_GET['tipo'] : $_SESSION['TIPO'];
$venda   = (isset($_GET['venda'])) ? $_GET['venda'] : '';
// $mesa    = (isset($_GET['mesa'])) ? $_GET['mesa'] : '' ;
$idMesa  = (isset($_GET['mesa'])) ? $_GET['mesa'] : '';
$comanda = (isset($_GET['comanda'])) ? $_GET['comanda'] : '';
$cliente = (isset($_GET['cliente'])) ? strtoupper($_GET['cliente']) : '';
$idCliente = (isset($_GET['id_cliente'])) ? $_GET['id_cliente'] : '';

if ($tipo == 'C') :
   $comanda = (isset($_SESSION['CONTROLE'])) ? $_SESSION['CONTROLE'] : $comanda;
   $cliente = (!empty($cliente)) ? $cliente : ((isset($_SESSION['CLIENTE'])) ? $_SESSION['CLIENTE'] : $cliente);
   $idCliente = (!empty($idCliente)) ? $idCliente : ((isset($_SESSION['ID_CLIENTE'])) ? $_SESSION['ID_CLIENTE'] : $idCliente);
   $venda   = (isset($_SESSION['VENDA'])) ? $_SESSION['VENDA'] : $venda;

   if (!isset($_SESSION['CONTROLE'])) :
      $_SESSION['CONTROLE'] = '';
   endif;

elseif ($tipo == 'M') :
   $sql = "SELECT mes_003 FROM mesa WHERE mes_001 = {$idMesa}";
   $stm = $pdo->prepare($sql);
   $stm->execute();
   $mesas = $stm->fetch(PDO::FETCH_OBJ);

   $mesa  = (isset($_SESSION['CONTROLE'])) ? $_SESSION['CONTROLE'] : $mesas->mes_003;
   $venda = (isset($_SESSION['VENDA'])) ? $_SESSION['VENDA'] : $venda;
   $cliente = (!empty($cliente)) ? $cliente : ((isset($_SESSION['CLIENTE'])) ? $_SESSION['CLIENTE'] : $cliente);
   $idCliente = (!empty($idCliente)) ? $idCliente : ((isset($_SESSION['ID_CLIENTE'])) ? $_SESSION['ID_CLIENTE'] : $idCliente);
endif;

$_SESSION['VENDA']      = $venda;
$_SESSION['TIPO']       = $tipo;
$_SESSION['CLIENTE']    = $cliente;
$_SESSION['ID_CLIENTE'] = $idCliente;

if ((!empty($cliente) || !empty($comanda)) && $tipo === 'C') :
   $_SESSION['ID_MESA']  = '';

   if (!empty($comanda)) :
      $_SESSION['CONTROLE'] = $comanda;
   endif;

   if (!empty($cliente)) :
      $_SESSION['CLIENTE'] = $cliente;
   endif;

   $linkListagem  = '';
   switch (TIPO_COMANDA):
      case 0:
         $linkListagem = 'comandas_nome.php';
         if (!empty($comanda)) :
            $labelControle = 'COM.: ' . str_pad($comanda, 2, '0', STR_PAD_LEFT);
            $label = $labelControle;
         endif;

         if (!empty($cliente)) :
            $labelControle = substr($cliente, 0, 10);
            $label = $labelControle;
            $labelControle .= (!empty($comanda)) ? ' | COM.: ' . str_pad($comanda, 2, '0', STR_PAD_LEFT) : '';
         endif;
         break;
      case 1:
         $linkListagem = 'comandas_numero.php';
         if (!empty($comanda)) :
            $labelControle = 'COM.: ' . str_pad($comanda, 2, '0', STR_PAD_LEFT);
            $label = $labelControle;
         endif;

         if (!empty($cliente)) :
            $labelControle = substr($cliente, 0, 10);
            $labelControle .= (!empty($comanda)) ? ' | COM.: ' . str_pad($comanda, 2, '0', STR_PAD_LEFT) : '';
         endif;
         break;
      case 2:
         if (!empty($comanda)) :
            $labelControle = 'COM.: ' . str_pad($comanda, 2, '0', STR_PAD_LEFT);
            $label = $labelControle;
         endif;

         if (!empty($cliente)) :
            $labelControle .= (!empty($cliente)) ? ' | ' . str_pad($cliente, 2, '0', STR_PAD_LEFT) : '';
         endif;
         $linkListagem = 'comandas_numero_mesa.php';
         break;
      case 3:
         if (!empty($comanda)) :
            $labelControle = 'COM.: ' . str_pad($comanda, 2, '0', STR_PAD_LEFT);
            $label = $labelControle;
         endif;

         if (!empty($cliente)) :
            $labelControle = substr($cliente, 0, 10);
            $label = $labelControle;
            $labelControle .= (!empty($comanda)) ? ' | COM.: ' . str_pad($comanda, 2, '0', STR_PAD_LEFT) : '';
         endif;

         $linkListagem = 'comandas_numero_pesquisa.php';
         break;
      case 4:
         if (!empty($comanda)) :
            $labelControle = 'COM.: ' . str_pad($comanda, 2, '0', STR_PAD_LEFT);
            $label = $labelControle;
         endif;

         if (!empty($cliente)) :
            $labelControle .= (!empty($cliente)) ? ' | ' . str_pad($cliente, 2, '0', STR_PAD_LEFT) : '';
         endif;
         $linkListagem = 'comandas_numero_nome.php';
         break;
      default:
         $linkListagem = 'comandas_numero.php';
         break;
   endswitch;

elseif (!empty($mesa)) :
   $labelControle        = 'Mesa ' . str_pad($mesa, 2, '0', STR_PAD_LEFT);
   $label = $labelControle;
   $_SESSION['CONTROLE'] = $mesa;
   $_SESSION['ID_MESA']  = $idMesa;


   if (!empty($venda)) :
      $sql = "SELECT ven_027, COALESCE(cli_001, 0) as cli_001 FROM venda WHERE ven_001 = {$venda}";
      $stm = $pdo->prepare($sql);
      $stm->execute();
      $validacao = $stm->fetch(PDO::FETCH_OBJ);
      $cliente = $validacao->ven_027;
      $_SESSION['CLIENTE'] = $cliente;

      if (!empty($validacao->cli_001)) :
         $idCliente = $validacao->cli_001;
         $_SESSION['ID_CLIENTE'] = $idCliente;
      endif;

      if (!empty($cliente)) :
         $clienteLabel = substr($cliente, 0, 10);
         $labelControle .= ' | ' . $clienteLabel;
      endif;
   endif;

   $linkListagem  = 'mesas.php';

else :

   $_SESSION['CONTROLE'] = '';
   $labelControle = 'Não Identificado';
   $linkListagem  = 'mesas.php';

endif;

// $pdo  = Conexao::getInstance();
// $sql = "SELECT DISTINCT c.cat_001, c.cat_002 ";
// $sql .= "FROM categoria c INNER JOIN materiais m ON c.cat_001 = m.cat_001 ";
// $sql .= "WHERE c.sit_001 = 4 AND m.sit_001 = 4 AND c.exibe_comanda = 1 ORDER BY cat_002";
// $stm = $pdo->prepare($sql);
// $stm->execute();
// $categorias = $stm->fetchAll(PDO::FETCH_OBJ);

$sql = "SELECT tamanho_p as tamanho, 'P' as sigla ";
$sql .= "FROM desc_tamanho_material ";
$sql .= "UNION ALL ";
$sql .= "SELECT tamanho_m as tamanho, 'M' as sigla ";
$sql .= "FROM desc_tamanho_material ";
$sql .= "UNION ALL ";
$sql .= "SELECT tamanho_g as tamanho, 'G' as sigla ";
$sql .= "FROM desc_tamanho_material ";
$sql .= "UNION ALL ";
$sql .= "SELECT tamanho_gg as tamanho, 'GG' as sigla ";
$sql .= "FROM desc_tamanho_material ";
$sql .= "UNION ALL ";
$sql .= "SELECT tamanho_extra as tamanho, 'E' as sigla ";
$sql .= "FROM desc_tamanho_material ";
$stm = $pdo->prepare($sql);
$stm->execute();
$tamanhos = $stm->fetchAll(PDO::FETCH_OBJ);

if (!empty($venda)) :

   $sql = "SELECT sit_001, COALESCE(nro_pessoas, 0) AS pessoas, COALESCE(nro_couvert_f, 0) as mulheres, COALESCE(nro_couvert_m, 0) as homens, COALESCE(cli_001, 0) as cli_001, ven_027 ";
   $sql .= "FROM venda WHERE ven_001 = {$venda}";
   $stm = $pdo->prepare($sql);
   $stm->execute();
   $validacao = $stm->fetch(PDO::FETCH_OBJ);

   if (!empty($validacao->cli_001) && empty($idCliente)) :
      $idCliente = $validacao->cli_001;
      $_SESSION['ID_CLIENTE'] = $idCliente;
   endif;

   if (!empty($validacao->ven_027) && empty($cliente)) :
      $cliente = $validacao->ven_027;
      $_SESSION['CLIENTE'] = $cliente;
   endif;

   if ($validacao->sit_001 == 21 || $validacao->sit_001 == 1) :
      header("Location: " . $linkListagem);
   endif;

   // Busca o nome real do cliente quando tem id_cliente
   $nomeCliente = '';
   if (!empty($idCliente)) :
      $sql = "SELECT cli_002 FROM clientes WHERE cli_001 = :id AND sit_001 = 4";
      $stm = $pdo->prepare($sql);
      $stm->bindValue(':id', $idCliente);
      $stm->execute();
      $dadosCliente = $stm->fetch(PDO::FETCH_OBJ);
      if ($dadosCliente) :
         $nomeCliente = $dadosCliente->cli_002;
      endif;
   endif;

   $sql = "SELECT i.ite_001, i.mat_001, i.ite_002, m.mat_003, i.ite_011, i.ite_005, i.ven_001, i.mobile_impressao, m.rodizio ";
   $sql .= "FROM venda v INNER JOIN vendaitem i ON v.ven_001 = i.ven_001 ";
   $sql .= "INNER JOIN materiais m ON m.mat_001 = i.mat_001 ";
   $sql .= "WHERE v.ven_001 = {$venda} AND i.sit_001 = 4 AND v.sit_001 = 8 ";
   $sql .= "ORDER BY i.ite_001 ";
   $stm = $pdo->prepare($sql);
   $stm->execute();
   $itensVenda = $stm->fetchAll(PDO::FETCH_OBJ);

   $sql = "SELECT ven_009 as subtotal,  ((ven_009 * " . (PORCENTAGEM_TAXA / 100) . ") + ven_009) as total, (ven_009 * " . (PORCENTAGEM_TAXA / 100) . ") as servico, ven_001 ";
   $sql .= "FROM venda ";
   $sql .= "WHERE ven_001 = {$venda} AND sit_001 = 8 ";
   $stm = $pdo->prepare($sql);
   $stm->execute();
   $totalizadores = $stm->fetch(PDO::FETCH_OBJ);

   $sql = "SELECT COALESCE(SUM(valor), 0) as valor FROM venda_pag_antecipado WHERE id_venda = {$venda}";
   $stm = $pdo->prepare($sql);
   $stm->execute();
   $antecipado = $stm->fetch(PDO::FETCH_OBJ);

   $stmTempo = $pdo->prepare("SELECT MAX(data_cadastro) as ultimo_pedido FROM vendaitem WHERE ven_001 = :venda AND sit_001 = 4");
   $stmTempo->execute([':venda' => $venda]);
   $rowTempo = $stmTempo->fetch(PDO::FETCH_OBJ);
   $tempoUltimoPedido = '';
   if (!empty($rowTempo->ultimo_pedido)) {
      $agora = new DateTime();
      $data  = new DateTime($rowTempo->ultimo_pedido);
      $diff  = $agora->diff($data);
      $minutos = ($diff->days * 24 * 60) + ($diff->h * 60) + $diff->i;
      if ($minutos < 60) {
         $tempoUltimoPedido = $minutos . 'min';
      } else {
         $horas = floor($minutos / 60);
         $mins  = $minutos % 60;
         $tempoUltimoPedido = $horas . 'h' . ($mins > 0 ? ' ' . $mins . 'min' : '');
      }
   }

endif;

$exibeCategorias = 'mostra';
$statusContainerCategoria = 'mostra';
$iconeBotao = 'keyboard_arrow_up';
$textoBotao = 'ESCONDER CATEGORIAS';

$revisao = (isset($_SESSION['PEDIDO'])) ? sizeof($_SESSION['PEDIDO']) : 0;
$exibe_finalizacao = (isset($_SESSION['PEDIDO']) && sizeof($_SESSION['PEDIDO']) > 0) ? 'mostra' : 'esconde';
$exibe_contador    = (isset($_SESSION['PEDIDO']) && sizeof($_SESSION['PEDIDO']) > 0) ? 'visivel' : 'not-visivel';
?>
<html>

<head>
   <title>Comanda Eletrônica</title>
   <?php include 'includes/inc_head.php'; ?>
   <style>
      /* Indicador deslizante customizado */
      .mdl-layout__tab-bar {
         position: relative;
      }

      .tab-indicator {
         position: absolute;
         top: 44px;
         height: 4px;
         border-radius: 10px;
         background: rgb(255, 64, 129);
         transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
         z-index: 10;
         pointer-events: none;
      }

      /* Esconde o indicador padrão do MDL */
      .mdl-layout.is-upgraded .mdl-layout__tab.is-active::after {
         display: none !important;
      }

      /* Transição suave no conteúdo das abas */
      .mdl-layout__tab-panel {
         opacity: 0;
         transform: translateX(var(--tab-slide, 20px));
         transition: opacity 0.3s ease, transform 0.3s ease;
         pointer-events: none;
      }

      .mdl-layout__tab-panel.is-active {
         opacity: 1;
         transform: translateX(0);
         pointer-events: auto;
      }

      .footer {
         position: absolute;
         left: 0;
         right: 0;
         bottom: 0;
         z-index: 1000;
         background: var(--bg-surface);
         border-top: 1px solid var(--border-color);
      }

      .box-altura {
         display: block;
         height: 60px;
      }

      .onoffswitch {
         position: relative;
         width: 100px;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
      }

      .onoffswitch-checkbox {
         display: none;
      }

      .onoffswitch-label {
         display: block;
         overflow: hidden;
         cursor: pointer;
         border: 2px solid #E3E3E3;
         border-radius: 30px;
      }

      .onoffswitch-inner {
         display: block;
         width: 200%;
         margin-left: -100%;
         transition: margin 0.3s ease-in 0s;
      }

      .onoffswitch-inner:before,
      .onoffswitch-inner:after {
         display: block;
         float: left;
         width: 50%;
         height: 30px;
         padding: 0;
         line-height: 30px;
         font-size: 12px;
         color: white;
         font-family: Trebuchet, Arial, sans-serif;
         font-weight: bold;
         box-sizing: border-box;
      }

      .onoffswitch-inner:before {
         content: "FRAÇÃO";
         padding-right: 35px;
         background-color: #3F51B5;
         color: #FFFFFF;
      }

      .onoffswitch-inner:after {
         content: "";
         padding-right: 10px;
         background-color: var(--bg-card);
         color: var(--text-secondary);
         text-align: right;
      }

      .onoffswitch-switch {
         display: block;
         width: 30px;
         margin: 0px;
         background: var(--bg-card);
         position: absolute;
         top: 0;
         bottom: 0;
         right: 71px;
         border: 2px solid #E3E3E3;
         border-radius: 30px;
         transition: all 0.3s ease-in 0s;
      }

      .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
         margin-left: 0;
      }

      .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
         right: 0px;
      }

      .mdl-layout-title.titulo {
         font-size: 13px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         max-width: calc(100vw - 180px);
         display: inline-block;
         vertical-align: middle;
         line-height: 1.4;
         flex: 1;
         min-width: 0;
      }

      .font-12 {
         font-size: 11;
      }

      .box-etapa {
         padding: 5px 5px 5px 16px;
      }

      .card-cliente {
         display: flex;
         align-items: center;
         background: #fff;
         border: 1px solid #e0e0e0;
         border-radius: 8px;
         padding: 12px;
         cursor: pointer;
         transition: all 0.2s ease;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
         margin-bottom: 8px;
      }

      .card-cliente:active,
      .card-cliente:hover {
         border-color: #3f51b5;
         box-shadow: 0 2px 8px rgba(63, 81, 181, 0.15);
      }

      .card-cliente.selecionado {
         background: #e8f5e9;
         border-color: #2e7d32;
      }

      .card-cliente-icon {
         width: 36px;
         height: 36px;
         border-radius: 50%;
         background: #e8eaf6;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         margin-right: 10px;
      }

      .card-cliente-icon i {
         color: #3f51b5;
         font-size: 20px;
      }

      .card-cliente-info {
         flex: 1;
         min-width: 0;
         display: flex;
         flex-direction: column;
         gap: 1px;
      }

      .card-cliente-nome {
         font-size: 14px;
         font-weight: 600;
         color: #212121;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
      }

      .card-cliente-detalhe {
         font-size: 12px;
         color: #757575;
      }

      .card-cliente-check {
         flex-shrink: 0;
         color: #bdbdbd;
         margin-left: 8px;
      }

      /* Favoritos */
      .btn-favorito {
         position: absolute;
         top: 8px;
         right: 8px;
         background: none;
         border: none;
         padding: 4px;
         cursor: pointer;
         z-index: 10;
         line-height: 1;
      }

      .btn-favorito i {
         font-size: 22px;
         color: #bdbdbd;
         transition: color 0.2s ease;
      }

      .btn-favorito.favoritado i {
         color: #f9a825;
      }

      .card-produto {
         position: relative;
      }

      .btn-filtro-favoritos {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 44px;
         height: 44px;
         border-radius: 50%;
         background: #fff;
         color: #bdbdbd;
         border: 2px solid #e0e0e0;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
         cursor: pointer;
         flex-shrink: 0;
         transition: all 0.2s ease;
      }

      .btn-filtro-favoritos.ativo {
         background: #fff8e1;
         color: #f9a825;
         border-color: #f9a825;
         box-shadow: 0 2px 8px rgba(249, 168, 37, 0.3);
      }

      .btn-filtro-favoritos i {
         font-size: 20px;
      }

      /* ===== Sync Overlay ===== */
      .sync-overlay {
         position: fixed;
         inset: 0;
         background: rgba(15, 17, 30, 0.82);
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         z-index: 9999;
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         visibility: hidden;
         transition: opacity 0.35s ease, visibility 0.35s ease;
      }

      .sync-overlay.active {
         opacity: 1;
         visibility: visible;
      }

      .sync-card {
         background: #fff;
         border-radius: 20px;
         padding: 36px 32px 32px;
         width: 92%;
         max-width: 340px;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
         text-align: center;
         transform: translateY(20px) scale(0.96);
         transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .sync-overlay.active .sync-card {
         transform: translateY(0) scale(1);
      }

      .sync-spinner {
         width: 56px;
         height: 56px;
         margin: 0 auto 20px;
         position: relative;
      }

      .sync-spinner::before,
      .sync-spinner::after {
         content: '';
         position: absolute;
         inset: 0;
         border-radius: 50%;
         border: 3px solid transparent;
      }

      .sync-spinner::before {
         border-top-color: #3f51b5;
         border-right-color: #3f51b5;
         animation: syncSpin 1s linear infinite;
      }

      .sync-spinner::after {
         inset: 6px;
         border-bottom-color: #7986cb;
         border-left-color: #7986cb;
         animation: syncSpin 1.5s linear infinite reverse;
      }

      .sync-icon {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: 22px;
         color: #3f51b5;
         animation: syncPulse 2s ease-in-out infinite;
      }

      @keyframes syncSpin {
         to {
            transform: rotate(360deg);
         }
      }

      @keyframes syncPulse {

         0%,
         100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
         }

         50% {
            opacity: 0.5;
            transform: translate(-50%, -50%) scale(0.85);
         }
      }

      .sync-title {
         font-size: 16px;
         font-weight: 700;
         color: #1a1f36;
         margin: 0 0 4px;
      }

      .sync-subtitle {
         font-size: 13px;
         color: #8892b0;
         margin: 0 0 24px;
         font-weight: 500;
      }

      .sync-progress-track {
         background: #e8ecf4;
         border-radius: 8px;
         height: 6px;
         width: 100%;
         overflow: hidden;
         margin-bottom: 20px;
      }

      .sync-progress-bar {
         height: 100%;
         border-radius: 8px;
         background: linear-gradient(90deg, #3f51b5, #7c4dff);
         width: 0%;
         transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
      }

      .sync-progress-bar::after {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
         animation: shimmer 1.5s ease-in-out infinite;
      }

      @keyframes shimmer {
         0% {
            transform: translateX(-100%);
         }

         100% {
            transform: translateX(100%);
         }
      }

      .sync-steps {
         display: flex;
         flex-direction: column;
         gap: 10px;
         text-align: left;
      }

      .sync-step {
         display: flex;
         align-items: center;
         gap: 10px;
         font-size: 13px;
         color: #b0b8cc;
         font-weight: 500;
         transition: color 0.3s ease;
      }

      .sync-step .step-icon {
         width: 24px;
         height: 24px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 14px;
         background: #eef0f6;
         color: #b0b8cc;
         transition: all 0.3s ease;
         flex-shrink: 0;
      }

      .sync-step.active {
         color: #3f51b5;
      }

      .sync-step.active .step-icon {
         background: #e8eaf6;
         color: #3f51b5;
         animation: stepBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .sync-step.done {
         color: #43a047;
      }

      .sync-step.done .step-icon {
         background: #e8f5e9;
         color: #43a047;
      }

      @keyframes stepBounce {
         0% {
            transform: scale(0.7);
         }

         100% {
            transform: scale(1);
         }
      }

      /* ===== Print Overlay ===== */
      .print-overlay {
         position: fixed;
         inset: 0;
         background: rgba(15, 17, 30, 0.82);
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         z-index: 9999;
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         visibility: hidden;
         transition: opacity 0.35s ease, visibility 0.35s ease;
      }

      .print-overlay.active {
         opacity: 1;
         visibility: visible;
      }

      .print-card {
         background: #fff;
         border-radius: 20px;
         padding: 36px 32px 32px;
         width: 92%;
         max-width: 340px;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
         text-align: center;
         transform: translateY(20px) scale(0.96);
         transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .print-overlay.active .print-card {
         transform: translateY(0) scale(1);
      }

      .print-spinner {
         width: 56px;
         height: 56px;
         margin: 0 auto 20px;
         position: relative;
      }

      .print-spinner::before,
      .print-spinner::after {
         content: '';
         position: absolute;
         inset: 0;
         border-radius: 50%;
         border: 3px solid transparent;
      }

      .print-spinner::before {
         border-top-color: #3f51b5;
         border-right-color: #3f51b5;
         animation: printSpin 1s linear infinite;
      }

      .print-spinner::after {
         inset: 6px;
         border-bottom-color: #7986cb;
         border-left-color: #7986cb;
         animation: printSpin 1.5s linear infinite reverse;
      }

      .print-icon-anim {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: 22px;
         color: #3f51b5;
         animation: printPulse 2s ease-in-out infinite;
      }

      @keyframes printSpin {
         to {
            transform: rotate(360deg);
         }
      }

      @keyframes printPulse {

         0%,
         100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
         }

         50% {
            opacity: 0.5;
            transform: translate(-50%, -50%) scale(0.85);
         }
      }

      .print-title {
         font-size: 16px;
         font-weight: 700;
         color: #1a1f36;
         margin: 0 0 4px;
      }

      .print-subtitle {
         font-size: 13px;
         color: #8892b0;
         margin: 0;
         font-weight: 500;
      }

      /* ── Dark Theme Overrides ── */
      [data-theme="dark"] .sync-card,
      [data-theme="dark"] .print-card {
         background: var(--bg-card);
      }

      [data-theme="dark"] .sync-title,
      [data-theme="dark"] .print-title {
         color: var(--text-primary);
      }

      [data-theme="dark"] .sync-subtitle,
      [data-theme="dark"] .print-subtitle {
         color: var(--text-secondary);
      }

      [data-theme="dark"] .sync-progress-track {
         background: var(--border-color);
      }

      [data-theme="dark"] .sync-step {
         color: var(--text-label);
      }

      [data-theme="dark"] .sync-step .step-icon {
         background: var(--bg-surface);
         color: var(--text-label);
      }

      [data-theme="dark"] .sync-step.active {
         color: var(--color-primary);
      }

      [data-theme="dark"] .sync-step.active .step-icon {
         background: #1a237e;
         color: var(--color-primary);
      }

      [data-theme="dark"] .sync-step.done {
         color: #66bb6a;
      }

      [data-theme="dark"] .sync-step.done .step-icon {
         background: #1b3a1d;
         color: #66bb6a;
      }

      [data-theme="dark"] .card-cliente {
         background: var(--bg-card);
         border-color: var(--border-color);
      }

      [data-theme="dark"] .card-cliente:hover {
         border-color: var(--color-primary);
         box-shadow: 0 2px 8px rgba(92, 107, 192, 0.2);
      }

      [data-theme="dark"] .card-cliente.selecionado {
         background: #1b3a1d;
         border-color: #2e7d32;
      }

      [data-theme="dark"] .card-cliente-icon {
         background: #1a237e;
      }

      [data-theme="dark"] .card-cliente-icon i {
         color: var(--color-primary);
      }

      [data-theme="dark"] .card-cliente-nome {
         color: var(--text-primary);
      }

      [data-theme="dark"] .card-cliente-detalhe {
         color: var(--text-secondary);
      }

      [data-theme="dark"] .card-cliente-check {
         color: var(--text-label);
      }

      [data-theme="dark"] .btn-favorito i {
         color: var(--text-label);
      }

      /* ── Dark: Consumo tab - Detalhes header button ── */
      [data-theme="dark"] .btn-vincular-cliente-det {
         background: var(--bg-surface) !important;
         border-color: var(--border-color) !important;
         color: var(--color-primary) !important;
      }

      [data-theme="dark"] .btn-vincular-cliente-det .badge-cliente-det {
         border-color: var(--bg-card) !important;
      }

      /* ── Dark: Consumo tab - último pedido div ── */
      [data-theme="dark"] .box-ultimo-pedido {
         background: #2a2000 !important;
         border-bottom-color: #5c4c00 !important;
      }

      [data-theme="dark"] .box-ultimo-pedido .icon-tempo {
         background: #332b00 !important;
      }

      [data-theme="dark"] .box-ultimo-pedido .label-tempo {
         color: var(--text-secondary) !important;
      }

      [data-theme="dark"] .box-ultimo-pedido .valor-tempo {
         color: #ffb300 !important;
      }

      /* ── Dark: Consumo tab - Cliente vinculado ── */
      [data-theme="dark"] #box-cliente-vinculado {
         border-color: var(--border-color) !important;
      }

      [data-theme="dark"] #box-cliente-vinculado .icon-cliente-vinculado {
         background: #1a237e !important;
      }

      [data-theme="dark"] #box-cliente-vinculado .icon-cliente-vinculado i {
         color: var(--color-primary) !important;
      }

      [data-theme="dark"] #detalhe-cliente-nome {
         color: var(--text-primary) !important;
      }

      [data-theme="dark"] .btn-historico-cliente,
      [data-theme="dark"] .btn-trocar-cliente {
         background: var(--bg-surface) !important;
         border-color: var(--border-color) !important;
      }

      /* ── Dark: Modal Alterar Cliente ── */
      [data-theme="dark"] #modal-alterar-cliente .modal-cliente-container {
         background: var(--bg-card) !important;
      }

      [data-theme="dark"] #modal-alterar-cliente .modal-cliente-header {
         background: var(--bg-surface) !important;
         border-bottom-color: var(--border-color) !important;
      }

      [data-theme="dark"] #modal-alterar-cliente .modal-cliente-header h5 {
         color: var(--color-primary) !important;
      }

      [data-theme="dark"] #modal-alterar-cliente #btn-fechar-modal-cliente {
         color: var(--text-secondary) !important;
      }

      [data-theme="dark"] #modal-alterar-cliente .modal-cliente-pesquisa {
         border-bottom-color: var(--border-color) !important;
      }

      [data-theme="dark"] #modal-alterar-cliente .modal-cliente-pesquisa input {
         background: var(--bg-input) !important;
         border-color: var(--border-color) !important;
         color: var(--text-primary) !important;
      }

      [data-theme="dark"] #modal-alterar-cliente .modal-cliente-footer {
         background: var(--bg-surface) !important;
         border-top-color: var(--border-color) !important;
      }

      [data-theme="dark"] #modal-alterar-cliente .modal-cliente-footer summary {
         color: var(--color-primary) !important;
      }

      [data-theme="dark"] #modal-alterar-cliente .modal-cliente-footer label {
         color: var(--text-secondary) !important;
      }

      [data-theme="dark"] #modal-alterar-cliente .modal-cliente-footer input {
         background: var(--bg-input) !important;
         border-color: var(--border-color) !important;
         color: var(--text-primary) !important;
      }

      /* ── Dark: Modal Histórico ── */
      [data-theme="dark"] #modal-historico-cliente .modal-hist-container {
         background: var(--bg-card) !important;
      }

      [data-theme="dark"] #modal-historico-cliente .modal-hist-header {
         background: var(--bg-surface) !important;
         border-bottom-color: var(--border-color) !important;
      }

      [data-theme="dark"] #modal-historico-cliente .modal-hist-header span {
         color: var(--text-primary) !important;
      }

      [data-theme="dark"] #modal-historico-cliente #btn-fechar-modal-historico {
         color: var(--text-secondary) !important;
      }

      [data-theme="dark"] #box-historico-conteudo {
         background: var(--bg-card);
      }

      /* ── Dark: Cards de histórico (gerados via JS) ── */
      [data-theme="dark"] .hist-card {
         background: var(--bg-surface) !important;
         border-color: var(--border-color) !important;
      }

      [data-theme="dark"] .hist-card-header {
         background: #1a1a2e !important;
         border-bottom-color: var(--border-color) !important;
      }

      [data-theme="dark"] .hist-card-header .hist-pedido-num {
         color: var(--text-primary) !important;
      }

      [data-theme="dark"] .hist-card-header .hist-tipo-badge {
         color: var(--text-secondary) !important;
      }

      [data-theme="dark"] .hist-card-header .hist-data {
         color: var(--color-primary) !important;
      }

      [data-theme="dark"] .hist-card-header .hist-hora {
         color: var(--text-secondary) !important;
      }

      [data-theme="dark"] .hist-item-row {
         border-bottom-color: var(--border-color) !important;
      }

      [data-theme="dark"] .hist-item-row .hist-item-qtde,
      [data-theme="dark"] .hist-item-row .hist-item-desc {
         color: var(--text-primary) !important;
      }

      [data-theme="dark"] .hist-item-row .hist-item-tam {
         color: var(--text-secondary) !important;
      }

      [data-theme="dark"] .hist-item-row .hist-item-valor {
         color: var(--text-secondary) !important;
      }

      [data-theme="dark"] .hist-total-row {
         border-top-color: var(--border-color) !important;
      }

      [data-theme="dark"] .hist-total-row .hist-total-valor {
         color: #66bb6a !important;
      }

      [data-theme="dark"] .hist-empty-msg {
         color: var(--text-secondary) !important;
      }
   </style>
</head>

<body>
   <script>
      loadPagina()
   </script>
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs" id="page" style="display:none">

      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">
            <input type="hidden" class="label" value="<?= $label ?>">
            <input type="hidden" class="cliente-mesa" value="<?= $_SESSION['CLIENTE'] ?>">
            <input type="hidden" id="id-cliente" value="<?= $_SESSION['ID_CLIENTE'] ?>">
            <span class="mdl-layout-title titulo" id="titulo-cliente" style="cursor:pointer; display:flex; flex-direction:column; line-height:1.2; flex:1; min-width:0;">
               <span id="titulo-cliente-linha1"><?= $labelControle ?></span>
               <?php if (!empty($idCliente) && !empty($nomeCliente)) : ?>
                  <span id="titulo-cliente-linha2" style="font-size:11px; opacity:0.85; font-weight:400;"><?= htmlspecialchars($nomeCliente) ?></span>
               <?php else : ?>
                  <span id="titulo-cliente-linha2" style="font-size:11px; opacity:0.85; font-weight:400; display:none;"></span>
               <?php endif; ?>
            </span>
            <?php if (PERMITE_REIMPRESSAO) : ?>
               <a href="javascript::void(0)" class="link-topo link-imprimir" style="flex-shrink:0; margin-left:auto;">
                  <i class="material-icons text-right margem-direita-md text-white">local_printshop</i>
               </a>
            <?php endif; ?>
            <a href="javascript::void(0)" class="link-topo link-atualizar" style="flex-shrink:0; <?= PERMITE_REIMPRESSAO ? '' : 'margin-left:auto;' ?>">
               <i class="material-icons text-white">autorenew</i>
            </a>
            <a href="<?= $linkListagem ?>" class="link-topo link-mesas" style="flex-shrink:0;">
               <i class="material-icons text-white">view_comfy</i>
            </a>
         </div>

         <!-- Tabs -->
         <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
            <a href="#scroll-tab-1" class="mdl-layout__tab is-active" id='header-scroll-tab-1' onclick="history.pushState('scroll-tab-1','Comanda Eletrônica','#scroll-tab-1'); return false;">
               Consumo
            </a>
            <a href="#scroll-tab-2" class="mdl-layout__tab" id='header-scroll-tab-2' onclick="history.pushState('scroll-tab-2','Comanda Eletrônica','#scroll-tab-2'); return false;">
               Produtos
            </a>
            <a href="#scroll-tab-3" class="mdl-layout__tab" id='header-scroll-tab-3' onclick="history.pushState('scroll-tab-3','Comanda Eletrônica','#scroll-tab-3'); return false;">
               Pendente <span class="mdl-badge <?= $exibe_contador ?>" data-badge="<?= $revisao ?>"></span>
            </a>
            <div class="tab-indicator" id="tab-indicator"></div>
         </div>

      </header>

      <?php include 'includes/inc_menu.php'; ?>

      <main class="mdl-layout__content">

         <!-- SEÇÃO ITENS DA MESA -->
         <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
            <div class="page-content">

               <?php if (!empty($itensVenda)) : ?>
                  <?php foreach ($itensVenda as $item) :
                     $backImpressao = '';
                     //$backImpressao = ($item->ite_011 == 'S') ? 'bk-red-2' : '';
                  ?>
                     <div class="card-consumo <?= $backImpressao ?>">
                        <div class="mdl-card__title">
                           <h3 class="mdl-card__title-text">
                              <?= number_format($item->ite_002, 3, ',', '.') ?> - <?= strtoupper($item->mat_003) ?>
                           </h3>
                        </div>

                        <div class="card-valor">
                           <span class="text-left text-red valor">R$ <?= number_format($item->ite_005, 2, ',', '.') ?></span>
                        </div>

                        <div class="mdl-card__actions mdl-card--border totalizador detalhe">
                           <?php if (PERMITE_REIMPRESSAO && $item->rodizio == 0) : ?>
                              &nbsp;&nbsp;
                              <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox<?= $item->ite_001 ?>">
                                 <input type="checkbox" id="checkbox<?= $item->ite_001 ?>" class="ckb mdl-checkbox__input" <?= ($item->ite_011 == 'S') ? '' : '' ?> data-item='<?= $item->ite_001 ?>'>
                                 <span class="mdl-checkbox__label">IMPRIMIR</span>
                              </label>
                           <?php endif; ?>
                           <a href="detalhes.php?venda=<?= $item->ven_001 ?>&item=<?= $item->ite_001 ?>" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect btn-opcoes">
                              <i class="material-icons">search</i> DETALHES
                           </a>&nbsp;
                           <?php if ($item->rodizio == 1) : ?>
                              <a href="rodizio.php?venda=<?= $item->ven_001 ?>&mesa=<?= $idMesa ?>&comanda=<?= $comanda ?>&tipo=<?= $tipo ?>&item=<?= $item->ite_001 ?>&codigo=<?= $item->mat_001 ?>&qtde=<?= $item->ite_002 ?>&situacao=edicao" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect btn-opcoes rodizio" data-id='<?= $item->mat_001 ?>'>
                                 <i class="material-icons">group</i> RODIZIO
                              </a>
                           <?php else : ?>
                              <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect btn-opcoes duplicar" data-id='<?= $item->mat_001 ?>'>
                                 <i class="material-icons">content_copy</i> DUPLICAR
                              </a>
                           <?php endif; ?>
                        </div>
                     </div>
                  <?php endforeach; ?>

                  <div class="card-detalhe-geral">
                     <div class="mdl-card__title" style="display:flex; align-items:center; justify-content:space-between;">
                        <h3 class="mdl-card__title-text text-red">
                           DETALHES
                        </h3>
                        <button class="mdl-button mdl-js-button btn-vincular-cliente-det" style="min-width:auto; padding:4px 10px; border-radius:8px; border:1px solid #dde1ea; background:#fff; color:#3f51b5; font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:4px; vertical-align:middle; line-height:1; position:relative;" title="Vincular cliente à venda">
                           <i class="material-icons" style="font-size:18px;">person_add</i> CLIENTE
                           <span class="badge-cliente-det" style="width:10px; height:10px; border-radius:50%; background:#4caf50; border:2px solid #fff; position:absolute; top:-2px; right:-2px; display:<?= (!empty($idCliente) || !empty($nomeCliente)) ? 'block' : 'none' ?>;"></span>
                        </button>
                     </div>

                     <?php if (!empty($tempoUltimoPedido)): ?>
                        <div class="box-ultimo-pedido" style="display:flex; align-items:center; gap:10px; padding:10px 16px; margin:0; background:#fff8e1; border-bottom:1px solid #ffe082; border-radius:0;">
                           <div class="icon-tempo" style="width:32px; height:32px; border-radius:50%; background:#fff3e0; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                              <i class="material-icons" style="font-size:18px; color:#f57c00;">schedule</i>
                           </div>
                           <div style="display:flex; flex-direction:column; gap:1px;">
                              <span class="label-tempo" style="font-size:11px; color:#999; text-transform:uppercase; letter-spacing:0.5px; font-weight:600;">último pedido</span>
                              <span class="valor-tempo" style="font-size:15px; color:#e65100; font-weight:700; text-transform:lowercase;"><?= $tempoUltimoPedido ?> atrás</span>
                           </div>
                        </div>
                     <?php endif; ?>

                     <?php if (!empty($idCliente) || !empty($cliente)) : ?>
                        <div class="mdl-card__actions mdl-card--border totalizador" style="display:flex; align-items:center; justify-content:space-between; padding:10px 16px;" id="box-cliente-vinculado">
                           <div style="display:flex; align-items:center; gap:10px; min-width:0; flex:1;">
                              <div class="icon-cliente-vinculado" style="width:34px; height:34px; border-radius:50%; background:#e8eaf6; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                                 <i class="material-icons" style="font-size:18px; color:#3f51b5;">person</i>
                              </div>
                              <span id="detalhe-cliente-nome" style="font-size:14px; font-weight:600; color:#212121; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                 <?= htmlspecialchars(!empty($nomeCliente) ? $nomeCliente : $cliente) ?>
                              </span>
                           </div>
                           <div style="display:flex; align-items:center; gap:6px;">
                              <button class="mdl-button mdl-js-button btn-historico-cliente" style="min-width:auto; padding:4px 8px; border-radius:8px; border:1px solid #dde1ea; background:#fff; color:#ff9800; font-size:11px; font-weight:600; display:<?= !empty($idCliente) ? 'inline-flex' : 'none' ?>; align-items:center; gap:4px; vertical-align:middle; line-height:1;" title="Últimos pedidos do cliente">
                                 <i class="material-icons" style="font-size:16px;">history</i>
                              </button>
                              <button class="mdl-button mdl-js-button btn-trocar-cliente" style="min-width:auto; padding:4px 10px; border-radius:8px; border:1px solid #dde1ea; background:#fff; color:#3f51b5; font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:4px; vertical-align:middle; line-height:1;">
                                 <i class="material-icons" style="font-size:16px;">swap_horiz</i> TROCAR
                              </button>
                           </div>
                        </div>
                     <?php else : ?>
                        <div class="mdl-card__actions mdl-card--border totalizador" style="display:none; align-items:center; justify-content:space-between; padding:10px 16px;" id="box-cliente-vinculado">
                           <div style="display:flex; align-items:center; gap:10px; min-width:0; flex:1;">
                              <div class="icon-cliente-vinculado" style="width:34px; height:34px; border-radius:50%; background:#e8eaf6; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                                 <i class="material-icons" style="font-size:18px; color:#3f51b5;">person</i>
                              </div>
                              <span id="detalhe-cliente-nome" style="font-size:14px; font-weight:600; color:#212121; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"></span>
                           </div>
                           <div style="display:flex; align-items:center; gap:6px;">
                              <button class="mdl-button mdl-js-button btn-historico-cliente" style="min-width:auto; padding:4px 8px; border-radius:8px; border:1px solid #dde1ea; background:#fff; color:#ff9800; font-size:11px; font-weight:600; display:none; align-items:center; gap:4px; vertical-align:middle; line-height:1;" title="Últimos pedidos do cliente">
                                 <i class="material-icons" style="font-size:16px;">history</i>
                              </button>
                              <button class="mdl-button mdl-js-button btn-trocar-cliente" style="min-width:auto; padding:4px 10px; border-radius:8px; border:1px solid #dde1ea; background:#fff; color:#3f51b5; font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:4px; vertical-align:middle; line-height:1;">
                                 <i class="material-icons" style="font-size:16px;">swap_horiz</i> TROCAR
                              </button>
                           </div>
                        </div>
                     <?php endif; ?>

                     <div class="mdl-card__actions mdl-card--border  totalizador">
                        <?php
                        $disabled = '';
                        $esconde = '';
                        $label = 'MULHERES (COUVERT)';
                        if (($tipo == 'M' && TIPO_COUVERT_MESA == 1) || ($tipo == 'C' && TIPO_COUVERT_COMANDA == 1)) :
                           $disabled = 'disabled';
                           $esconde = 'esconde';
                           $label = '(DESATIVADO) MULHERES';
                        endif; ?>

                        <p><?= $label ?></p>
                        <a href="javascript:void(0)" class="btn-remove-mulher <?= $esconde ?>">
                           <i class="material-icons text-red md-48 btn-qtde">remove_circle</i>
                        </a>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label qtde is-dirty is-upgraded container-qtde" data-upgraded=",MaterialTextfield">
                           <input <?= $disabled ?> class="mdl-textfield__input quantidade qtde-item' type=" number" id="quantidade-mulher" value="<?= $validacao->mulheres ?>" />
                        </div>
                        <a href="javascript:void(0)" class="btn-adiciona-mulher <?= $esconde ?>">
                           <i class="material-icons text-green md-48 btn-qtde">add_circle</i>
                        </a>

                        <?php if (($tipo == 'M' && TIPO_COUVERT_MESA == 0) || ($tipo == 'C' && TIPO_COUVERT_COMANDA == 0)) : ?>
                           <p>HOMENS (COUVERT)</p>
                        <?php else : ?>
                           <p>QTDE COUVERT</p>
                        <?php endif; ?>
                        <a href="javascript:void(0)" class="btn-remove-homem">
                           <i class="material-icons text-red md-48 btn-qtde">remove_circle</i>
                        </a>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label qtde is-dirty is-upgraded container-qtde" data-upgraded=",MaterialTextfield">
                           <input class="mdl-textfield__input quantidade qtde-item" type='number' id='quantidade-homem' value="<?= $validacao->homens ?>" />
                        </div>
                        <a href="javascript:void(0)" class="btn-adiciona-homem">
                           <i class="material-icons text-green md-48 btn-qtde">add_circle</i>
                        </a>

                        <p>QTDE DE PESSOAS (DIVISÃO DA CONTA)</p>
                        <a href="javascript:void(0)" class="btn-remove-pessoa">
                           <i class="material-icons text-red md-48 btn-qtde">remove_circle</i>
                        </a>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label qtde is-dirty is-upgraded container-qtde" data-upgraded=",MaterialTextfield">
                           <input class="mdl-textfield__input quantidade qtde-item' type=" number" id="quantidade-pessoa" value="<?= $validacao->pessoas ?>" />
                        </div>
                        <a href="javascript:void(0)" class="btn-adiciona-pessoa">
                           <i class="material-icons text-green md-48 btn-qtde">add_circle</i>
                        </a>

                        <p style="height: 10px; display: inline-block;"></p>
                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored btn-gravar-pessoas" data-upgraded=",MaterialButton" style="width: 100%">
                           <i class="material-icons">check_circle</i>
                           Gravar
                        </button>

                     </div>
                  </div>

                  <?php if (EXIBE_TOTALIZADOR): ?>
                     <div class="card-detalhe-geral">
                        <div class="mdl-card__title">
                           <h3 class="mdl-card__title-text text-red">
                              TOTALIZADORES
                           </h3>
                        </div>

                        <div class="mdl-card__actions mdl-card--border  totalizador">
                           <p>( + ) SUB-TOTAL R$ <?= number_format($totalizadores->subtotal, 2, ',', '.') ?></p>
                           <p>
                              ( + ) TX DE SERVIÇO
                              <?php if ((TAXA_MESA == 1 && $tipo == 'M') || (TAXA_COMANDA == 1 && $tipo == 'C')) : ?>
                                 R$ <?= number_format($totalizadores->servico, 2, ',', '.') ?>
                              <?php else : ?>
                                 R$ 0,00
                              <?php endif; ?>
                           </p>
                           <p> ( - ) PAG. ANTECIPADO R$ <?= number_format($antecipado->valor, 2, ',', '.') ?></p>
                           <hr>
                           <span class="text-left text-red">
                              ( = ) TOTAL
                              <?php
                              if ((TAXA_MESA && $tipo == 'M') || (TAXA_COMANDA && $tipo == 'C')) : ?>
                                 R$ <?= number_format(($totalizadores->total - $antecipado->valor), 2, ',', '.') ?>
                              <?php else : ?>
                                 R$ <?= number_format(($totalizadores->subtotal - $antecipado->valor), 2, ',', '.') ?>
                              <?php endif; ?>
                           </span>
                           <p style="height: 10px; display: inline-block;"></p>
                        </div>
                     </div>
                  <?php else : ?>
                     <br><br>
                  <?php endif; ?>

               <?php else : ?>
                  <h4 class='text-center text-blue vazio2'>Nenhum Item Consumido <i class='material-icons'>thumb_up</i></h4>

                  <div class="card-detalhe-geral">
                     <div class="mdl-card__title">
                        <h3 class="mdl-card__title-text text-red">
                           QTDE DE PESSOAS (DIVISÃO DA CONTA)
                        </h3>
                     </div>

                     <div class="mdl-card__actions mdl-card--border  totalizador">
                        <a href="javascript:void(0)" class="btn-remove-pessoa">
                           <i class="material-icons text-red md-48 btn-qtde">remove_circle</i>
                        </a>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label qtde is-dirty is-upgraded container-qtde" data-upgraded=",MaterialTextfield">
                           <input class="mdl-textfield__input quantidade qtde-item' disabled=" disabled" type="number" id="quantidade-pessoa" value="<?= (isset($validacao)) ? $validacao->pessoas : '1' ?>" />
                        </div>
                        <a href="javascript:void(0)" class="btn-adiciona-pessoa">
                           <i class="material-icons text-green md-48 btn-qtde">add_circle</i>
                        </a>

                     </div>
                  </div>

               <?php endif; ?>
            </div>

            <?php if (!empty($itensVenda)) : ?>
               <div class="box-altura"></div>
            <?php endif; ?>

         </section>

         <!-- SEÇÃO CATEGORIAS E PRODUTOS -->
         <section class="mdl-layout__tab-panel" id="scroll-tab-2">
            <div class="container-scroll div-geral-categorias <?= $statusContainerCategoria ?> <?= $exibeCategorias ?>">
               <div class="page-content container-categorias">

               </div>
            </div>

            <a href="javascript::void(0)" class="acao-div-categoria">
               <i class="material-icons" style="font-size:18px;"><?= $iconeBotao ?></i>
               <span><?= $textoBotao ?></span>
            </a>

            <div class="pesquisa-wrapper" style="display:flex; align-items:center; gap:8px;">
               <div style="position:relative; flex:1;">
                  <i class="material-icons pesquisa-icon">search</i>
                  <input class="pesquisa-input" type="text" id="pesquisa" autocomplete="off" placeholder="Buscar por código ou descrição...">
               </div>
               <a href="javascript:void(0)" id="btn-filtro-favoritos" class="btn-filtro-favoritos" title="Filtrar favoritos">
                  <i class="material-icons">star</i>
               </a>
               <a href="javascript:void(0)" id="btn-abrir-modal-categorias" style="flex-shrink:0; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#3f51b5; color:#fff; box-shadow:0 2px 8px rgba(63,81,181,0.3);" title="Ver todas categorias">
                  <i class="material-icons" style="font-size:20px;">filter_list</i>
               </a>
            </div>

            <div id="produtos-categoria">

            </div>
         </section>

         <!-- SEÇÃO PEDIDO PARA REVISÃO -->
         <section class="mdl-layout__tab-panel" id="scroll-tab-3">
            <div id="produtos-revisao" style="padding-bottom: 70px;"></div>
         </section>

      </main>
   </div>

   <?php if (!empty($itensVenda)) : ?>
      <div class="footer-fixo" id="footer-fechamento">
         <button class="btn-footer btn-footer-danger btn-footer-full btn-fechamento">
            <i class="material-icons">local_printshop</i>
            Pré-Fechamento
         </button>
      </div>
   <?php endif; ?>

   <div class="footer-fixo container-finalizar esconde">
      <button class="btn-footer btn-footer-danger btn-limpar">
         <i class="material-icons">cancel</i>
         LIMPAR
      </button>
      <button class="btn-footer btn-footer-success btn-finalizar">
         <i class="material-icons">check_circle</i>
         FINALIZAR
      </button>
   </div>

   <!-- Bottom Sheet Categorias -->
   <div class="modal-categorias-overlay" id="modal-categorias-overlay"></div>
   <div class="modal-categorias-sheet" id="modal-categorias">
      <div class="bottomsheet-handle"></div>
      <div class="modal-categorias-header">
         <h5><i class="material-icons">filter_list</i> Categorias</h5>
         <button class="modal-categorias-close" id="btn-fechar-modal-categorias">&times;</button>
      </div>
      <div class="modal-categorias-body" id="modal-categorias-body">
      </div>
   </div>

   <!-- Modal Alterar Cliente -->
   <div id="modal-alterar-cliente" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(15,17,30,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:9999; justify-content:center; align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:30px 0;">
      <div style="background:#fff; border-radius:10px; width:94%; max-width:440px; margin:0 auto; display:flex; flex-direction:column; box-shadow:0 8px 30px rgba(0,0,0,0.3);" class="modal-cliente-container">
         <div style="padding:16px 20px; border-bottom:1px solid #e0e0e0; display:flex; align-items:center; justify-content:space-between; background:#f5f6fa; border-radius:10px 10px 0 0;" class="modal-cliente-header">
            <h5 style="margin:0; color:#3f51b5; font-size:17px; display:flex; align-items:center; gap:8px;"><i class="material-icons" style="font-size:20px;">person_search</i> Cliente</h5>
            <a href="javascript:void(0)" id="btn-fechar-modal-cliente" style="color:#999; font-size:24px; text-decoration:none;">&times;</a>
         </div>
         <div style="padding:12px 16px; border-bottom:1px solid #f0f0f3;" class="modal-cliente-pesquisa">
            <input type="text" id="pesquisa-cliente-modal" placeholder="Pesquisar por Nome ou Telefone" autocomplete="off"
               style="width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:8px; font-size:15px; box-sizing:border-box; outline:none;">
         </div>
         <div id="box-clientes-modal" style="flex:1; overflow-y:auto; padding:0 16px 12px; -webkit-overflow-scrolling:touch; max-height:40vh;"></div>
         <div style="border-top:1px solid #e0e0e0; padding:14px 16px; background:#fafafa; border-radius:0 0 10px 10px;" class="modal-cliente-footer">
            <details id="details-cadastro-modal">
               <summary style="font-size:13px; font-weight:700; color:#3f51b5; cursor:pointer; display:flex; align-items:center; gap:6px; user-select:none;">
                  <i class="material-icons" style="font-size:18px;">person_add</i> Cadastrar novo cliente
               </summary>
               <div style="margin-top:12px; display:flex; flex-direction:column; gap:10px;">
                  <div id="msg-erro-cli-modal" style="color:#e74c3c; font-size:13px; text-align:center; margin:5px 0; min-height:18px;"></div>
                  <div style="display:flex; flex-direction:column; gap:4px;">
                     <label style="font-size:12px; color:#666; display:block;">Nome *</label>
                     <input type="text" id="cli-modal-nome" placeholder="Nome do cliente" maxlength="100" autocomplete="off"
                        style="width:100%; padding:10px; border:1px solid #ccc; border-radius:4px; font-size:15px; box-sizing:border-box; text-transform:uppercase; font-weight:bold;"
                        onfocus="this.style.borderColor='#3f51b5'; this.style.outline='none';" onblur="this.style.borderColor='#ccc';">
                  </div>
                  <div style="display:flex; flex-direction:column; gap:4px;">
                     <label style="font-size:12px; color:#666; display:block;">Telefone *</label>
                     <input type="tel" id="cli-modal-telefone" placeholder="(00) 00000-0000" maxlength="15" autocomplete="off"
                        style="width:100%; padding:10px; border:1px solid #ccc; border-radius:4px; font-size:15px; box-sizing:border-box;"
                        onfocus="this.style.borderColor='#3f51b5'; this.style.outline='none';" onblur="this.style.borderColor='#ccc';">
                  </div>
                  <div style="display:flex; flex-direction:column; gap:4px;">
                     <label style="font-size:12px; color:#666; display:block;">CPF (opcional)</label>
                     <input type="text" id="cli-modal-cpf" placeholder="000.000.000-00" maxlength="14" autocomplete="off"
                        style="width:100%; padding:10px; border:1px solid #ccc; border-radius:4px; font-size:15px; box-sizing:border-box;"
                        onfocus="this.style.borderColor='#3f51b5'; this.style.outline='none';" onblur="this.style.borderColor='#ccc';">
                  </div>
                  <div style="display:flex; justify-content:space-between; margin-top:5px; gap:10px;">
                     <button type="button" id="btn-cancelar-cli-modal" style="flex:1; padding:10px; border:none; border-radius:4px; font-size:14px; font-weight:bold; cursor:pointer; background-color:#e74c3c; color:#fff;">Cancelar</button>
                     <button type="button" id="btn-cadastrar-cli-modal" style="flex:1; padding:10px; border:none; border-radius:4px; font-size:14px; font-weight:bold; cursor:pointer; background-color:#3f51b5; color:#fff;">Salvar</button>
                  </div>
               </div>
            </details>
         </div>
      </div>
   </div>

   <!-- Modal Histórico de Pedidos do Cliente -->
   <div id="modal-historico-cliente" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(15,17,30,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:9999; justify-content:center; align-items:flex-start; padding-top:40px;">
      <div style="background:#fff; border-radius:12px; width:94%; max-width:480px; margin:0 auto; max-height:85vh; display:flex; flex-direction:column; box-shadow:0 8px 30px rgba(0,0,0,0.3);" class="modal-hist-container">
         <div style="padding:10px 16px; border-bottom:1px solid #e0e0e0; display:flex; align-items:center; justify-content:space-between; background:#f5f6fa; border-radius:12px 12px 0 0;" class="modal-hist-header">
            <div style="display:flex; align-items:center; gap:8px;">
               <i class="material-icons" style="font-size:20px; color:#ff9800;">history</i>
               <span style="color:#212121; font-size:15px; font-weight:700;">Últimos Pedidos</span>
            </div>
            <a href="javascript:void(0)" id="btn-fechar-modal-historico" style="color:#999; font-size:22px; text-decoration:none; line-height:1;">&times;</a>
         </div>
         <div id="box-historico-conteudo" style="flex:1; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; min-height:0;">
            <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:200px; width:100%; text-align:center; color:#999;">
               <i class="material-icons" style="font-size:40px;">hourglass_empty</i>
               <p style="margin:8px 0 0; font-size:14px;">Carregando...</p>
            </div>
         </div>
      </div>
   </div>

   <!-- Sync Overlay -->
   <div class="sync-overlay" id="syncOverlay" role="alert" aria-live="polite" aria-label="Sincronizando dados">
      <div class="sync-card">
         <div class="sync-spinner">
            <i class="material-icons sync-icon">sync</i>
         </div>
         <p class="sync-title">Sincronizando dados</p>
         <p class="sync-subtitle" id="syncSubtitle">Preparando...</p>
         <div class="sync-progress-track">
            <div class="sync-progress-bar" id="syncProgressBar"></div>
         </div>
         <div class="sync-steps">
            <div class="sync-step" id="stepCategorias">
               <span class="step-icon"><i class="material-icons" style="font-size:14px">category</i></span>
               <span>Categorias</span>
            </div>
            <div class="sync-step" id="stepProdutos">
               <span class="step-icon"><i class="material-icons" style="font-size:14px">restaurant_menu</i></span>
               <span>Produtos</span>
            </div>
            <div class="sync-step" id="stepOpcionais">
               <span class="step-icon"><i class="material-icons" style="font-size:14px">tune</i></span>
               <span>Opcionais</span>
            </div>
            <div class="sync-step" id="stepObservacoes">
               <span class="step-icon"><i class="material-icons" style="font-size:14px">notes</i></span>
               <span>Observações</span>
            </div>
         </div>
      </div>
   </div>

   <!-- Print Overlay -->
   <div class="print-overlay" id="printOverlay" role="alert" aria-live="polite" aria-label="Enviando impressão">
      <div class="print-card">
         <div class="print-spinner">
            <i class="material-icons print-icon-anim">print</i>
         </div>
         <p class="print-title" id="printTitle">Enviando Impressão</p>
         <p class="print-subtitle" id="printSubtitle">Aguarde, processando pré-fechamento...</p>
      </div>
   </div>

   <?php include 'includes/inc_js.php'; ?>

   <script>
      var tamanhos_servidor = '<?= json_encode($tamanhos) ?>';

      function preloader() {
         if (!localStorage.hasOwnProperty('categorias')) {
            getDadosServidor()
         }
         CarregarCategorias();
         CarregaCarrinho();
         getProdutosRevisaoStorage();
         ProcessingModal.hide();
         $('#page').show();
      }
      window.onload = preloader;

      // === FAVORITOS ===
      function getFavoritos() {
         return JSON.parse(localStorage.getItem('favoritos') || '[]')
      }

      function setFavoritos(favoritos) {
         localStorage.setItem('favoritos', JSON.stringify(favoritos))
      }

      function isFavorito(matId) {
         return getFavoritos().indexOf(String(matId)) !== -1
      }

      function toggleFavorito(matId) {
         let favoritos = getFavoritos()
         let id = String(matId)
         let index = favoritos.indexOf(id)
         if (index === -1) {
            favoritos.push(id)
         } else {
            favoritos.splice(index, 1)
         }
         setFavoritos(favoritos)
         return index === -1
      }

      function CarregarCategorias() {
         let categorias = JSON.parse(localStorage.getItem('categorias'))
         let container = document.querySelector('.container-categorias')

         let str = `<button class="btn-categoria mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effects" data-upgraded=",MaterialButton,MaterialRipple" data-id="">
            <i class="material-icons" style="font-size:16px; margin-right:4px;">apps</i> TODAS
         </button>`

         container.innerHTML = ''
         categorias.forEach(categoria => {
            str += `<button class="btn-categoria mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effects" data-upgraded=",MaterialButton,MaterialRipple" data-id="${categoria.cat_001}">
               ${categoria.cat_002}
            </button>`
         })

         container.innerHTML = str
      }

      function CarregaCarrinho() {

         if (localStorage.hasOwnProperty('carrinho')) {
            let carrinho = JSON.parse(localStorage.getItem('carrinho'))
            $('.mdl-badge').removeClass('not-visivel')
               .addClass('visivel')
               .attr('data-badge', carrinho.length);
         } else {
            $('#produtos-revisao').html("<h4 class='text-center text-blue vazio'>Nenhum Item Pendente <i class='material-icons'>thumb_up</i></h4>");
            $('.mdl-badge').removeClass('visivel')
               .addClass('not-visivel')
               .attr('data-badge', 0);
         }
      }

      function getProdutosRevisaoStorage() {
         $('#produtos-revisao').html("<div class='text-center'><br><br><img src='img/aguarde.gif' width = '100'></div>");
         let carrinho = []

         if (localStorage.hasOwnProperty('carrinho')) {
            carrinho = JSON.parse(localStorage.getItem('carrinho'))
         }

         if (carrinho.length == 0) {
            $('#scroll-tab-3').html("<div id='produtos-revisao' style='padding-bottom:70px'><h4 class='text-center text-blue vazio'>Nenhum Item Pendente <i class='material-icons'>thumb_up</i></h4></div>");
            $('.container-finalizar').removeClass('mostra').addClass('esconde');
         } else {
            let str = ''
            let tamanhos = JSON.parse(tamanhos_servidor)
            carrinho.sort((a, b) => Number(b.ordem) - Number(a.ordem))
            carrinho.forEach(item => {

               let index = item.indice
               let backObservacao = (item.observacao != "" || item.opcao_observacao != "") ? 'text-red' : ''
               let backOpcional = (item.opcional.length > 0) ? 'text-red' : ''
               let descTamanhoSelecionado = ''
               let descSiglaTamanho = (item.tamanho_pedido != "") ? item.tamanho_pedido : item.tamanho_padrao
               let qtdeExibicao = parseFloat(item.quantidade)
               let valorOption = item.quantidade

               if (item.vende_tamanho) {

                  if (item.descricao_tamanho != undefined && item.descricao_tamanho != '') {
                     descTamanhoSelecionado = item.descricao_tamanho
                  } else {
                     objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == descSiglaTamanho)
                     descTamanhoSelecionado = objTamanho[0].tamanho
                  }
               }

               switch (qtdeExibicao) {
                  case 1:
                     valorOption = '1'
                     qtdeExibicao = '1'
                     break;
                  case 2:
                     valorOption = '2'
                     qtdeExibicao = '2'
                     break;
                  case 0.5:
                     valorOption = "0.500"
                     qtdeExibicao = '1/2'
                     break;
                  case 0.3333:
                     valorOption = "0.3333"
                     qtdeExibicao = '1/3'
                     break;
                  case 0.25:
                     valorOption = "0.250"
                     qtdeExibicao = '1/4'
                     break;
                  default:
                     valorOption = qtdeExibicao
                     break;
               }

               if (item.vende_balanca) {
                  if (parseInt(item.quantidade) == 1) {
                     qtdeExibicao = "1"
                  } else {
                     qtdeExibicao = parseFloat(item.quantidade).toFixed(3)
                  }
               }

               let strEtapa = '';
               item.pacote.forEach(etapa => {
                  strEtapa += `<p class="text-gray font-12">- ${etapa.descricao}</p>`
               })

               if (strEtapa != '') {
                  strEtapa = `<div class="box-etapa"><hr>${strEtapa}</div>`
               }

               str += `<div class="card-revisao item-${index}">
                  <div class="mdl-card__title">
                     <p class="text-left">${item.codigo} - ${item.descricao}</p>`

               if (item.vende_tamanho) {
                  str += `<select class='select-tamanho tamanho' data-id='${index}'>
                              <option value='${descSiglaTamanho}'>${descTamanhoSelecionado}</option>`

                  if (item.valor_p != "0.00") {
                     objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == 'P')
                     str += `<option value='${objTamanho[0].sigla}'>${objTamanho[0].tamanho}</option>`
                  }

                  if (item.valor_m != "0.00") {
                     objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == 'M')
                     str += `<option value='${objTamanho[0].sigla}'>${objTamanho[0].tamanho}</option>`
                  }

                  if (item.valor_g != "0.00") {
                     objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == 'G')
                     str += `<option value='${objTamanho[0].sigla}'>${objTamanho[0].tamanho}</option>`
                  }

                  if (item.valor_gg != "0.00") {
                     objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == 'GG')
                     str += `<option value='${objTamanho[0].sigla}'>${objTamanho[0].tamanho}</option>`
                  }

                  if (item.valor_extra != "0.00") {
                     objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == 'E')
                     str += `<option value='${objTamanho[0].sigla}'>${objTamanho[0].tamanho}</option>`
                  }

                  str += `</select>`
               }

               if (item.vende_balanca) {
                  str += `<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label qtde is-dirty is-upgraded container-qtde-peso" data-upgraded=",MaterialTextfield">
                           <input class="mdl-textfield__input quantidade qtde-item" data-id='${index}' type="number" id="quantidade-${index}" value="${qtdeExibicao}">
                        </div>
                        <span class="negrito text-blue">Kg</span>`
               } else if (item.vende_fracionado) {
                  str += `<select class='select-tamanho2 qtde-item' id='select-${index}' data-id='${index}'>
                                    <option value='${valorOption}'>${qtdeExibicao}</option>
                                    <option value='1'>1</option>
                                    <option value='2'>2</option>
                                    <option value='0.500'>1/2</option>
                                    <option value='0.3333'>1/3</option>
                                    <option value='0.250'>1/4</option>
                              </select>`
               } else {
                  str += `<a href="javascript:void(0)" class="btn-subtrai"  data-id='${index}'>
                           <i class="material-icons text-red md-48 btn-qtde">remove_circle</i>
                        </a>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label qtde is-dirty is-upgraded container-qtde" data-upgraded=",MaterialTextfield">
                           <input class="mdl-textfield__input quantidade qtde-item" data-id='${index}' type="number" id="quantidade-${index}" value="${qtdeExibicao}">
                        </div>
                        <a href="javascript:void(0)" class="btn-adiciona"  data-id='${index}'>
                           <i class="material-icons text-green md-48 btn-qtde">add_circle</i>
                        </a>`
               }

               str += `</div>${strEtapa}
                     <div class="mdl-card__actions mdl-card--border totalizador detalhe">
                        <a class="${backOpcional} mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect btn-opcoes btn-opcional" data-id="${index}">
                           <i class="material-icons">check</i> OPCIONAIS
                        </a>
                        <a class="${backObservacao} mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect btn-opcoes btn-observacao" data-id="${index}">
                           <i class="material-icons">assignment</i> OBS
                        </a>
                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect btn-opcoes text-red btn-excluir" data-id="${index}">
                           <i class="material-icons">clear</i> EXCLUIR
                        </a>
                     </div>
               </div>`

            })

            str = '<div id="produtos-revisao" style="padding-bottom:70px">' + str + "</div>"
            $('#scroll-tab-3').html(str)
            $('.container-finalizar').removeClass('esconde').addClass('mostra');
         }

      }

      function getDadosServidor(renderCategoria) {
         var $overlay = $('#syncOverlay');
         var $bar = $('#syncProgressBar');
         var $subtitle = $('#syncSubtitle');

         function setSyncStep(stepId, text, progress) {
            $('.sync-step.active').removeClass('active').addClass('done');
            $('#' + stepId).addClass('active');
            $subtitle.text(text);
            $bar.css('width', progress + '%');
         }

         // Reset steps
         $('.sync-step').removeClass('active done');
         $bar.css('width', '0%');
         $subtitle.text('Preparando...');
         $overlay.addClass('active');

         setSyncStep('stepCategorias', 'Baixando categorias...', 10);
         $.get('pesquisa_categoria_json.php', function(data, status, xhr) {
            if (xhr.status == 200) {
               localStorage.setItem('categorias', data);

               setSyncStep('stepProdutos', 'Baixando produtos...', 35);
               $.get('pesquisa_produto_json.php', function(data, status, xhr) {
                  if (xhr.status == 200) {
                     localStorage.setItem('produtos', data);

                     setSyncStep('stepOpcionais', 'Baixando opcionais...', 60);
                     $.get('pesquisa_opcional_json.php', function(data, status, xhr) {
                        if (xhr.status == 200) {
                           localStorage.setItem('opcionais', data)

                           setSyncStep('stepObservacoes', 'Baixando observações...', 85);
                           $.get('pesquisa_observacao_json.php', function(data, status, xhr) {
                              if (xhr.status == 200) {
                                 localStorage.setItem('observacoes', data)
                                 CarregarCategorias()

                                 $('.sync-step.active').removeClass('active').addClass('done');
                                 $bar.css('width', '100%');
                                 $subtitle.text('Tudo pronto!');

                                 setTimeout(function() {
                                    $overlay.removeClass('active');
                                    $('#page').show();
                                    Snackbar.show({
                                       text: 'Atualizado com sucesso!',
                                       actionText: 'Fechar',
                                       duration: 1000,
                                       pos: 'top-left'
                                    });
                                 }, 500);
                              }
                           })
                        }
                     })
                  }
               })
            }
         })
      }

      $(document).ready(function($) {

         // Swipe lateral para trocar abas
         (function() {
            var tabs = ['#header-scroll-tab-1', '#header-scroll-tab-2', '#header-scroll-tab-3'];
            var startX = 0,
               startY = 0,
               startTime = 0;
            var mainEl = document.querySelector('.mdl-layout__content');
            if (!mainEl) return;

            function getActiveIndex() {
               for (var i = 0; i < tabs.length; i++) {
                  if ($(tabs[i]).hasClass('is-active')) return i;
               }
               return 0;
            }

            // Indicador deslizante
            var indicator = document.getElementById('tab-indicator');

            function moveIndicator(tabEl) {
               if (!indicator || !tabEl) return;
               var bar = tabEl.parentElement;
               var barRect = bar.getBoundingClientRect();
               var tabRect = tabEl.getBoundingClientRect();
               indicator.style.left = (tabRect.left - barRect.left) + 'px';
               indicator.style.width = tabRect.width + 'px';
            }

            // Posicionar indicador na aba ativa ao carregar
            setTimeout(function() {
               var activeTab = document.querySelector('.mdl-layout__tab.is-active');
               if (activeTab && indicator) {
                  indicator.style.transition = 'none';
                  moveIndicator(activeTab);
                  setTimeout(function() {
                     indicator.style.transition = '';
                  }, 50);
               }
            }, 100);

            function switchTab(newIdx, direction) {
               var dir = direction || 'right';
               var panels = document.querySelectorAll('.mdl-layout__tab-panel');
               panels.forEach(function(p) {
                  p.style.setProperty('--tab-slide', dir === 'right' ? '20px' : '-20px');
               });
               $(tabs[newIdx])[0].click();
               moveIndicator($(tabs[newIdx])[0]);
            }

            // Mover indicador em cliques diretos nas abas
            tabs.forEach(function(tab, i) {
               $(tab).on('click', function() {
                  var current = getActiveIndex();
                  var dir = i >= current ? 'right' : 'left';
                  document.querySelectorAll('.mdl-layout__tab-panel').forEach(function(p) {
                     p.style.setProperty('--tab-slide', dir === 'right' ? '20px' : '-20px');
                  });
                  moveIndicator(this);
               });
            });

            var swipeBlocked = false;

            mainEl.addEventListener('touchstart', function(e) {
               // Bloquear swipe entre abas quando o toque iniciar na área de categorias (scroll horizontal)
               var target = e.target;
               swipeBlocked = !!(target.closest('.container-scroll') || target.closest('.container-categorias'));
               startX = e.touches[0].clientX;
               startY = e.touches[0].clientY;
               startTime = Date.now();
            }, {
               passive: true
            });

            mainEl.addEventListener('touchend', function(e) {
               if (swipeBlocked) return;

               var diffX = e.changedTouches[0].clientX - startX;
               var diffY = e.changedTouches[0].clientY - startY;
               var elapsed = Date.now() - startTime;

               if (elapsed > 500 || Math.abs(diffX) < 50 || Math.abs(diffY) > Math.abs(diffX)) return;

               var idx = getActiveIndex();
               if (diffX < 0 && idx < tabs.length - 1) {
                  switchTab(idx + 1, 'right');
               } else if (diffX > 0 && idx > 0) {
                  switchTab(idx - 1, 'left');
               }
            }, {
               passive: true
            });
         })();

         // Controle de visibilidade dos rodapés por aba
         $('#header-scroll-tab-1').on('click', function() {
            $('#footer-fechamento').removeClass('esconde');
            $('.container-finalizar').removeClass('mostra').addClass('esconde');
         });
         $('#header-scroll-tab-2').on('click', function() {
            $('#footer-fechamento').addClass('esconde');
            $('.container-finalizar').removeClass('mostra').addClass('esconde');
         });
         $('#header-scroll-tab-3').on('click', function() {
            $('#footer-fechamento').addClass('esconde');
            getProdutosRevisaoStorage();
         });

         // Restaurar estado das categorias
         if (localStorage.getItem('categorias_visivel') === 'N') {
            $('.div-geral-categorias').removeClass('aberto').addClass('fechado').hide();
            $('.acao-div-categoria span').html('EXIBIR CATEGORIAS');
            $('.acao-div-categoria i').html('keyboard_arrow_down');
         }

         /*******************************************************************************
          *******************************************************************************
          ******************************* ABA GERAL TOPO ********************************
          *******************************************************************************
          ********************************************************************************/

         $(window).load(function() {
            function getAncoraURL(url) {

               if (url == '' || url == undefined) {
                  var ancora = window.location.href;
                  ancora = ancora.toString().split("#");
                  url = '#header-' + ancora[1];
               }

               if (ancora) {
                  $(url)[0].click();
               }
            }
            getAncoraURL();
         });

         function TotalizaPessoas() {
            $('#quantidade-pessoa').val(parseInt($('#quantidade-mulher').val()) + parseInt($('#quantidade-homem').val()));
         }

         function Subtrai(caixaValor) {
            var qtde = parseInt(caixaValor.val());

            if (qtde > 0) {
               qtde -= parseInt(1);
               caixaValor.val(qtde);
            }
         }

         function Adiciona(caixaValor) {
            var qtde = parseInt(caixaValor.val());
            qtde += parseInt(1);
            caixaValor.val(qtde);
         }

         function AtualizarProdutos() {
            swal({
               title: 'Atualizar Dados Offline ?',
               type: 'question',
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'Sim, Atualizar!',
               cancelButtonText: 'Não Atualizar!',
               confirmButtonClass: 'btn btn-success',
               cancelButtonClass: 'btn',
               buttonsStyling: false,
               reverseButtons: true
            }).then((result) => {
               if (result.value) {
                  getDadosServidor()
               }
            })

         }


         $('.link-atualizar').click(function() {
            AtualizarProdutos();
         });

         $('.btn-adiciona-mulher').click(function() {
            Adiciona($('#quantidade-mulher'));
            TotalizaPessoas();
         });

         $('.btn-remove-mulher').click(function() {
            Subtrai($('#quantidade-mulher'));
            TotalizaPessoas();
         });

         $('.btn-adiciona-homem').click(function() {
            Adiciona($('#quantidade-homem'));
            TotalizaPessoas();
         });

         $('.btn-remove-homem').click(function() {
            Subtrai($('#quantidade-homem'));
            TotalizaPessoas();
         });

         $('.btn-adiciona-pessoa').click(function() {
            Adiciona($('#quantidade-pessoa'));
         });

         $('.btn-remove-pessoa').click(function() {
            Subtrai($('#quantidade-pessoa'));
         });


         $('.link-imprimir').click(function() {

            var itens = '';
            $('.ckb:checked').each(function(index, value) {
               itens = $(this).attr('data-item') + ', ' + itens;
            });

            if (itens == '') {
               swal(
                  'Alerta',
                  'Nenhum item selecionado!',
                  'warning'
               )
            } else {
               swal({
                  title: 'Imprimir itens Selecionados?',
                  type: 'question',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'Sim, Imprimir!',
                  cancelButtonText: 'Não Imprimir!',
                  confirmButtonClass: 'btn btn-success',
                  cancelButtonClass: 'btn',
                  buttonsStyling: false,
                  reverseButtons: true
               }).then((result) => {
                  if (result.value) {
                     $.ajax({
                        url: 'ajax_envia_impressao.php',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                           itens: itens
                        },
                        beforeSend: function() {
                           $('#page').hide();
                           ProcessingModal.show({
                              text: 'Enviando impressão ...'
                           });
                        },
                        success: function(retorno) {
                           if (retorno.status == 1) {
                              Snackbar.show({
                                 text: 'Itens enviados para Impressão!',
                                 actionText: 'Fechar',
                                 duration: 500,
                                 pos: 'top-left'
                              });
                           }
                           setTimeout(function() {
                              location.reload();
                           }, 1000)
                        }
                     });
                  }
               })
            }
         });


         $('.btn-gravar-pessoas').click(function() {

            var homem = $('#quantidade-homem').val();
            var mulher = $('#quantidade-mulher').val();
            var pessoas = $('#quantidade-pessoa').val();
            var venda = '<?= $_SESSION['VENDA'] ?>';

            swal({
               title: 'Deseja gravar os Dados ?',
               type: 'question',
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'Sim, Gravar!',
               cancelButtonText: 'Não Gravar!',
               confirmButtonClass: 'btn btn-success',
               cancelButtonClass: 'btn',
               buttonsStyling: false,
               reverseButtons: true
            }).then((result) => {
               if (result.value) {
                  $.ajax({
                     url: 'ajax_grava_pessoa.php',
                     type: 'POST',
                     dataType: 'json',
                     data: {
                        homem: homem,
                        mulher: mulher,
                        pessoas: pessoas,
                        venda: venda
                     },
                     beforeSend: function() {
                        $('#page').hide();
                        ProcessingModal.show({
                           text: 'Aguarde, gravando ...'
                        });
                     },
                     success: function(retorno) {
                        // ProcessingModal.hide();
                        if (retorno.status == 1) {
                           Snackbar.show({
                              text: 'Gravado com sucesso !',
                              actionText: 'Fechar',
                              duration: 500,
                              pos: 'top-left'
                           });
                        }
                        setTimeout(function() {
                           location.reload();
                        }, 1000)
                     }
                  });
               }
            })

         });


         /*******************************************************************************
          *******************************************************************************
          *************************** ABA 1 ITENS FINALIZADOS ***************************
          *******************************************************************************
          *******************************************************************************/

         $('.btn-fechamento').click(function() {
            swal({
               title: 'Imprimir Pré-Fechamento?',
               type: 'question',
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'Sim, Imprimir!',
               cancelButtonText: 'Não Imprimir!',
               confirmButtonClass: 'btn btn-success',
               cancelButtonClass: 'btn',
               buttonsStyling: false,
               reverseButtons: true
            }).then((result) => {
               if (result.value) {
                  var $printOverlay = $('#printOverlay');

                  $.ajax({
                     url: 'ajax_envia_impressao_pre_fechamento.php',
                     type: 'POST',
                     dataType: 'json',
                     beforeSend: function() {
                        $('#page').hide();
                        $('#printTitle').text('Solicitando Impressão');
                        $('#printSubtitle').text('Aguarde, processando pré-fechamento...');
                        $printOverlay.addClass('active');
                     },
                     success: function(retorno) {
                        if (retorno.status == 1) {
                           $('#printTitle').text('Impressão Solicitada!');
                           $('#printSubtitle').text('Redirecionando...');
                           $('.print-spinner').hide();
                           setTimeout(function() {
                              window.location.href = '<?= $linkListagem ?>';
                           }, 800);
                        } else {
                           $printOverlay.removeClass('active');
                           swal(
                              'Erro',
                              retorno.mensagem,
                              'warning'
                           );
                           $('#page').show();
                           $('.print-spinner').show();
                        }
                     },
                     error: function(error) {
                        $printOverlay.removeClass('active');
                        var erro = (error.status == 0) ? 'Perda de comunicação via Wifi !' : error.responseText;
                        swal('Erro', erro, 'warning');
                        $('#page').show();
                        $('.print-spinner').show();
                     }
                  });
               }
            })
         });

         $('.duplicar').on('click', function() {
            var id = $(this).attr('data-id');

            if (id != '') {
               swal({
                  title: 'Deseja duplicar esse item?',
                  type: 'question',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'Sim, Duplicar!',
                  cancelButtonText: 'Não Duplicar!',
                  confirmButtonClass: 'btn btn-success',
                  cancelButtonClass: 'btn',
                  buttonsStyling: false,
                  reverseButtons: true
               }).then((result) => {
                  if (result.value) {
                     let ordem = 1
                     let carrinho = []
                     let produtos = []
                     let produto = {}

                     if (localStorage.hasOwnProperty('carrinho')) {
                        carrinho = JSON.parse(localStorage.getItem('carrinho'))
                        carrinho.sort((a, b) => Number(b.ordem) - Number(a.ordem))
                        ordem = carrinho[0].ordem + 1
                     }

                     produtos = JSON.parse(localStorage.getItem('produtos'))
                     let produto_selecionado = produtos.filter(prod => (prod.mat_001 == id))

                     if (produto_selecionado) {
                        indice = ((new Date().getTime() / 1000) * Math.random()).toString()
                        produto.ordem = ordem
                        produto.indice = indice.replace(/\./g, '')
                        produto.id = produto_selecionado[0].mat_001
                        produto.codigo = produto_selecionado[0].mat_004
                        produto.descricao = produto_selecionado[0].mat_003
                        produto.vende_tamanho = produto_selecionado[0].b_venda_tamanho
                        produto.vende_fracionado = produto_selecionado[0].fracionado
                        produto.vende_balanca = produto_selecionado[0].b_peso_balanca
                        produto.quantidade = parseFloat("1.000").toFixed(3)
                        produto.tamanho_padrao = produto_selecionado[0].tamanho_padrao

                        if (produto_selecionado[0].b_venda_tamanho) {
                           produto.tamanho_pedido = produto_selecionado[0].tamanho_padrao
                        } else {
                           produto.tamanho_pedido = 'M'
                        }

                        produto.valor_p = produto_selecionado[0].valor_tam_p
                        produto.valor_m = produto_selecionado[0].valor_tam_m
                        produto.valor_g = produto_selecionado[0].valor_tam_g
                        produto.valor_gg = produto_selecionado[0].valor_tam_gg
                        produto.valor_extra = produto_selecionado[0].valor_tam_extra
                        produto.impressora = produto_selecionado[0].impressora
                        produto.id_fracionado = 0
                        produto.categoria = produto_selecionado[0].cat_001
                        produto.status = 'A'
                        produto.observacao = ''
                        produto.opcao_observacao = ''
                        produto.opcional = []
                        produto.pacote = []

                        carrinho.push(produto)
                        localStorage.setItem('carrinho', JSON.stringify(carrinho))

                        $('.mdl-layout__content').scrollTop(5);

                        getProdutosRevisaoStorage()
                        $('#header-scroll-tab-3')[0].click();
                        $('.mdl-badge').removeClass('not-visivel')
                           .addClass('visivel')
                           .attr('data-badge', carrinho.length);

                        Snackbar.show({
                           text: 'Produto está como pendente!',
                           actionText: 'Fechar',
                           duration: 500,
                           pos: 'top-left'
                        });
                     }
                  }
               })
            }
         });


         /*******************************************************************************
          *******************************************************************************
          *************************** ABA 2 LISTA DE PRODUTOS ***************************
          *******************************************************************************
          *******************************************************************************/

         var categoriaSelecionada = '';

         function getProdutosCategoria(id) {
            $.ajax({
               url: 'ajax_produto_categoria.php',
               type: 'POST',
               dataType: 'html',
               data: {
                  categoria: id,
                  canal: '<?= $_SESSION['TIPO'] ?>'
               },
               beforeSend: function() {
                  $('#produtos-categoria').html("<div class='text-center'><br><br><img src='img/aguarde.gif' width = '100'></div>");
               },
               success: function(retorno) {
                  $('#produtos-categoria').html(retorno);
               }
            });
         }

         function getProdutosCategoriaStorage(id) {
            $('#produtos-categoria').html("<div class='text-center'><br><br><img src='img/aguarde.gif' width = '100'></div>");

            if (localStorage.hasOwnProperty('produtos')) {
               let produtos = JSON.parse(localStorage.getItem('produtos'))
               let container = document.getElementById('produtos-categoria')
               let tamanhos = JSON.parse(tamanhos_servidor)

               let str = ''

               container.innerHTML = ''
               produtos.forEach(produto => {
                  if (id == produto.cat_001 || id == '') {
                     let descricao = produto.descricao ? produto.descricao : ''
                     let valores = ''

                     if (produto.b_venda_tamanho == true) {

                        if (produto.valor_tam_p != "0.00") {
                           let objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == 'P')
                           valores = `${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_p
                        }

                        if (produto.valor_tam_m != "0.00") {
                           let objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == 'M')
                           valores += (valores != '') ? ` / ${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_m : `${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_m
                        }

                        if (produto.valor_tam_g != "0.00") {
                           let objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == 'G')
                           valores += (valores != '') ? ` / ${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_g : `${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_g
                        }

                        if (produto.valor_tam_gg != "0.00") {
                           let objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == 'GG')
                           valores += (valores != '') ? ` / ${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_gg : `${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_gg
                        }

                        if (produto.valor_tam_extra != "0.00") {
                           let objTamanho = tamanhos.filter(tempTamanho => tempTamanho.sigla == 'E')
                           valores += (valores != '') ? ` / ${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_extra : `${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_extra
                        }
                     } else {
                        if (produto.mat_008 != "0.00") {
                           valores = produto.mat_008
                        }
                     }

                     let favClasse = isFavorito(produto.mat_001) ? 'favoritado' : ''

                     str += `<a href="javascript:void(0)" 
                                 data-id="${produto.mat_001}" 
                                 data-fracao="${(produto.fracionado) ? '1' : '0'}" 
                                 data-etapa="${(produto.possui_etapa != "0") ? '1' : '0'}" 
                                 data-rodizio="${produto.rodizio}"
                                 class="container-adicionar">
                                 <div class="card-produto">
                                 <button type="button" class="btn-favorito ${favClasse}" data-mat="${produto.mat_001}" title="Favorito">
                                    <i class="material-icons">${isFavorito(produto.mat_001) ? 'star' : 'star_border'}</i>
                                 </button>
                                 <div class="titulo-produto">
                                    <p class="text-left text-black">
                                       ${produto.mat_004} - ${produto.mat_003.toUpperCase()}
                                    </p>
                                    <p class="text-left text-gray">${descricao}</p>
                                    <p class="text-red">${valores}</p>
                                 </div>
                                 </div>
                              </a>`
                  }
               })

               container.innerHTML = str
            }

         }

         $('.acao-div-categoria').on('click', function() {

            if ($('.div-geral-categorias').hasClass('aberto')) {
               $('.div-geral-categorias').removeClass('aberto')
                  .addClass('fechado')
                  .fadeOut("100");

               $('.acao-div-categoria span').html('EXIBIR CATEGORIAS');
               $('.acao-div-categoria i').html('keyboard_arrow_down');
               localStorage.setItem('categorias_visivel', 'N');
            } else {
               $('.div-geral-categorias').removeClass('fechado')
                  .addClass('aberto')
                  .fadeIn("100");

               $('.acao-div-categoria span').html('ESCONDER CATEGORIAS');
               $('.acao-div-categoria i').html('keyboard_arrow_up');
               localStorage.setItem('categorias_visivel', 'S');
            }
         });

         $('#pesquisa').on('input', function(event) {
            let termo = $(this).val();
            let container = document.getElementById('produtos-categoria')

            if (termo.length >= 1) {
               $('#produtos-categoria').html("<div class='text-center'><br><br><img src='img/aguarde.gif' width = '100'></div>");

               if (localStorage.hasOwnProperty('produtos')) {
                  let produtos = JSON.parse(localStorage.getItem('produtos'))

                  let str = ''
                  produtos.forEach(produto => {
                     if (produto.mat_003.indexOf(termo.toUpperCase()) >= 0 || produto.mat_004 == termo.toUpperCase()) {
                        let descricao = produto.descricao ? produto.descricao : ''
                        let valores = ''

                        if (produto.b_venda_tamanho == true) {
                           if (produto.valor_tam_p != "0.00") {
                              valores = 'Pq ' + produto.valor_tam_p
                           }

                           if (produto.valor_tam_m != "0.00") {
                              valores += (valores != '') ? ' / Med ' + produto.valor_tam_m : 'Med ' + produto.valor_tam_m
                           }

                           if (produto.valor_tam_g != "0.00") {
                              valores += (valores != '') ? ' / Grd ' + produto.valor_tam_g : 'Grd ' + produto.valor_tam_g
                           }

                           if (produto.valor_tam_gg != "0.00") {
                              valores += (valores != '') ? ' / GG ' + produto.valor_tam_gg : 'GG ' + produto.valor_tam_gg
                           }

                           if (produto.valor_tam_extra != "0.00") {
                              valores += (valores != '') ? ' / Ext ' + produto.valor_tam_extra : 'Ext ' + produto.valor_tam_extra
                           }
                        } else {
                           if (produto.mat_008 != "0.00") {
                              valores = produto.mat_008
                           }
                        }

                        let favClassePesq = isFavorito(produto.mat_001) ? 'favoritado' : ''

                        str += `<a href="javascript:void(0)" 
                                    data-id="${produto.mat_001}" 
                                    data-fracao="${(produto.fracionado) ? '1' : '0'}" 
                                    data-etapa="${(produto.possui_etapa != "0") ? '1' : '0'}" 
                                    data-rodizio="${produto.rodizio}"
                                    class="container-adicionar">
                                    <div class="card-produto">
                                    <button type="button" class="btn-favorito ${favClassePesq}" data-mat="${produto.mat_001}" title="Favorito">
                                       <i class="material-icons">${isFavorito(produto.mat_001) ? 'star' : 'star_border'}</i>
                                    </button>
                                    <div class="titulo-produto">
                                       <p class="text-left text-black">
                                          ${produto.mat_004} - ${produto.mat_003.toUpperCase()}
                                       </p>
                                       <p class="text-left text-gray">${descricao}</p>
                                       <p class="text-red">${valores}</p>
                                    </div>
                                    </div>
                                 </a>`
                     }
                  })

                  container.innerHTML = str
               }
            } else {
               container.innerHTML = ''
            }

         });

         $(document).on('click', '.btn-categoria', function() {
            var id = $(this).attr('data-id');


            if ($(this).hasClass('mdl-js-ripple-effects')) {
               $('.btn-categoria').addClass('mdl-js-ripple-effects')
                  .removeClass('mdl-button--colored');

               $(this).addClass('mdl-button--colored')
                  .removeClass('mdl-js-ripple-effects');
               (id);

               categoriaSelecionada = id;
               getProdutosCategoriaStorage(id);
               atualizarBotaoFiltro();
            }
         });

         // === BOTTOM SHEET CATEGORIAS ===
         function atualizarBotaoFiltro() {
            let btn = $('#btn-abrir-modal-categorias')
            if (categoriaSelecionada !== '') {
               btn.css({
                  'background': '#ff5722',
                  'box-shadow': '0 2px 12px rgba(255,87,34,0.45)',
                  'animation': 'pulseFilterBtn 1.5s ease-in-out infinite'
               })
            } else {
               btn.css({
                  'background': '#3f51b5',
                  'box-shadow': '0 2px 8px rgba(63,81,181,0.3)',
                  'animation': 'none'
               })
            }
         }

         function getQtdeProdutosCategoria(catId) {
            if (!localStorage.hasOwnProperty('produtos')) return 0
            let produtos = JSON.parse(localStorage.getItem('produtos'))
            if (catId === '' || catId === undefined) return produtos.length
            return produtos.filter(p => String(p.cat_001) === String(catId)).length
         }

         function renderModalCategorias() {
            let categorias = JSON.parse(localStorage.getItem('categorias'))
            let body = document.getElementById('modal-categorias-body')
            let totalProdutos = getQtdeProdutosCategoria('')

            let str = `<div class="modal-cat-grid">`
            str += `<button type="button" class="modal-cat-chip ${categoriaSelecionada === '' ? 'ativo' : ''}" data-id="">
               <i class="material-icons">apps</i>
               <span class="cat-chip-nome">Todas</span>
               <span class="cat-chip-count">${totalProdutos} produtos</span>
            </button>`

            categorias.forEach(cat => {
               let ativo = (categoriaSelecionada == cat.cat_001) ? 'ativo' : ''
               let qtde = getQtdeProdutosCategoria(cat.cat_001)
               str += `<button type="button" class="modal-cat-chip ${ativo}" data-id="${cat.cat_001}">
                  <i class="material-icons">label</i>
                  <span class="cat-chip-nome">${cat.cat_002}</span>
                  <span class="cat-chip-count">${qtde} produtos</span>
               </button>`
            })

            str += `</div>`
            body.innerHTML = str
         }

         function abrirBottomSheetCategorias() {
            renderModalCategorias()
            $('#modal-categorias-overlay').addClass('ativo')
            setTimeout(function() {
               $('#modal-categorias').addClass('ativo')
            }, 10)
         }

         function fecharBottomSheetCategorias() {
            $('#modal-categorias').removeClass('ativo')
            setTimeout(function() {
               $('#modal-categorias-overlay').removeClass('ativo')
            }, 300)
         }

         $('#btn-abrir-modal-categorias').on('click', function() {
            abrirBottomSheetCategorias()
         })

         $('#btn-fechar-modal-categorias').on('click', function() {
            fecharBottomSheetCategorias()
         })

         $('#modal-categorias-overlay').on('click', function() {
            fecharBottomSheetCategorias()
         })

         $(document).on('click', '.modal-cat-chip', function() {
            let id = $(this).attr('data-id')
            categoriaSelecionada = id

            // Highlight in horizontal scroll
            $('.btn-categoria').addClass('mdl-js-ripple-effects').removeClass('mdl-button--colored')
            $(`.btn-categoria[data-id="${id}"]`).addClass('mdl-button--colored').removeClass('mdl-js-ripple-effects')

            getProdutosCategoriaStorage(id)
            atualizarBotaoFiltro()
            fecharBottomSheetCategorias()

            // Scroll to highlighted category
            let btnAtivo = $(`.btn-categoria[data-id="${id}"]`)
            if (btnAtivo.length) {
               let container = $('.container-scroll')[0]
               let scrollPos = btnAtivo[0].offsetLeft - container.offsetWidth / 2 + btnAtivo[0].offsetWidth / 2
               container.scrollTo({
                  left: scrollPos,
                  behavior: 'smooth'
               })
            }
         })

         // === FAVORITOS - Toggle favorito no produto ===
         var filtroFavoritosAtivo = false;

         $(document).on('click', '.btn-favorito', function(e) {
            e.preventDefault()
            e.stopPropagation()

            let matId = $(this).attr('data-mat')
            let agora = toggleFavorito(matId)

            $(this).toggleClass('favoritado', agora)
            $(this).find('i').text(agora ? 'star' : 'star_border')

            Snackbar.show({
               text: agora ? 'Adicionado aos favoritos!' : 'Removido dos favoritos!',
               actionText: 'Fechar',
               duration: 800,
               pos: 'bottom-center',
               width: '100%'
            })

            // Se o filtro de favoritos está ativo e removeu, remover o card da tela
            if (filtroFavoritosAtivo && !agora) {
               $(this).closest('.container-adicionar').fadeOut(200, function() {
                  $(this).remove()
                  if ($('#produtos-categoria .container-adicionar').length === 0) {
                     $('#produtos-categoria').html("<h4 class='text-center text-blue vazio2'>Nenhum produto favorito <i class='material-icons'>star_border</i></h4>")
                  }
               })
            }
         })

         // === FAVORITOS - Filtro por favoritos ===
         $('#btn-filtro-favoritos').on('click', function() {
            filtroFavoritosAtivo = !filtroFavoritosAtivo
            $(this).toggleClass('ativo', filtroFavoritosAtivo)

            if (filtroFavoritosAtivo) {
               getProdutosFavoritosStorage()
            } else {
               getProdutosCategoriaStorage(categoriaSelecionada)
            }
         })

         function getProdutosFavoritosStorage() {
            $('#produtos-categoria').html("<div class='text-center'><br><br><img src='img/aguarde.gif' width = '100'></div>")

            if (localStorage.hasOwnProperty('produtos')) {
               let produtos = JSON.parse(localStorage.getItem('produtos'))
               let favoritos = getFavoritos()
               let container = document.getElementById('produtos-categoria')
               let tamanhos = JSON.parse(tamanhos_servidor)
               let str = ''

               produtos.forEach(produto => {
                  if (favoritos.indexOf(String(produto.mat_001)) === -1) return

                  let descricao = produto.descricao ? produto.descricao : ''
                  let valores = ''

                  if (produto.b_venda_tamanho == true) {
                     if (produto.valor_tam_p != "0.00") {
                        let objTamanho = tamanhos.filter(t => t.sigla == 'P')
                        valores = `${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_p
                     }
                     if (produto.valor_tam_m != "0.00") {
                        let objTamanho = tamanhos.filter(t => t.sigla == 'M')
                        valores += (valores != '') ? ` / ${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_m : `${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_m
                     }
                     if (produto.valor_tam_g != "0.00") {
                        let objTamanho = tamanhos.filter(t => t.sigla == 'G')
                        valores += (valores != '') ? ` / ${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_g : `${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_g
                     }
                     if (produto.valor_tam_gg != "0.00") {
                        let objTamanho = tamanhos.filter(t => t.sigla == 'GG')
                        valores += (valores != '') ? ` / ${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_gg : `${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_gg
                     }
                     if (produto.valor_tam_extra != "0.00") {
                        let objTamanho = tamanhos.filter(t => t.sigla == 'E')
                        valores += (valores != '') ? ` / ${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_extra : `${objTamanho[0].tamanho.substring(3, 0)} ` + produto.valor_tam_extra
                     }
                  } else {
                     if (produto.mat_008 != "0.00") {
                        valores = produto.mat_008
                     }
                  }

                  str += `<a href="javascript:void(0)" 
                              data-id="${produto.mat_001}" 
                              data-fracao="${(produto.fracionado) ? '1' : '0'}" 
                              data-etapa="${(produto.possui_etapa != "0") ? '1' : '0'}" 
                              data-rodizio="${produto.rodizio}"
                              class="container-adicionar">
                              <div class="card-produto">
                              <button type="button" class="btn-favorito favoritado" data-mat="${produto.mat_001}" title="Favorito">
                                 <i class="material-icons">star</i>
                              </button>
                              <div class="titulo-produto">
                                 <p class="text-left text-black">
                                    ${produto.mat_004} - ${produto.mat_003.toUpperCase()}
                                 </p>
                                 <p class="text-left text-gray">${descricao}</p>
                                 <p class="text-red">${valores}</p>
                              </div>
                              </div>
                           </a>`
               })

               if (str === '') {
                  container.innerHTML = "<h4 class='text-center text-blue vazio2'>Nenhum produto favorito <i class='material-icons'>star_border</i></h4>"
               } else {
                  container.innerHTML = str
               }
            }
         }

         $(document).on('click', '.container-adicionar', function() {
            let id = $(this).attr('data-id')
            let fracao = $(this).attr('data-fracao') // VENDE FRACIONADO
            let possui_etapa = $(this).attr('data-etapa') // POSSUI ETAPA
            let ordem = 1
            let tipo = '<?= $_SESSION['TIPO'] ?>'
            let ESCOLHA_SABORES = '<?= ESCOLHA_SABORES ?>'
            let HABILITA_ETAPA = '<?= HABILITA_ETAPA ?>'
            let RODIZIO = $(this).attr('data-rodizio')

            if (id != '') {
               if (RODIZIO == 1) {
                  window.location.href = 'rodizio.php?venda=<?= $venda ?>&mesa=<?= $idMesa ?>&comanda=<?= $comanda ?>&tipo=<?= $tipo ?>&codigo=' + id + '&situacao=inclusao';
               } else if (fracao == 1 && ESCOLHA_SABORES) {
                  if (tipo == 'M') {
                     window.location.href = 'fracionamento.php?mesa=<?= $idMesa ?>&venda=<?= $venda ?>&tipo=<?= $tipo ?>&codigo=' + id;
                  } else {
                     window.location.href = 'fracionamento.php?comanda=<?= $comanda ?>&venda=<?= $venda ?>&tipo=<?= $tipo ?>&codigo=' + id;
                  }
               } else if (HABILITA_ETAPA && possui_etapa == 1) {
                  if (tipo == 'M') {
                     window.location.href = 'etapa.php?mesa=<?= $idMesa ?>&venda=<?= $venda ?>&tipo=<?= $tipo ?>&codigo=' + id;
                  } else {
                     window.location.href = 'etapa.php?comanda=<?= $comanda ?>&venda=<?= $venda ?>&tipo=<?= $tipo ?>&codigo=' + id;
                  }
               } else {
                  ProcessingModal.show({
                     text: 'Adicionando ...'
                  });

                  let carrinho = []
                  let produto = {}
                  let produtos = JSON.parse(localStorage.getItem('produtos'))

                  if (localStorage.hasOwnProperty('carrinho')) {
                     carrinho = JSON.parse(localStorage.getItem('carrinho'))

                     if (carrinho.length > 0) {
                        carrinho.sort((a, b) => Number(b.ordem) - Number(a.ordem))
                        ordem = carrinho[0].ordem + 1
                     }
                  }

                  let produto_selecionado = produtos.filter(prod => (prod.mat_001 == id))

                  if (produto_selecionado) {
                     indice = ((new Date().getTime() / 1000) * Math.random()).toString()
                     produto.ordem = ordem
                     produto.indice = indice.replace(/\./g, '')
                     produto.id = produto_selecionado[0].mat_001
                     produto.codigo = produto_selecionado[0].mat_004
                     produto.descricao = produto_selecionado[0].mat_003
                     produto.vende_tamanho = produto_selecionado[0].b_venda_tamanho
                     produto.vende_fracionado = produto_selecionado[0].fracionado
                     produto.vende_balanca = produto_selecionado[0].b_peso_balanca
                     produto.quantidade = parseFloat("1.000").toFixed(3)
                     produto.tamanho_padrao = produto_selecionado[0].tamanho_padrao

                     if (produto_selecionado[0].b_venda_tamanho) {
                        produto.tamanho_pedido = produto_selecionado[0].tamanho_padrao
                     } else {
                        produto.tamanho_pedido = 'M'
                     }

                     produto.valor_p = produto_selecionado[0].valor_tam_p
                     produto.valor_m = produto_selecionado[0].valor_tam_m
                     produto.valor_g = produto_selecionado[0].valor_tam_g
                     produto.valor_gg = produto_selecionado[0].valor_tam_gg
                     produto.valor_extra = produto_selecionado[0].valor_tam_extra
                     produto.impressora = produto_selecionado[0].impressora
                     produto.id_fracionado = 0
                     produto.categoria = produto_selecionado[0].cat_001
                     produto.status = 'A'
                     produto.observacao = ''
                     produto.opcao_observacao = ''
                     produto.opcional = []
                     produto.pacote = []

                     carrinho.push(produto)
                     localStorage.setItem('carrinho', JSON.stringify(carrinho))
                     ProcessingModal.hide();

                     // Verifica se a categoria possui observações cadastradas
                     let observacoesCategoria = []
                     if (localStorage.hasOwnProperty('observacoes')) {
                        let todasObservacoes = JSON.parse(localStorage.getItem('observacoes'))
                        observacoesCategoria = todasObservacoes.filter(obs => obs.id_categoria == produto.categoria)
                     }

                     if (observacoesCategoria.length > 0) {
                        // Abre tela de seleção de observações antes de ir para o carrinho
                        abrirSelecaoObservacoes(produto.indice, observacoesCategoria, carrinho)
                     } else {
                        finalizarAdicaoProduto(carrinho)
                     }
                  }
               }
            }
         });


         function finalizarAdicaoProduto(carrinho) {
            $('#pesquisa').val('');
            $('.mdl-layout__content').scrollTop(5);

            getProdutosRevisaoStorage()
            $('#header-scroll-tab-3')[0].click();
            $('.mdl-badge').removeClass('not-visivel')
               .addClass('visivel')
               .attr('data-badge', carrinho.length);

            Snackbar.show({
               text: 'Produto adicionado com sucesso!',
               actionText: 'Fechar',
               duration: 1000,
               pos: 'top-left'
            });
         }

         function abrirSelecaoObservacoes(indice, observacoesCategoria, carrinho) {
            let html = '<div style="text-align:left; max-height:350px; overflow-y:auto; padding:5px;">'
            html += '<p style="margin-bottom:10px; font-size:14px; color:#666;">Selecione uma ou mais observações:</p>'

            observacoesCategoria.forEach((obs, idx) => {
               html += `<label style="display:flex; align-items:center; padding:10px 8px; margin-bottom:4px; border:1px solid #e0e0e0; border-radius:8px; cursor:pointer; transition:background 0.2s;">
                  <input type="checkbox" class="obs-check" value="${obs.observacao}" style="width:20px; height:20px; margin-right:10px; accent-color:#3F51B5;">
                  <span style="font-size:14px;">${obs.observacao.toUpperCase()}</span>
               </label>`
            })

            html += '</div>'
            html += '<div style="margin-top:12px;">'
            html += '<input type="text" id="texto-observacao-auto" autocomplete="off" class="mdl-textfield__input" placeholder="Ou digite uma observação personalizada" style="width:100%; padding:10px; border:1px solid #e0e0e0; border-radius:8px; font-size:14px;">'
            html += '</div>'

            swal({
               title: 'Observações do Produto',
               html: html,
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#999',
               confirmButtonText: 'CONFIRMAR',
               cancelButtonText: 'PULAR',
               confirmButtonClass: 'btn btn-success',
               cancelButtonClass: 'btn btn-danger',
               buttonsStyling: false,
               reverseButtons: true,
               focusConfirm: false
            }).then((result) => {
               if (result.value) {
                  let selecionadas = []
                  document.querySelectorAll('.obs-check:checked').forEach(check => {
                     selecionadas.push(check.value)
                  })

                  let textoDigitado = document.getElementById('texto-observacao-auto').value.trim()

                  carrinho.forEach(item => {
                     if (item.indice == indice) {
                        item.opcao_observacao = selecionadas.join(', ').toUpperCase()
                        item.observacao = textoDigitado.toUpperCase()
                     }
                  })

                  localStorage.setItem('carrinho', JSON.stringify(carrinho))
               }

               finalizarAdicaoProduto(carrinho)
            }).catch(() => {
               finalizarAdicaoProduto(carrinho)
            })
         }

         /******************************************************************************
          ******************************************************************************
          *************************** ABA 3 ITENS PENDENTES ****************************
          ******************************************************************************
          ******************************************************************************/

         function getProdutosRevisao() {
            $.ajax({
               url: 'ajax_produto_revisao.php',
               type: 'POST',
               dataType: 'html',
               beforeSend: function() {
                  $('#produtos-revisao').html("<div class='text-center'><br><br><img src='img/aguarde.gif' width = '100'></div>");
               },
               success: function(retorno) {
                  if (retorno.trim() != '') {
                     $('.container-finalizar').removeClass('esconde')
                        .addClass('mostra');
                     $('#produtos-revisao').html(retorno);
                  } else {
                     $('.container-finalizar').removeClass('mostra')
                        .addClass('esconde');
                     $('.mdl-badge').removeClass('not-visivel')
                        .addClass('visivel')
                        .attr('data-badge', 0);
                     $('#produtos-revisao').html("<h4 class='text-center text-blue vazio'>Nenhum Item Pendente <i class='material-icons'>thumb_up</i></h4>");
                  }
               }
            });
         }

         function gravarItemRevisao() {
            $.ajax({
               url: 'ajax_gravar_revisao.php',
               type: 'POST',
               dataType: 'json',
               data: {
                  item: item,
                  qtde: qtde,
                  obs1: obs1,
                  obs2: obs2
               },
               beforeSend: function() {
                  ProcessingModal.show({
                     text: 'Gravando ...'
                  });
               },
               success: function(retorno) {
                  ProcessingModal.hide();
               }
            });
         }

         $(document).on('blur', '.quantidade', function(event) {
            var id = $(this).attr('data-id');
            var qtde = parseFloat($('#quantidade-' + id).val());

            let carrinho = []
            if (localStorage.hasOwnProperty('carrinho')) {
               carrinho = JSON.parse(localStorage.getItem('carrinho'))
            }

            carrinho.forEach(item => {
               if (item.indice == id) {
                  item.quantidade = qtde.toFixed(3)
               }
            })

            localStorage.setItem('carrinho', JSON.stringify(carrinho))
         });

         $(document).on('click', '.btn-adiciona', function(event) {
            var id = $(this).attr('data-id');
            var qtde = parseFloat($('#quantidade-' + id).val());


            qtde += parseFloat(1)
            $('#quantidade-' + id).val(qtde)

            let carrinho = []
            if (localStorage.hasOwnProperty('carrinho')) {
               carrinho = JSON.parse(localStorage.getItem('carrinho'))
            }

            carrinho.forEach(item => {
               if (item.indice == id) {
                  item.quantidade = qtde.toFixed(3)
               }
            })

            localStorage.setItem('carrinho', JSON.stringify(carrinho))
         });

         $(document).on('click', '.btn-subtrai', function(event) {
            var id = $(this).attr('data-id');
            var qtde = parseFloat($('#quantidade-' + id).val());

            if (qtde > 1) {
               qtde -= parseFloat(1)
               $('#quantidade-' + id).val(qtde);

               let carrinho = []
               if (localStorage.hasOwnProperty('carrinho')) {
                  carrinho = JSON.parse(localStorage.getItem('carrinho'))
               }

               carrinho.forEach(item => {
                  if (item.indice == id) {
                     item.quantidade = qtde.toFixed(3)
                  }
               })

               localStorage.setItem('carrinho', JSON.stringify(carrinho))
            }
         });

         $(document).on('click', '.btn-limpar', function() {
            swal({
               title: 'Limpar Itens Pendentes?',
               type: 'question',
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'Sim, Limpar!',
               cancelButtonText: 'Não Limpar!',
               confirmButtonClass: 'btn btn-danger',
               cancelButtonClass: 'btn',
               buttonsStyling: false,
               reverseButtons: true
            }).then((result) => {
               if (result.value) {
                  if (localStorage.hasOwnProperty('carrinho')) {
                     localStorage.removeItem('carrinho')
                     localStorage.removeItem('identificador')

                     $('.mdl-badge').removeClass('visivel')
                        .addClass('not-visivel')
                        .attr('data-badge', 0);
                     $('#produtos-revisao').html("<h4 class='text-center text-blue vazio'>Nenhum Item Pendente <i class='material-icons'>thumb_up</i></h4>");
                     $('.container-finalizar').removeClass('mostra')
                        .addClass('esconde');
                     Snackbar.show({
                        text: 'Itens excluídos com sucesso!',
                        actionText: 'Fechar',
                        duration: 1000,
                        pos: 'top-left'
                     });
                  }
               }
            })
         });

         $(document).on('click', '.btn-finalizar', function() {
            swal({
               title: 'Finalizar Pedido?',
               type: 'question',
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'Sim, Finalizar!',
               cancelButtonText: 'Não Finalizar!',
               confirmButtonClass: 'btn btn-success',
               cancelButtonClass: 'btn',
               buttonsStyling: false,
               reverseButtons: true
            }).then((result) => {
               if (result.value) {
                  let carrinho = []

                  if (localStorage.hasOwnProperty('carrinho')) {
                     carrinho = JSON.parse(localStorage.getItem('carrinho'))
                  }

                  $('.tamanho').each(function(index, value) {
                     let tamanho = $(this).val()

                     carrinho.forEach(item => {
                        if (item.indice == $(this).attr('data-id')) {
                           item.tamanho_pedido = tamanho
                        }
                     })
                  })

                  localStorage.setItem('carrinho', JSON.stringify(carrinho))

                  let jsonPedido = {}
                  let pessoas = $('#quantidade-pessoa').val()
                  pessoas = (pessoas == '') ? '1' : pessoas;
                  jsonPedido.venda = '<?= $_SESSION['VENDA'] ?>'
                  jsonPedido.tipo = '<?= $_SESSION['TIPO'] ?>'
                  jsonPedido.cliente = '<?= $_SESSION['CLIENTE'] ?>'
                  jsonPedido.id_cliente = '<?= $_SESSION['ID_CLIENTE'] ?>'
                  jsonPedido.id_mesa = '<?= $_SESSION['ID_MESA'] ?>';
                  jsonPedido.controle = '<?= $_SESSION['CONTROLE'] ?>';
                  jsonPedido.pessoas = pessoas
                  jsonPedido.id_atendente = '<?= $_COOKIE['id'] ?>'
                  jsonPedido.login = '<?= $_COOKIE['login'] ?>'
                  jsonPedido.atendente = '<?= $_COOKIE['usuario'] ?>'

                  let date = new Date();
                  let options = {
                     year: 'numeric',
                     month: '2-digit',
                     day: '2-digit',
                     hour: '2-digit',
                     minute: '2-digit',
                     second: '2-digit'
                  };
                  jsonPedido.data_hora = date.toLocaleDateString('pt-BR', options)

                  if (localStorage.hasOwnProperty('identificador')) {
                     jsonPedido.identificador = JSON.parse(localStorage.getItem('identificador'))
                  }

                  // IDENTIFICADOR SERÁ LIMPO SOMENTE NOS CASOS DE:
                  // - SUCESSO NA GRAVAÇÃO
                  // - ERROS NO SERVIDOR COM STATUS DIFERENTE -1
                  // - LIMPEZA DO CARRINHO
                  if (jsonPedido.identificador == '' || jsonPedido.identificador == undefined) {
                     jsonPedido.identificador = jsonPedido.id_atendente +
                        date.getFullYear().toString() +
                        (date.getMonth() + 1).toString() +
                        date.getDate().toString() +
                        date.getHours().toString() +
                        date.getMinutes().toString() +
                        date.getSeconds().toString()

                     localStorage.setItem('identificador', jsonPedido.identificador)
                  }

                  jsonPedido.itens = carrinho
                  console.log(JSON.stringify(jsonPedido))

                  $.ajax({
                     url: 'ajax_gravar_pedido_json.php',
                     type: 'POST',
                     dataType: 'json',
                     data: {
                        pedido: JSON.stringify(jsonPedido)
                     },
                     beforeSend: function() {
                        $('#page').hide();
                        ProcessingModal.show({
                           title: 'Enviando Pedido',
                           text: 'Aguarde, gravando os itens...',
                           icon: 'send'
                        });
                     },
                     error: function(error) {
                        let erro = (error.status == 0) ?
                           'Perda de comunicação via Wifi, verifique no caixa se o Pedido foi gravado !' :
                           error.responseText;

                        ProcessingModal.error({
                           title: 'Falha no envio',
                           text: erro,
                           onOk: function() {
                              $('#page').show();
                           }
                        });
                     },
                     success: function(retorno) {
                        if (retorno.status == 1) {
                           localStorage.removeItem('identificador')
                           localStorage.removeItem('carrinho')

                           $('#produtos-revisao').html('');
                           var html = $('#produtos-revisao').html();
                           if (html.trim() == "") {
                              $('#produtos-revisao').html("<h4 class='text-center text-blue vazio'>Nenhum Item Pendente <i class='material-icons'>thumb_up</i></h4>");
                              $('.container-finalizar').removeClass('mostra')
                                 .addClass('esconde');
                              $('.mdl-badge').removeClass('visivel')
                                 .addClass('not-visivel')
                                 .attr('data-badge', 0);
                           }

                           ProcessingModal.success({
                              title: 'Pedido Gravado!',
                              text: 'Redirecionando...'
                           });
                           setTimeout(function() {
                              window.location.href = '<?= $linkListagem ?>';
                           }, 800)
                        } else {
                           if (retorno.status != -1) {
                              localStorage.removeItem('identificador')
                           }

                           ProcessingModal.error({
                              title: 'Erro ao gravar',
                              text: retorno.mensagem,
                              onOk: function() {
                                 $('#page').show();
                              }
                           });
                        }
                     }
                  });

               }
            })
         });

         $(document).on('click', '.btn-excluir', function() {
            var indice = $(this).attr('data-id');

            swal({
               title: 'Excluir Item?',
               type: 'question',
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'Sim, Excluir!',
               cancelButtonText: 'Não Excluir!',
               confirmButtonClass: 'btn btn-danger',
               cancelButtonClass: 'btn',
               buttonsStyling: false,
               reverseButtons: true
            }).then((result) => {
               if (result.value) {
                  let carrinho = []
                  let carrinho_novo = []

                  if (localStorage.hasOwnProperty('carrinho')) {
                     carrinho = JSON.parse(localStorage.getItem('carrinho'))
                  }

                  if (carrinho.length > 0) {

                     carrinho_novo = carrinho.filter(item => (item.indice != indice))
                     localStorage.setItem('carrinho', JSON.stringify(carrinho_novo))
                     $('.item-' + indice).remove();

                     if (carrinho_novo.length == 0) {
                        $('#produtos-revisao').html("<h4 class='text-center text-blue vazio'>Nenhum Item Pendente <i class='material-icons'>thumb_up</i></h4>");
                        $('.container-finalizar').removeClass('mostra')
                           .addClass('esconde');
                        $('.mdl-badge').removeClass('visivel')
                           .addClass('not-visivel')
                           .attr('data-badge', 0);
                     } else {
                        $('.mdl-badge').attr('data-badge', carrinho_novo.length);
                     }

                     Snackbar.show({
                        text: 'Produto excluído com sucesso!',
                        actionText: 'Fechar',
                        duration: 1000,
                        pos: 'top-left'
                     });
                  }
               }
            })
         });

         $(document).on('click', '.btn-observacao', function() {
            let indice = $(this).attr('data-id')
            let elemento = $(this)
            let textoGravado = ''
            let opcaoObservacao = ''
            let categoria = 0
            let html = ''
            let carrinho = []
            let observacaoStorage = []
            let observacoes = []

            if (localStorage.hasOwnProperty('carrinho')) {
               carrinho = JSON.parse(localStorage.getItem('carrinho'))
            }

            carrinho.forEach(item => {
               if (item.indice == indice) {
                  textoGravado = item.observacao
                  opcaoObservacao = item.opcao_observacao
                  categoria = item.categoria
               }
            })

            if (localStorage.hasOwnProperty('observacoes')) {
               observacaoStorage = JSON.parse(localStorage.getItem('observacoes'))
            }

            if (observacaoStorage.length > 0) {
               observacoes = observacaoStorage.filter(obs => (obs.id_categoria == categoria && obs.observacao != opcaoObservacao))
            }

            html = `<input type="text" id="texto-observacao"  autocomplete="off" class="mdl-textfield__input observacao" placeholder="Digite uma Observação" value="${textoGravado}"><br>`

            if (observacoes.length > 0 || opcaoObservacao != '') {

               html += `<p>OU</p><br>` +
                  `<select class='select' id='opcao-observacao' required>
                              <option value='${opcaoObservacao}'>${opcaoObservacao}</option>`
               observacoes.forEach(item => {
                  html += `<option value='${item.observacao}'>${item.observacao.toUpperCase()}</option>`
               })
               html += `<option value=''>NENHUMA</option></select>`
            }

            swal({
               title: 'Observações',
               html: html,
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'GRAVAR',
               cancelButtonText: 'FECHAR',
               confirmButtonClass: 'btn btn-success',
               cancelButtonClass: 'btn btn-danger',
               buttonsStyling: false,
               reverseButtons: true,
               focusConfirm: true
            }).then((result) => {
               if (result.value) {
                  var texto = $('#texto-observacao').val()
                  var opcao = $('#opcao-observacao').val()

                  carrinho.forEach(item => {
                     if (item.indice == indice) {
                        item.observacao = texto.toUpperCase()

                        if (opcao !== undefined) {
                           item.opcao_observacao = opcao
                        }
                     }
                  })

                  localStorage.setItem('carrinho', JSON.stringify(carrinho))
                  if (texto != '' || (opcao !== undefined && opcao != '')) {
                     elemento.addClass('text-red');
                  } else {
                     elemento.removeClass('text-red');
                  }

                  Snackbar.show({
                     text: 'Observação gravada com sucesso!',
                     actionText: 'Fechar',
                     duration: 500,
                     pos: 'top-left'
                  });
               }
            })
         });

         function OpcionalInteiro(indice, elemento) {
            let opcionais = []
            let carrinho = []
            let opcoesStorage = []
            let opcoesItem = []
            let html = ''
            let categoria = 0
            let produto = {}

            if (localStorage.hasOwnProperty('carrinho')) {
               carrinho = JSON.parse(localStorage.getItem('carrinho'))
            }

            carrinho.forEach(item => {
               if (item.indice == indice) {
                  categoria = item.categoria
                  produto = item
               }
            })

            if (localStorage.hasOwnProperty('opcionais')) {
               opcoesStorage = JSON.parse(localStorage.getItem('opcionais'))
            }

            if (opcoesStorage.length > 0) {
               opcoesItem = opcoesStorage.filter(opcao => opcao.id_categoria == categoria)
            }

            if (opcoesItem.length > 0) {

               html = `<table class='mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp'>
                             <tbody>`
               opcoesItem.forEach(opcao => {
                  let existeOpcional = (produto.opcional.find(opc => opc.id_opcional == opcao.id_opcional) != undefined) ? 'checked' : ''

                  html += `<tr>
                                          <td width='10'>
                                          <input type='checkbox' id='checkbox${opcao.id_opcional}' class='ckb-opcional' value='${opcao.id_opcional}' ${existeOpcional}>
                                          </td>
                                          <td class = 'mdl-data-table__cell--non-numeric'><label for='checkbox${opcao.id_opcional}'>${opcao.descricao.toUpperCase()}</label></td>
                                          <td>R$ ${opcao.valor}</td>
                                          </tr>`
               })
               html += `</tbody>
                          </table>`

               swal({
                  title: 'Opcionais',
                  html: html,
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'GRAVAR',
                  cancelButtonText: 'FECHAR',
                  confirmButtonClass: 'btn btn-success',
                  cancelButtonClass: 'btn btn-danger',
                  buttonsStyling: false,
                  reverseButtons: true,
                  focusConfirm: true
               }).then((result) => {
                  if (result.value) {

                     $('.ckb-opcional:checked').each(function() {
                        opcionais.push({
                           id_opcional: $(this).val(),
                           fracao: false,
                           completo: 0,
                           quantidade: 1
                        })
                     });

                     carrinho.forEach(item => {
                        if (item.indice == indice) {
                           item.opcional = opcionais
                        }
                     })

                     localStorage.setItem('carrinho', JSON.stringify(carrinho))
                     if (opcionais.length > 0) {
                        elemento.addClass('text-red');
                     } else {
                        elemento.removeClass('text-red');
                     }

                     Snackbar.show({
                        text: 'Opcionais gravados com sucesso!',
                        actionText: 'Fechar',
                        duration: 500,
                        pos: 'top-left'
                     });
                  }
               })
            } else {
               swal(
                  'Aviso',
                  'Não existem Opcionais para o Item !',
                  'error'
               )
            }

         }

         function OpcionalFracionado(indice, elemento) {
            let opcionais = []
            let carrinho = []
            let opcoesStorage = []
            let opcoesItem = []
            let html = ''
            let categoria = 0
            let produto = {}

            if (localStorage.hasOwnProperty('carrinho')) {
               carrinho = JSON.parse(localStorage.getItem('carrinho'))
            }

            carrinho.forEach(item => {
               if (item.indice == indice) {
                  categoria = item.categoria
                  produto = item
               }
            })

            if (localStorage.hasOwnProperty('opcionais')) {
               opcoesStorage = JSON.parse(localStorage.getItem('opcionais'))
            }

            if (opcoesStorage.length > 0) {
               opcoesItem = opcoesStorage.filter(opcao => opcao.id_categoria == categoria)
            }

            if (opcoesItem.length > 0) {

               html = `<table class='mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp'>
                            <tbody>`
               opcoesItem.forEach(opcao => {
                  let checkedOpc = (produto.opcional.find(opc => opc.id_opcional == opcao.id_opcional) != undefined) ? 'checked' : ''
                  let checkedFracao = (produto.opcional.find(opc => (opc.id_opcional == opcao.id_opcional && opc.fracao == true)) != undefined) ? 'checked' : ''
                  html += `<tr>
                                             <td width='10'>
                                             <input type='checkbox' id='checkbox${opcao.id_opcional}' class='ckb-opcional' value='${opcao.id_opcional}' ${checkedOpc} >
                                             </td>
                                             <td class = 'mdl-data-table__cell--non-numeric'><label for='checkbox${opcao.id_opcional}'>${opcao.descricao.toUpperCase()} (${opcao.valor})</label></td>
                                             <td>
                                                   <div class="onoffswitch">
                                                      <input type="checkbox" ${checkedFracao} value='${opcao.id_opcional}' name="onoffswitch" class="onoffswitch-checkbox ckb-fracao" id="ckb-fracao-${opcao.id_opcional}">
                                                      <label class="onoffswitch-label" for="ckb-fracao-${opcao.id_opcional}">
                                                         <span class="onoffswitch-inner"></span>
                                                         <span class="onoffswitch-switch"></span>
                                                      </label>
                                                   </div>
                                             </td>
                                          </tr>`
               })
               html += `</tbody>
                           </table>`

               swal({
                  title: 'Opcionais',
                  html: html,
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'GRAVAR',
                  cancelButtonText: 'FECHAR',
                  confirmButtonClass: 'btn btn-success',
                  cancelButtonClass: 'btn btn-danger',
                  buttonsStyling: false,
                  reverseButtons: true,
                  focusConfirm: true
               }).then((result) => {
                  if (result.value) {

                     $('.ckb-opcional:checked').each(function() {
                        opcionais.push({
                           id_opcional: $(this).val(),
                           fracao: false,
                           completo: 0,
                           quantidade: 1
                        })
                     })

                     opcionais.forEach(opcao => opcao.fracao = false)

                     $('.ckb-fracao:checked').each(function() {
                        id_fracao = $(this).val()

                        opcionais.forEach(opcao => {
                           if (opcao.id_opcional == id_fracao) {
                              opcao.fracao = true
                           }
                        })
                     });

                     carrinho.forEach(item => {
                        if (item.indice == indice) {
                           item.opcional = opcionais
                        }
                     })

                     localStorage.setItem('carrinho', JSON.stringify(carrinho))
                     if (opcionais.length > 0) {
                        elemento.addClass('text-red');
                     } else {
                        elemento.removeClass('text-red');
                     }

                     Snackbar.show({
                        text: 'Opcionais gravados com sucesso!',
                        actionText: 'Fechar',
                        duration: 500,
                        pos: 'top-left'
                     });
                  }
               })
            } else {
               swal(
                  'Aviso',
                  'Não existem Opcionais para o Item !',
                  'error'
               )
            }

         }

         $(document).on('click', '.btn-opcional', function() {
            var item = $(this).attr('data-id');
            var elemento = $(this);
            var qtde = $('#select-' + item);

            if (qtde.length === 0 || qtde.val() >= 1) {
               OpcionalInteiro(item, elemento);
            } else {
               OpcionalFracionado(item, elemento);
            }
         });


         $(document).on('change', '.qtde-item', function() {
            var indice = $(this).attr('data-id');
            var qtde = parseFloat($(this).val()).toFixed(3)

            let carrinho = []
            if (localStorage.hasOwnProperty('carrinho')) {
               carrinho = JSON.parse(localStorage.getItem('carrinho'))
            }

            carrinho.forEach(item => {
               if (item.indice == indice) {
                  item.quantidade = qtde
               }
            })

            localStorage.setItem('carrinho', JSON.stringify(carrinho))
         });


         $(document).on('change', '.tamanho', function() {
            var indice = $(this).attr('data-id');
            var elemento = $(this);

            let carrinho = []
            if (localStorage.hasOwnProperty('carrinho')) {
               carrinho = JSON.parse(localStorage.getItem('carrinho'))
            }

            carrinho.forEach(item => {
               if (item.indice == indice) {
                  item.tamanho_pedido = elemento.val()
               }
            })

            localStorage.setItem('carrinho', JSON.stringify(carrinho))
         });

         // Pesquisa de clientes no modal
         var timerPesquisaModal;
         $(document).on('input', '#pesquisa-cliente-modal', function() {
            var termo = $(this).val();
            clearTimeout(timerPesquisaModal);

            if (termo.length < 2) {
               $('#box-clientes-modal').html('');
               return;
            }

            timerPesquisaModal = setTimeout(function() {
               $.ajax({
                  url: 'ajax_pesquisa_cliente.php',
                  type: 'POST',
                  dataType: 'html',
                  data: {
                     termo: termo
                  },
                  beforeSend: function() {
                     $('#box-clientes-modal').html("<div class='text-center'><br><img src='img/aguarde.gif' width='60'></div>");
                  },
                  success: function(retorno) {
                     $('#box-clientes-modal').html(retorno);
                  }
               });
            }, 300);
         });

         // Selecionar cliente no modal de alteração
         $(document).on('click', '#box-clientes-modal .btn-cliente-resultado', function() {
            var id = $(this).data('id');
            var nome = $(this).data('nome');
            var venda = '<?= $_SESSION['VENDA'] ?>';

            $.ajax({
               url: 'ajax_gravar_nome_mesa.php',
               type: 'POST',
               dataType: 'json',
               data: {
                  venda: venda,
                  id_cliente: id
               },
               success: function(retorno) {
                  if (retorno.status == 1) {
                     $('#id-cliente').val(id);
                     $('.cliente-mesa').val(nome);
                     let label = $('.label').val();
                     $('#titulo-cliente-linha1').text($('#titulo-cliente-linha1').text());
                     $('#titulo-cliente-linha2').text(nome).show();
                     $('#detalhe-cliente-nome').text(nome);
                     $('#modal-alterar-cliente').hide();

                     // Exibe o box de cliente vinculado e badge
                     $('#box-cliente-vinculado').css('display', 'flex');
                     $('.badge-cliente-det').css('display', 'block');

                     // Exibe o botão de histórico se tem id_cliente
                     if (id && id > 0) {
                        $('.btn-historico-cliente').css('display', 'inline-flex');
                     }

                     Snackbar.show({
                        text: 'Cliente alterado com sucesso!',
                        actionText: 'Fechar',
                        duration: 1500,
                        pos: 'bottom-left'
                     });
                  } else {
                     Snackbar.show({
                        text: 'Erro ao gravar Cliente!',
                        actionText: 'Fechar',
                        actionTextColor: '#FF0000',
                        duration: 1500,
                        pos: 'bottom-left'
                     });
                  }
               }
            });
         });

         // Fechar modal
         $(document).on('click', '#btn-fechar-modal-cliente', function() {
            $('#modal-alterar-cliente').hide();
         });

         // Fechar modal histórico
         $(document).on('click', '#btn-fechar-modal-historico', function() {
            $('#modal-historico-cliente').hide();
         });

         // Histórico de pedidos do cliente
         $(document).on('click', '.btn-historico-cliente', function() {
            var idCliente = $('#id-cliente').val();
            if (!idCliente || idCliente === '' || idCliente === '0') {
               return;
            }

            $('#box-historico-conteudo').html(`
               <div style="text-align:center; padding:30px 0; color:#999;">
                  <i class="material-icons" style="font-size:40px;">hourglass_empty</i>
                  <p style="margin:8px 0 0; font-size:14px;">Carregando...</p>
               </div>
            `);
            $('#modal-historico-cliente').css('display', 'flex');

            $.ajax({
               url: 'ajax_historico_cliente.php',
               type: 'GET',
               dataType: 'json',
               data: {
                  id_cliente: idCliente
               },
               error: function() {
                  $('#box-historico-conteudo').html(`
                     <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; width:100%; text-align:center; min-height:35vh; color:#e74c3c;">
                        <i class="material-icons" style="font-size:40px;">error_outline</i>
                        <p style="margin:8px 0 0; font-size:14px;">Erro ao carregar histórico</p>
                     </div>
                  `);
               },
               success: function(retorno) {
                  if (retorno.status == 0 || !retorno.pedidos || retorno.pedidos.length === 0) {
                     $('#box-historico-conteudo').html(
                        '<div style="flex:1; width:100%; display:flex; align-items:center; justify-content:center;">' +
                        '<div style="text-align:center; color:#999;">' +
                        '<span style="display:block; margin-top:8px; font-size:14px;">Nenhum pedido encontrado</span>' +
                        '</div>' +
                        '</div>'
                     );
                     return;
                  }

                  var html = '';
                  if (retorno.qtde_atendimentos !== undefined) {
                     html += `<div style="background:#fff3e0; border:1px solid #ffe0b2; border-radius:8px; padding:10px 14px; margin-bottom:14px; display:flex; align-items:center; gap:8px;">`;
                     html += `<i class="material-icons" style="font-size:20px; color:#ff9800;">restaurant</i>`;
                     html += `<span style="font-size:13px; color:#333;">Qtde de atendimentos no salão: <strong style="color:#e65100;">${retorno.qtde_atendimentos}</strong></span>`;
                     html += `</div>`;
                  }
                  retorno.pedidos.forEach(function(pedido, index) {
                     var dataPedido = pedido.data ? new Date(pedido.data).toLocaleDateString('pt-BR') : '—';
                     var horaPedido = pedido.data ? new Date(pedido.data).toLocaleTimeString('pt-BR', {
                        hour: '2-digit',
                        minute: '2-digit'
                     }) : '';
                     var totalPedido = pedido.total ? parseFloat(pedido.total).toLocaleString('pt-BR', {
                        style: 'currency',
                        currency: 'BRL'
                     }) : '—';
                     var tipoBadge = pedido.tipo_venda === 'M' ? 'Mesa' : 'Comanda';

                     html += `<div class="hist-card" style="border:1px solid #e0e3eb; border-radius:10px; margin-bottom:12px; overflow:hidden; background:#f5f6fa;">`;
                     html += `<div class="hist-card-header" style="padding:12px 14px; background:#eceef5; border-bottom:1px solid #e0e3eb; display:flex; align-items:center; justify-content:space-between;">`;
                     html += `<div>`;
                     html += `<span class="hist-pedido-num" style="font-size:13px; font-weight:700; color:#212121;">Pedido #${pedido.venda}</span>`;
                     html += `<span class="hist-tipo-badge" style="font-size:11px; color:#9e9e9e; margin-left:8px;">${tipoBadge}</span>`;
                     html += `</div>`;
                     html += `<div style="text-align:right;">`;
                     html += `<span class="hist-data" style="font-size:12px; font-weight:600; color:#3f51b5;">${dataPedido}</span>`;
                     if (horaPedido) html += `<span class="hist-hora" style="font-size:11px; color:#9e9e9e; margin-left:4px;">${horaPedido}</span>`;
                     html += `</div>`;
                     html += `</div>`;
                     html += `<div style="padding:10px 14px;">`;

                     if (pedido.itens && pedido.itens.length > 0) {
                        pedido.itens.forEach(function(item) {
                           var qtde = parseFloat(item.quantidade);
                           var valorUnit = parseFloat(item.valor_unit).toLocaleString('pt-BR', {
                              style: 'currency',
                              currency: 'BRL'
                           });
                           html += `<div class="hist-item-row" style="display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f0f0f0;">`;
                           html += `<div style="flex:1; min-width:0;">`;
                           html += `<span class="hist-item-qtde" style="font-size:13px; color:#333; font-weight:600;">${qtde}x</span> `;
                           html += `<span class="hist-item-desc" style="font-size:13px; color:#333;">${item.descricao}</span>`;
                           if (item.tamanho && item.tamanho !== 'M') html += ` <span class="hist-item-tam" style="font-size:11px; color:#9e9e9e;">(${item.tamanho})</span>`;
                           html += `</div>`;
                           html += `<span class="hist-item-valor" style="font-size:12px; font-weight:600; color:#555; white-space:nowrap; margin-left:8px;">${valorUnit}</span>`;
                           html += `</div>`;
                        });
                     } else {
                        html += `<p class="hist-empty-msg" style="font-size:13px; color:#999; margin:4px 0;">Sem itens</p>`;
                     }

                     if (pedido.total) {
                        html += `<div class="hist-total-row" style="display:flex; justify-content:flex-end; padding:8px 0 2px; border-top:1px solid #e0e3eb; margin-top:6px;">`;
                        html += `<span class="hist-total-valor" style="font-size:14px; font-weight:700; color:#2e7d32;">${totalPedido}</span>`;
                        html += `</div>`;
                     }

                     html += `</div></div>`;
                  });

                  $('#box-historico-conteudo').html(html);
               }
            });
         });

         // Trocar cliente pelo botão dentro do card Detalhes
         $(document).on('click', '.btn-trocar-cliente, .btn-vincular-cliente-det', function() {
            var venda = '<?= $_SESSION['VENDA'] ?>';
            if (venda == '') {
               swal('Alerta', 'Só é possível vincular o Cliente após a venda ser gravada!', 'warning');
               return;
            }
            $('#pesquisa-cliente-modal').val('');
            $('#box-clientes-modal').html('');
            $('#details-cadastro-modal').removeAttr('open');
            $('#cli-modal-nome').val('');
            $('#cli-modal-telefone').val('');
            $('#cli-modal-cpf').val('');
            $('#modal-alterar-cliente').css('display', 'flex');
            setTimeout(function() {
               $('#pesquisa-cliente-modal').focus();
            }, 200);
         });

         // Máscara telefone no modal
         $(document).on('input', '#cli-modal-telefone', function() {
            var v = $(this).val().replace(/\D/g, '').substring(0, 11);
            if (v.length > 6) {
               v = '(' + v.substring(0, 2) + ') ' + v.substring(2, v.length > 10 ? 7 : 6) + '-' + v.substring(v.length > 10 ? 7 : 6);
            } else if (v.length > 2) {
               v = '(' + v.substring(0, 2) + ') ' + v.substring(2);
            }
            $(this).val(v);
         });

         // Máscara CPF no modal
         $(document).on('input', '#cli-modal-cpf', function() {
            var v = $(this).val().replace(/\D/g, '').substring(0, 11);
            if (v.length > 9) {
               v = v.substring(0, 3) + '.' + v.substring(3, 6) + '.' + v.substring(6, 9) + '-' + v.substring(9);
            } else if (v.length > 6) {
               v = v.substring(0, 3) + '.' + v.substring(3, 6) + '.' + v.substring(6);
            } else if (v.length > 3) {
               v = v.substring(0, 3) + '.' + v.substring(3);
            }
            $(this).val(v);
         });

         // Máscaras do modal de cadastro de cliente
         function mascaraTelefoneModal(valor) {
            valor = valor.replace(/\D/g, '');
            if (valor.length > 11) valor = valor.substring(0, 11);
            if (valor.length > 10) {
               valor = valor.replace(/^(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
            } else if (valor.length > 6) {
               valor = valor.replace(/^(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3');
            } else if (valor.length > 2) {
               valor = valor.replace(/^(\d{2})(\d{0,5})/, '($1) $2');
            } else if (valor.length > 0) {
               valor = valor.replace(/^(\d{0,2})/, '($1');
            }
            return valor;
         }

         function mascaraCPFModal(valor) {
            valor = valor.replace(/\D/g, '');
            if (valor.length > 11) valor = valor.substring(0, 11);
            if (valor.length > 9) {
               valor = valor.replace(/^(\d{3})(\d{3})(\d{3})(\d{0,2})/, '$1.$2.$3-$4');
            } else if (valor.length > 6) {
               valor = valor.replace(/^(\d{3})(\d{3})(\d{0,3})/, '$1.$2.$3');
            } else if (valor.length > 3) {
               valor = valor.replace(/^(\d{3})(\d{0,3})/, '$1.$2');
            }
            return valor;
         }

         $(document).on('input', '#cli-modal-telefone', function() {
            $(this).val(mascaraTelefoneModal($(this).val()));
         });

         $(document).on('input', '#cli-modal-cpf', function() {
            $(this).val(mascaraCPFModal($(this).val()));
         });

         $(document).on('input', '#cli-modal-nome', function() {
            $(this).val($(this).val().toUpperCase());
         });

         // Cancelar cadastro (fechar details)
         $(document).on('click', '#btn-cancelar-cli-modal', function() {
            $('#msg-erro-cli-modal').text('');
            $('#cli-modal-nome').val('');
            $('#cli-modal-telefone').val('');
            $('#cli-modal-cpf').val('');
            $('#details-cadastro-modal').removeAttr('open');
         });

         // Cadastrar e vincular cliente pelo modal
         $(document).on('click', '#btn-cadastrar-cli-modal', function() {
            var nome = $('#cli-modal-nome').val().trim();
            var telefone = $('#cli-modal-telefone').val().trim();
            var cpf = $('#cli-modal-cpf').val().trim();
            var venda = '<?= $_SESSION['VENDA'] ?>';

            $('#msg-erro-cli-modal').text('');

            if (nome.length < 3) {
               $('#msg-erro-cli-modal').text('O nome deve ter no mínimo 3 caracteres!');
               $('#cli-modal-nome').focus();
               return;
            }
            if (!telefone || telefone.replace(/\D/g, '').length < 10) {
               $('#msg-erro-cli-modal').text('Informe um telefone válido!');
               $('#cli-modal-telefone').focus();
               return;
            }

            var btn = $(this);
            btn.prop('disabled', true).text('Salvando...');

            $.ajax({
               url: 'ajax_gravar_cliente.php',
               type: 'POST',
               dataType: 'json',
               data: {
                  nome: nome,
                  telefone: telefone,
                  cpf: cpf
               },
               success: function(retorno) {
                  btn.prop('disabled', false).text('Salvar');
                  if (retorno.status == '1') {
                     // Vincula o cliente recém-cadastrado à venda
                     $.ajax({
                        url: 'ajax_gravar_nome_mesa.php',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                           venda: venda,
                           id_cliente: retorno.id
                        },
                        success: function(ret) {
                           if (ret.status == 1) {
                              $('#id-cliente').val(retorno.id);
                              $('.cliente-mesa').val(retorno.nome);
                              $('#titulo-cliente-linha2').text(retorno.nome).show();
                              $('#detalhe-cliente-nome').text(retorno.nome);
                              $('#box-cliente-vinculado').css('display', 'flex');
                              $('.badge-cliente-det').css('display', 'block');
                              $('.btn-historico-cliente').css('display', 'inline-flex');
                              $('#modal-alterar-cliente').hide();

                              Snackbar.show({
                                 text: 'Cliente cadastrado e vinculado com sucesso!',
                                 actionText: 'Fechar',
                                 duration: 1500,
                                 pos: 'bottom-left'
                              });
                           } else {
                              $('#msg-erro-cli-modal').text('Erro ao vincular cliente!');
                           }
                        }
                     });
                  } else {
                     $('#msg-erro-cli-modal').text(retorno.text);
                  }
               },
               error: function() {
                  btn.prop('disabled', false).text('Salvar');
                  $('#msg-erro-cli-modal').text('Erro ao comunicar com o servidor!');
               }
            });
         });

         $(document).on('click', '#titulo-cliente', function(e) {
            e.preventDefault();
            e.stopPropagation();

            var venda = '<?= $_SESSION['VENDA'] ?>';
            var clienteMesa = $('.cliente-mesa').val();

            if (venda == '') {
               swal(
                  'Alerta',
                  'Só é possível informar a observação após a venda ser gravada !',
                  'warning'
               )
               return false;
            }

            swal({
               title: 'Observação',
               html: `<input autofocus type='text' value='${clienteMesa}' id='nome' placeholder='Ex.: João ou MESA 10' class='inpt-cliente text-red' autocomplete='off'>`,
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'Gravar',
               cancelButtonText: 'Cancelar',
               confirmButtonClass: 'btn btn-success',
               cancelButtonClass: 'btn btn-danger',
               buttonsStyling: false,
               reverseButtons: true,
               focusConfirm: true
            }).then((result) => {
               if (result.value) {
                  var cliente = $('#nome').val();

                  $.ajax({
                     url: 'ajax_gravar_nome_mesa.php',
                     type: 'POST',
                     dataType: 'json',
                     data: {
                        venda: venda,
                        cliente: cliente
                     },
                     success: function(retorno) {
                        if (retorno.status == 1) {
                           Snackbar.show({
                              text: 'Gravado com sucesso!',
                              actionText: 'Fechar',
                              duration: 500,
                              pos: 'bottom-left'
                           });

                           let label = $('.label').val();
                           $('#titulo-cliente-linha1').text(`${label} | ${cliente}`)
                           $('.cliente-mesa').val(cliente)

                           // Só atualiza o nome no detalhe se NÃO tem id_cliente
                           let idCliente = $('#id-cliente').val();
                           if (!idCliente || idCliente === '' || idCliente === '0') {
                              $('#detalhe-cliente-nome').text(cliente)
                           }
                        } else {
                           Snackbar.show({
                              text: 'Erro ao gravar Cliente!',
                              actionText: 'Fechar',
                              actionTextColor: '#FF0000',
                              duration: 500,
                              pos: 'bottom-left'
                           });
                        }
                     }
                  });
               }
            })
         });

      });
   </script>
</body>

</html>