<?php
session_start();
require 'conexao.php';
require 'config.php';

$venda = (isset($_GET['venda'])) ? $_GET['venda'] : '';
$mesa  = (isset($_GET['mesa'])) ? $_GET['mesa'] : '';
$comanda  = (isset($_GET['comanda'])) ? $_GET['comanda'] : '';
$tipo  = (isset($_GET['tipo'])) ? $_GET['tipo'] : '';
$codigo  = (isset($_GET['codigo'])) ? $_GET['codigo'] : '';

if ($tipo == 'M'):
  $linkListagem = "pedido.php?mesa={$mesa}&tipo={$tipo}&venda={$venda}#scroll-tab-3";
elseif ($tipo == 'C'):
  $linkListagem = "pedido.php?comanda={$comanda}&tipo={$tipo}&venda={$venda}#scroll-tab-3";
endif;
?>
<!DOCTYPE html>
<html>

<head>
  <title>Comanda Eletrônica</title>
  <?php require 'includes/inc_head.php'; ?>
  <style>
    * {
      box-sizing: border-box;
    }

    .opc-page {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }

    /* Header */
    .opc-header {
      background: #3f51b5;
      color: #fff;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      z-index: 10;
    }

    .opc-header .btn-voltar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .opc-header .btn-voltar i.material-icons {
      font-size: 20px;
      vertical-align: middle;
      line-height: 1;
    }

    .opc-header-title {
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    /* Top panel - sabores resumo */
    .opc-top {
      flex-shrink: 0;
      background: #fff;
      border-bottom: 1px solid #e0e3eb;
      padding: 12px;
    }

    .opc-top-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .opc-top-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: #757575;
      letter-spacing: 0.3px;
    }

    .opc-tamanho-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #e8eaf6;
      color: #3f51b5;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 12px;
    }

    .opc-tamanho-badge i {
      font-size: 14px;
    }

    .opc-sabores-lista {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 120px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .opc-sabor-tag {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f5f6fa;
      border: 1px solid #e0e3eb;
      border-radius: 8px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #212121;
      line-height: 1.3;
    }

    .opc-sabor-tag .opc-sabor-cor {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .opc-sabor-tag .opc-sabor-nome {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .opc-sabor-tag .opc-sabor-qtde {
      font-size: 10px;
      color: #9e9e9e;
      flex-shrink: 0;
    }

    /* Body - opcionais */
    .opc-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #f5f6fa;
    }

    .opc-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px 6px;
    }

    .opc-section-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      color: #757575;
      letter-spacing: 0.3px;
    }

    .opc-btn-pesquisar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1.5px solid #e0e0e0;
      background: #fff;
      color: #3f51b5;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }

    .opc-btn-pesquisar:active {
      background: #e8eaf6;
    }

    .opc-btn-pesquisar i {
      font-size: 20px;
    }

    .opc-lista {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 0 120px;
    }

    /* Modal Pesquisa Opcionais */
    .modal-pesquisa-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      justify-content: center;
      align-items: flex-start;
      padding-top: 40px;
    }

    .modal-pesquisa-box {
      background: #fff;
      border-radius: 14px;
      width: 94%;
      max-width: 440px;
      margin: 0 auto;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
      animation: slideDown 0.2s ease-out;
    }

    @keyframes slideDown {
      from {
        transform: translateY(-20px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .modal-pesquisa-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid #e0e0e0;
    }

    .modal-pesquisa-header h5 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #3f51b5;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .modal-pesquisa-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: #f0f0f3;
      color: #666;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-pesquisa-search {
      padding: 10px 14px;
    }

    .modal-pesquisa-search-inner {
      position: relative;
      display: flex;
      align-items: center;
    }

    .modal-pesquisa-search-inner i.material-icons {
      position: absolute;
      left: 12px;
      top: 50% !important;
      transform: translateY(-50%) !important;
      color: #9e9e9e;
      font-size: 20px !important;
      pointer-events: none;
      width: 20px;
      height: 20px;
      line-height: 20px !important;
      vertical-align: middle !important;
      display: inline-block;
    }

    .modal-pesquisa-search-inner input {
      width: 100%;
      padding: 10px 12px 10px 40px;
      border: 1.5px solid #e0e0e0;
      border-radius: 10px;
      font-size: 14px;
      color: #333;
      background: #fafafa;
      outline: none;
      box-sizing: border-box;
    }

    .modal-pesquisa-search-inner input:focus {
      border-color: #3f51b5;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1);
    }

    .modal-pesquisa-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 8px 14px;
      max-height: 55vh;
    }

    .modal-pesquisa-body .opc-card {
      margin: 0 4px 6px;
    }

    .opc-nenhum-resultado {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 20px;
      color: #9e9e9e;
      gap: 6px;
    }

    .opc-nenhum-resultado i.material-icons {
      font-size: 22px !important;
      color: #bdbdbd;
      vertical-align: middle !important;
    }

    .opc-nenhum-resultado span {
      font-size: 13px;
      font-weight: 600;
    }

    .opc-card {
      display: flex;
      align-items: center;
      margin: 0 12px 6px;
      padding: 12px;
      background: #fff;
      border-radius: 10px;
      border: 1px solid #e0e3eb;
      cursor: pointer;
      transition: all 0.15s ease;
      gap: 10px;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .opc-card:active {
      transform: scale(0.98);
    }

    .opc-card.selecionado {
      background: #e8f5e9;
      border-color: #a5d6a7;
    }

    .opc-card-check {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 2px solid #bdbdbd;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }

    .opc-card-check i {
      font-size: 18px;
      color: #fff;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .opc-card.selecionado .opc-card-check {
      background: #2e7d32;
      border-color: #2e7d32;
    }

    .opc-card.selecionado .opc-card-check i {
      opacity: 1;
    }

    .opc-card-info {
      flex: 1;
      min-width: 0;
    }

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

    .opc-card-valor {
      font-size: 12px;
      color: #757575;
      font-weight: 500;
      margin-top: 2px;
    }

    .opc-card.selecionado .opc-card-valor {
      color: #2e7d32;
    }

    .opc-vazio {
      text-align: center;
      padding: 40px 20px;
      color: #9e9e9e;
    }

    .opc-vazio i {
      font-size: 48px;
      display: block;
      margin-bottom: 8px;
      color: #e0e0e0;
    }

    .opc-vazio p {
      font-size: 14px;
      font-weight: 600;
    }

    .opc-contador {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: 11px;
      background: #3f51b5;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      margin-left: 6px;
    }

    /* Footer */
    .opc-footer {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      display: flex;
    }

    .opc-footer .btn-footer {
      flex: 1;
      height: 50px;
      border: none;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #fff;
      transition: all 0.15s ease;
    }

    .opc-footer .btn-footer:active {
      filter: brightness(0.88);
    }

    .opc-footer .btn-footer i {
      font-size: 20px;
    }

    .opc-footer .btn-voltar-footer {
      background: #e74c3c;
    }

    .opc-footer .btn-adicionar {
      background: #2e7d32;
      position: relative;
      overflow: hidden;
      animation: pulseFinalizar 1.4s ease-in-out infinite;
    }

    .opc-footer .btn-adicionar::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      animation: shimmerFinalizar 1.6s ease-in-out infinite;
    }

    @keyframes pulseFinalizar {
      0% {
        background-color: #2e7d32;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4);
      }

      25% {
        background-color: #43a047;
        transform: scale(1.04);
        box-shadow: 0 0 16px 4px rgba(67, 160, 71, 0.4);
      }

      50% {
        background-color: #66bb6a;
        transform: scale(1.06);
        box-shadow: 0 0 22px 6px rgba(102, 187, 106, 0.45);
      }

      75% {
        background-color: #43a047;
        transform: scale(1.04);
        box-shadow: 0 0 16px 4px rgba(67, 160, 71, 0.4);
      }

      100% {
        background-color: #2e7d32;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4);
      }
    }

    @keyframes shimmerFinalizar {
      0% {
        left: -100%;
        opacity: 0;
      }

      20% {
        opacity: 1;
      }

      50%,
      100% {
        left: 100%;
        opacity: 0;
      }
    }

    /* Botão observação no header */
    .opc-header .btn-obs {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      transition: background 0.2s ease;
    }

    .opc-header .btn-obs.tem-obs {
      background: #f9a825;
      color: #fff;
    }

    .opc-header .btn-obs i.material-icons {
      font-size: 20px;
      vertical-align: middle;
      line-height: 1;
    }

    .opc-header .btn-obs .obs-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #f9a825;
      border: 2px solid #3f51b5;
      display: none;
    }

    .opc-header .btn-obs .obs-badge.ativo {
      display: block;
    }

    /* Modal Observação */
    .modal-obs-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      justify-content: center;
      align-items: flex-start;
      padding-top: 40px;
    }

    .modal-obs-box {
      background: #fff;
      border-radius: 14px;
      width: 94%;
      max-width: 440px;
      margin: 0 auto;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
      animation: slideDown 0.2s ease-out;
    }

    .modal-obs-box i.material-icons {
      vertical-align: middle;
      line-height: 1;
    }

    .modal-obs-header h5 i.material-icons {
      font-size: 20px;
    }

    .modal-obs-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid #e0e0e0;
    }

    .modal-obs-header h5 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #3f51b5;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .modal-obs-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: #f0f0f3;
      color: #666;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-obs-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 14px 16px;
    }

    .modal-obs-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 14px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 2px;
    }

    .modal-obs-tab {
      padding: 6px 14px;
      border-radius: 20px;
      border: 1.5px solid #e0e0e0;
      background: #fafafa;
      font-size: 12px;
      font-weight: 600;
      color: #757575;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .modal-obs-tab:active {
      transform: scale(0.97);
    }

    .modal-obs-tab.ativo {
      background: #3f51b5;
      border-color: #3f51b5;
      color: #fff;
      box-shadow: 0 3px 10px rgba(63, 81, 181, 0.35);
      transform: scale(1.05);
    }

    .modal-obs-tab.ativo .obs-tab-cor {
      background: #fff !important;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
    }

    .modal-obs-tab.tem-obs {
      border-color: #f9a825;
      position: relative;
    }

    .modal-obs-tab.tem-obs::after {
      content: '';
      position: absolute;
      top: -3px;
      right: -3px;
      width: 8px;
      height: 8px;
      background: #f9a825;
      border-radius: 50%;
    }

    .modal-obs-tab.ativo.tem-obs::after {
      background: #fff;
    }

    .modal-obs-tab .obs-tab-cor {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }

    /* Sabor highlight when active in obs modal */
    .opc-sabor-tag.sabor-destaque {
      background: #e8eaf6;
      border-color: #3f51b5;
      box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
      transform: scale(1.02);
      transition: all 0.2s ease;
    }

    .modal-obs-textarea {
      width: 100%;
      min-height: 100px;
      padding: 12px;
      border: 1.5px solid #e0e0e0;
      border-radius: 10px;
      font-size: 14px;
      color: #333;
      background: #fafafa;
      outline: none;
      resize: vertical;
      font-family: inherit;
      box-sizing: border-box;
    }

    .modal-obs-textarea:focus {
      border-color: #3f51b5;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1);
    }

    .modal-obs-textarea::placeholder {
      color: #bdbdbd;
    }

    .modal-obs-footer {
      padding: 10px 16px 14px;
      border-top: 1px solid #e0e0e0;
      display: flex;
      gap: 8px;
    }

    .modal-obs-btn {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.15s ease;
    }

    .modal-obs-btn i.material-icons {
      font-size: 16px;
      vertical-align: middle;
    }

    .modal-obs-btn:active {
      filter: brightness(0.9);
    }

    .modal-obs-btn-limpar {
      background: #f5f6fa;
      color: #757575;
    }

    .modal-obs-btn-salvar {
      background: #3f51b5;
      color: #fff;
    }

    /* Responsive */
    @media (min-width: 600px) {
      .opc-top {
        padding: 14px 20px;
      }

      .opc-card {
        margin: 0 20px 6px;
        padding: 14px 16px;
      }

      .opc-section-header {
        padding: 12px 22px 6px;
      }
    }

    @media (min-width: 960px) {
      .opc-body {
        width: 100%;
      }

      .opc-top {
        width: 100%;
      }
    }

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

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

    [data-theme="dark"] .opc-top-label {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .opc-tamanho-badge {
      background: var(--bg-surface);
      color: var(--color-primary);
    }

    [data-theme="dark"] .opc-sabor-tag {
      background: var(--bg-surface);
      border-color: var(--border-color);
      color: var(--text-primary);
    }

    [data-theme="dark"] .opc-sabor-tag .opc-sabor-qtde {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .opc-body {
      background: var(--bg-body);
    }

    [data-theme="dark"] .opc-section-title {
      color: var(--text-secondary);
    }

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

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

    [data-theme="dark"] .opc-card:active {
      background: var(--bg-surface);
    }

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

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

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

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

    [data-theme="dark"] .opc-vazio {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .opc-vazio i {
      color: var(--border-color);
    }

    [data-theme="dark"] .opc-nenhum-resultado {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .opc-nenhum-resultado i {
      color: var(--border-color);
    }

    [data-theme="dark"] .modal-pesquisa-box {
      background: var(--bg-card);
    }

    [data-theme="dark"] .modal-pesquisa-header {
      border-bottom-color: var(--border-color);
    }

    [data-theme="dark"] .modal-pesquisa-header h5 {
      color: var(--color-primary);
    }

    [data-theme="dark"] .modal-pesquisa-close {
      background: var(--bg-surface);
      color: var(--text-secondary);
    }

    [data-theme="dark"] .modal-pesquisa-search-inner i {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .modal-pesquisa-search-inner input {
      background: var(--bg-input);
      color: var(--text-primary);
      border-color: var(--border-color);
    }

    [data-theme="dark"] .modal-pesquisa-search-inner input:focus {
      background: var(--bg-surface);
    }

    /* Modal Observação */
    [data-theme="dark"] .modal-obs-box {
      background: var(--bg-card);
    }

    [data-theme="dark"] .modal-obs-header {
      border-bottom-color: var(--border-color);
    }

    [data-theme="dark"] .modal-obs-header h5 {
      color: var(--color-primary);
    }

    [data-theme="dark"] .modal-obs-close {
      background: var(--bg-surface);
      color: var(--text-secondary);
    }

    [data-theme="dark"] .modal-obs-tab {
      background: var(--bg-surface);
      border-color: var(--border-color);
      color: var(--text-secondary);
    }

    [data-theme="dark"] .modal-obs-textarea {
      background: var(--bg-input);
      color: var(--text-primary);
      border-color: var(--border-color);
    }

    [data-theme="dark"] .modal-obs-textarea:focus {
      background: var(--bg-surface);
    }

    [data-theme="dark"] .modal-obs-textarea::placeholder {
      color: var(--text-label);
    }

    [data-theme="dark"] .modal-obs-footer {
      border-top-color: var(--border-color);
    }

    [data-theme="dark"] .modal-obs-btn-limpar {
      background: var(--bg-surface);
      color: var(--text-secondary);
    }

    [data-theme="dark"] .opc-sabor-tag.sabor-destaque {
      background: var(--bg-surface);
      border-color: var(--color-primary);
    }
  </style>
</head>

<body>
  <script>
    loadPagina()
  </script>
  <div class="opc-page" id="page" style="display:none">

    <!-- HEADER -->
    <div class="opc-header">
      <button class="btn-voltar" onclick="window.history.go(-1)">
        <i class="material-icons">arrow_back</i>
      </button>
      <span class="opc-header-title">ADICIONAIS DO ITEM</span>
      <button class="btn-obs" id="btn-abrir-obs" title="Observações">
        <i class="material-icons">speaker_notes</i>
        <span class="obs-badge" id="obs-badge"></span>
      </button>
    </div>

    <!-- TOP: Resumo dos sabores -->
    <div class="opc-top">
      <div class="opc-top-row">
        <div class="opc-top-label">Sabores selecionados</div>
        <div class="opc-tamanho-badge" id="tamanho-badge">
          <i class="material-icons">straighten</i>
          <span id="tamanho"></span>
        </div>
      </div>
      <div class="opc-sabores-lista" id="container-sabores"></div>
    </div>

    <!-- BODY: Opcionais -->
    <div class="opc-body">
      <div class="opc-section-header">
        <div class="opc-section-title">Adicionais disponíveis <span class="opc-contador" id="opc-contador" style="display:none">0</span></div>
        <button class="opc-btn-pesquisar" id="btn-pesquisar-opc" title="Pesquisar adicionais">
          <i class="material-icons">search</i>
        </button>
      </div>
      <div class="opc-lista" id="box-opcionais"></div>
    </div>

    <!-- MODAL: Pesquisa de opcionais -->
    <div class="modal-pesquisa-overlay" id="modal-pesquisa">
      <div class="modal-pesquisa-box">
        <div class="modal-pesquisa-header">
          <h5>Buscar Adicionais</h5>
          <button class="modal-pesquisa-close" id="btn-fechar-pesquisa">&times;</button>
        </div>
        <div class="modal-pesquisa-search">
          <div class="modal-pesquisa-search-inner">
            <i class="material-icons">search</i>
            <input type="text" id="pesquisa-opc" autocomplete="off" placeholder="Nome do adicional...">
          </div>
        </div>
        <div class="modal-pesquisa-body" id="modal-opcionais-body"></div>
      </div>
    </div>

    <!-- MODAL: Observações -->
    <div class="modal-obs-overlay" id="modal-obs">
      <div class="modal-obs-box">
        <div class="modal-obs-header">
          <h5><i class="material-icons">speaker_notes</i> Observações</h5>
          <button class="modal-obs-close" id="btn-fechar-obs">&times;</button>
        </div>
        <div class="modal-obs-body">
          <div class="modal-obs-tabs" id="obs-tabs"></div>
          <textarea class="modal-obs-textarea" id="obs-texto" placeholder="Digite a observação..."></textarea>
        </div>
        <div class="modal-obs-footer">
          <button class="modal-obs-btn modal-obs-btn-limpar" id="btn-limpar-obs">
            <i class="material-icons">delete_outline</i> Limpar
          </button>
          <button class="modal-obs-btn modal-obs-btn-salvar" id="btn-salvar-obs">
            <i class="material-icons">check</i> Salvar
          </button>
        </div>
      </div>
    </div>

    <!-- FOOTER -->
    <div class="opc-footer">
      <button class="btn-footer btn-voltar-footer" onclick="window.history.go(-1)">
        <i class="material-icons">arrow_back</i>
        VOLTAR
      </button>
      <button class="btn-footer btn-adicionar btn-finalizar">
        <i class="material-icons">check_circle</i>
        ADICIONAR
      </button>
    </div>
  </div>

  <?php include 'includes/inc_js.php'; ?>
  <script>
    var CORES_SABORES = ['#3f51b5', '#e74c3c', '#f9a825', '#2e7d32', '#9c27b0'];

    function preloader() {
      ProcessingModal.hide();
      $('#page').show();
    }
    window.onload = preloader;

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

      carregaSabores();
      var opcionaisData = [];
      carregaOpcionais();
      var opcionais = [];
      var observacoes = restaurarObservacoes();
      var obsTabAtiva = 'todos';

      restaurarSelecoes();
      atualizarBadgeObs();

      function atualizarContador() {
        let total = $('#box-opcionais .opc-card.selecionado').length;
        let badge = $('#opc-contador');
        if (total > 0) {
          badge.text(total).show();
        } else {
          badge.hide();
        }
      }

      $(document).on('click', '#box-opcionais .opc-card', function() {
        $(this).toggleClass('selecionado');
        let ckb = $(this).find('.ckb-opcional');
        ckb.prop('checked', $(this).hasClass('selecionado'));
        atualizarContador();
        salvarSelecoes();
      });

      // === Modal Observações ===
      $('#btn-abrir-obs').on('click', function() {
        abrirModalObs();
      });

      $('#btn-fechar-obs').on('click', function() {
        fecharModalObs();
      });

      $('#modal-obs').on('click', function(e) {
        if (e.target === this) {
          fecharModalObs();
        }
      });

      $(document).on('click', '.modal-obs-tab', function() {
        let chave = String($(this).data('chave'));
        salvarObsAtual();
        obsTabAtiva = chave;
        renderObsTabs();
        $('#obs-texto').val(observacoes[chave] || '').focus();
        destacarSaborAtivo();
      });

      $('#btn-salvar-obs').on('click', function() {
        salvarObsAtual();
        atualizarBadgeObs();
        fecharModalObs();
        Snackbar.show({
          text: 'Observação salva!',
          actionText: 'Fechar',
          duration: 1000,
          pos: 'bottom-center',
          width: '100%'
        });
      });

      $('#btn-limpar-obs').on('click', function() {
        $('#obs-texto').val('');
        observacoes[obsTabAtiva] = '';
        renderObsTabs();
        atualizarBadgeObs();
      });

      function abrirModalObs() {
        obsTabAtiva = 'todos';
        renderObsTabs();
        $('#obs-texto').val(observacoes['todos'] || '');
        $('#modal-obs').css('display', 'flex');
        setTimeout(function() {
          $('#obs-texto').focus();
        }, 100);
      }

      function fecharModalObs() {
        salvarObsAtual();
        atualizarBadgeObs();
        $('#modal-obs').css('display', 'none');
        $('.opc-sabor-tag').removeClass('sabor-destaque');
      }

      function salvarObsAtual() {
        let texto = $('#obs-texto').val().trim();
        if (texto) {
          observacoes[obsTabAtiva] = texto;
        } else {
          delete observacoes[obsTabAtiva];
        }
        localStorage.setItem('opc_observacoes', JSON.stringify(observacoes));
      }

      function renderObsTabs() {
        let arrayPizza = JSON.parse(localStorage.getItem('sabores'));
        let html = '';

        let classTodos = (obsTabAtiva === 'todos') ? ' ativo' : '';
        let temObsTodos = observacoes['todos'] ? ' tem-obs' : '';
        html += `<div class="modal-obs-tab${classTodos}${temObsTodos}" data-chave="todos">
          <i class="material-icons" style="font-size:14px;">select_all</i> Todos
        </div>`;

        arrayPizza.forEach((item, index) => {
          let chave = String(item.codigo);
          let classAtivo = (obsTabAtiva === chave) ? ' ativo' : '';
          let temObs = observacoes[chave] ? ' tem-obs' : '';
          let cor = CORES_SABORES[index % CORES_SABORES.length];
          html += `<div class="modal-obs-tab${classAtivo}${temObs}" data-chave="${chave}" data-index="${index}">
            <span class="obs-tab-cor" style="background:${cor}"></span>${item.nome}
          </div>`;
        });

        $('#obs-tabs').html(html);
        destacarSaborAtivo();
      }

      function destacarSaborAtivo() {
        $('.opc-sabor-tag').removeClass('sabor-destaque');
        if (obsTabAtiva !== 'todos') {
          $(`.opc-sabor-tag[data-codigo="${obsTabAtiva}"]`).addClass('sabor-destaque');
        }
      }

      function atualizarBadgeObs() {
        let temAlguma = Object.keys(observacoes).some(k => observacoes[k] && observacoes[k].trim());
        if (temAlguma) {
          $('#obs-badge').addClass('ativo');
          $('#btn-abrir-obs').addClass('tem-obs');
        } else {
          $('#obs-badge').removeClass('ativo');
          $('#btn-abrir-obs').removeClass('tem-obs');
        }
      }

      function salvarSelecoes() {
        let selecionados = [];
        $('#box-opcionais .opc-card .ckb-opcional:checked').each(function() {
          selecionados.push(String($(this).val()));
        });
        localStorage.setItem('opc_selecoes', JSON.stringify(selecionados));
      }

      function restaurarSelecoes() {
        if (!localStorage.hasOwnProperty('opc_selecoes')) return;
        let selecionados = JSON.parse(localStorage.getItem('opc_selecoes'));
        if (!selecionados || !selecionados.length) return;

        $('#box-opcionais .opc-card').each(function() {
          let ckb = $(this).find('.ckb-opcional');
          if (selecionados.indexOf(String(ckb.val())) !== -1) {
            $(this).addClass('selecionado');
            ckb.prop('checked', true);
          }
        });
        atualizarContador();
      }

      function restaurarObservacoes() {
        if (localStorage.hasOwnProperty('opc_observacoes')) {
          try {
            return JSON.parse(localStorage.getItem('opc_observacoes'));
          } catch (e) {}
        }
        return {};
      }

      // Modal pesquisa de opcionais

      $('#btn-pesquisar-opc').on('click', function() {
        abrirModalPesquisa();
      });

      $('#btn-fechar-pesquisa').on('click', function() {
        fecharModalPesquisa();
      });

      $('#modal-pesquisa').on('click', function(e) {
        if (e.target === this) {
          fecharModalPesquisa();
        }
      });

      $('#pesquisa-opc').on('input', function() {
        filtrarOpcionaisModal($(this).val());
      });

      function abrirModalPesquisa() {
        renderModalOpcionais(opcionaisData);
        $('#modal-pesquisa').css('display', 'flex');
        setTimeout(function() {
          $('#pesquisa-opc').focus();
        }, 100);
      }

      function fecharModalPesquisa() {
        $('#modal-pesquisa').css('display', 'none');
        $('#pesquisa-opc').val('');
        $('#modal-opcionais-body').html('');
      }

      function renderModalOpcionais(lista) {
        let html = '';
        if (lista.length === 0) {
          html = `<div class="opc-nenhum-resultado">
            <i class="material-icons">search_off</i>
            <span>Nenhum adicional encontrado</span>
          </div>`;
        } else {
          lista.forEach(opcional => {
            let selecionado = $(`.opc-card .ckb-opcional[value="${opcional.id_opcional}"]:checked`).length > 0;
            let classSel = selecionado ? ' selecionado' : '';
            html += `<div class="opc-card${classSel}" data-id="${opcional.id_opcional}" role="checkbox" aria-checked="${selecionado}" aria-label="${opcional.descricao}">
                      <div class="opc-card-check">
                        <i class="material-icons">check</i>
                      </div>
                      <div class="opc-card-info">
                        <div class="opc-card-nome">${opcional.descricao.toUpperCase()}</div>
                        <div class="opc-card-valor">R$ ${opcional.valor}</div>
                      </div>
                     </div>`;
          });
        }
        $('#modal-opcionais-body').html(html);
      }

      function filtrarOpcionaisModal(termo) {
        let filtro = termo.trim().toUpperCase();
        if (!filtro) {
          renderModalOpcionais(opcionaisData);
          return;
        }
        let filtrados = opcionaisData.filter(opc => opc.descricao.toUpperCase().indexOf(filtro) !== -1);
        renderModalOpcionais(filtrados);
      }

      // Clique no card da modal - sincroniza com lista principal
      $(document).on('click', '#modal-opcionais-body .opc-card', function() {
        let id = String($(this).attr('data-id'));
        $(this).toggleClass('selecionado');
        let estaSelecionado = $(this).hasClass('selecionado');

        // Sincronizar com a lista principal
        $('#box-opcionais .opc-card').each(function() {
          let ckb = $(this).find('.ckb-opcional');
          if (String(ckb.val()) === id) {
            if (estaSelecionado) {
              $(this).addClass('selecionado');
              ckb.prop('checked', true);
            } else {
              $(this).removeClass('selecionado');
              ckb.prop('checked', false);
            }
          }
        });
        atualizarContador();
        salvarSelecoes();
        fecharModalPesquisa();
      });

      $('.btn-finalizar').on('click', function() {

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

        let carrinho = [];
        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 arrayPizza = JSON.parse(localStorage.getItem('sabores'));
        arrayPizza.forEach((item, index) => {

          let produto = {};
          let produto_selecionado = produtos.filter(prod => (prod.mat_001 == item.codigo));

          if (produto_selecionado) {
            let indice = ((new Date().getTime() / 1000) * Math.random()).toString();
            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.descricao_tamanho = item.descricao_tamanho;

            if (produto.vende_fracionado) {
              if (item.qtde == 0.3333) {
                produto.quantidade = parseFloat(item.qtde).toFixed(4);
              } else {
                produto.quantidade = parseFloat(item.qtde).toFixed(3);
              }
            } else {
              produto.quantidade = parseFloat(item.qtde).toFixed(3);
            }
            produto.tamanho_padrao = produto_selecionado[0].tamanho_padrao;
            produto.tamanho_pedido = item.tamanho;
            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';
            // Observação: por sabor ou para todos
            let obsTexto = observacoes[String(item.codigo)] || observacoes['todos'] || '';
            produto.observacao = obsTexto;
            produto.opcao_observacao = '';
            produto.opcional = opcionais;
            produto.pacote = [];

            carrinho.push(produto);
          }
        });

        localStorage.setItem('carrinho', JSON.stringify(carrinho));
        localStorage.removeItem('sabores');
        localStorage.removeItem('opc_selecoes');
        localStorage.removeItem('opc_observacoes');
        Snackbar.show({
          text: 'Produto adicionado com sucesso!',
          actionText: 'Fechar',
          duration: 1000,
          pos: 'bottom-center',
          width: '100%'
        });

        setTimeout(function() {
          ProcessingModal.show({
            text: 'Aguarde, carregando ...'
          });
          window.location.href = '<?= $linkListagem ?>';
        }, 500);
      });

      function carregaOpcionais() {
        let container = document.getElementById('box-opcionais');
        let opcionaisStorage = [];
        let opcionaisLista = [];
        let produtos = [];
        let codigo = '<?= $codigo ?>';
        let produto = {};
        let html = '';

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

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

          if (produtos.length > 0) {
            produto = produtos.filter(prod => prod.mat_001 == codigo);
          }
        }

        if (opcionaisStorage.length > 0) {
          opcionaisLista = opcionaisStorage.filter(opcao => opcao.id_categoria == produto[0].cat_001);
        }

        // Armazena para uso na modal de pesquisa
        opcionaisData = opcionaisLista;

        if (opcionaisLista.length > 0) {
          opcionaisLista.forEach(opcional => {
            html += `<div class="opc-card" role="checkbox" aria-checked="false" aria-label="${opcional.descricao}">
                      <div class="opc-card-check">
                        <i class="material-icons">check</i>
                      </div>
                      <div class="opc-card-info">
                        <div class="opc-card-nome">${opcional.descricao.toUpperCase()}</div>
                        <div class="opc-card-valor">R$ ${opcional.valor}</div>
                      </div>
                      <input type="checkbox" class="ckb-opcional" value="${opcional.id_opcional}" style="display:none">
                     </div>`;
          });
        } else {
          html = `<div class="opc-vazio">
                    <i class="material-icons">playlist_add</i>
                    <p>Nenhum adicional disponível para este produto</p>
                  </div>`;
        }

        container.innerHTML = html;
      }

      function carregaSabores() {
        let html = '';
        let arrayPizza = JSON.parse(localStorage.getItem('sabores'));

        arrayPizza.forEach((item, index) => {
          let qtde = '';

          switch (arrayPizza.length) {
            case 1:
              qtde = '1';
              break;
            case 2:
              qtde = '1/2';
              break;
            case 3:
              qtde = '1/3';
              break;
            case 4:
              qtde = '1/4';
              break;
            default:
              qtde = '1';
          }

          let cor = CORES_SABORES[index % CORES_SABORES.length];
          html += `<div class="opc-sabor-tag" data-codigo="${item.codigo}">
                    <span class="opc-sabor-cor" style="background:${cor}"></span>
                    <span class="opc-sabor-nome">${item.nome}</span>
                    <span class="opc-sabor-qtde">${qtde}</span>
                   </div>`;
        });

        $('#tamanho').text(arrayPizza[0].descricao_tamanho);
        $('#container-sabores').html(html);
      }
    });
  </script>
</body>

</html>