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

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

$sql = 'SELECT mat_004, mat_003, tamanho_padrao, b_venda_tamanho FROM materiais WHERE mat_001 = :codigo';
$stm = $pdo->prepare($sql);
$stm->bindValue(':codigo', $id_produto);
$stm->execute();
$produto = $stm->fetch(PDO::FETCH_OBJ);

$sql = 'SELECT DISTINCT e.*, ep.ordem ';
$sql .= 'FROM etapa_produtos ep INNER JOIN etapa e ON ep.id_etapa = e.id ';
$sql .= 'INNER JOIN etapa_opcoes eo ON eo.id_etapa = ep.id_etapa         ';
$sql .= 'WHERE eo.exporta_integracao AND ep.status = 1 AND e.status = 1  ';
$sql .= 'AND eo.status = 1 AND ep.id_produto = :codigo AND e.exibe_salao = 1 ';
$sql .= 'ORDER BY ep.ordem';
$stm = $pdo->prepare($sql);
$stm->bindValue(':codigo', $produto->mat_004);
$stm->execute();
$etapas = $stm->fetchAll(PDO::FETCH_OBJ);

$sql = "SELECT DISTINCT tamanho_p, tamanho_m, tamanho_g, tamanho_gg, tamanho_extra ";
$sql .= "FROM desc_tamanho_material ";
$stm = $pdo->prepare($sql);
$stm->execute();
$tamanhos = $stm->fetch(PDO::FETCH_OBJ);

switch ($produto->tamanho_padrao):
  case 'P':
    $descricao = $tamanhos->tamanho_p;
    break;
  case 'M':
    $descricao = $tamanhos->tamanho_m;
    break;
  case 'G':
    $descricao = $tamanhos->tamanho_g;
    break;
  case 'GG':
    $descricao = $tamanhos->tamanho_gg;
    break;
  case 'E':
    $descricao = $tamanhos->tamanho_extra;
    break;
  default:
    $descricao = $tamanhos->tamanho_m;
endswitch;
$tamanhoAbreviado = $produto->tamanho_padrao;

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;

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-altura {
      display: block;
      height: 60px;
    }

    /* === CARD PRODUTO (cabeçalho) === */
    .card-produto-header {
      border-radius: 12px !important;
      border: 1px solid #e0e3eb;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
      overflow: hidden;
      margin: 12px;
      width: calc(100% - 24px);
      background: #f5f6fa;
    }

    .card-produto-header .card-produto-body {
      padding: 16px;
    }

    .produto-nome {
      font-size: 16px;
      font-weight: 700;
      color: #212121;
      margin-bottom: 12px !important;
      line-height: 1.4;
    }

    .campo-grupo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .campo-grupo label {
      font-size: 13px;
      font-weight: 700;
      color: #555;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      min-width: 75px;
      margin: 0;
    }

    .campo-grupo select {
      flex: 1;
      max-width: 160px;
      padding: 10px 12px;
      border: 1px solid #dde1ea;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      color: #333;
      background: #fff;
      appearance: auto;
      outline: none;
      transition: border-color 0.2s;
    }

    .campo-grupo select:focus {
      border-color: #3f51b5;
      box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.15);
    }

    /* === QTDE PRODUTO (botões +/-) === */
    .qtde-produto-controle {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .qtde-produto-controle .qtde-produto-valor {
      width: 40px;
      text-align: center;
      font-size: 18px;
      font-weight: 700;
      color: #3f51b5;
      border: none;
      background: transparent;
      outline: none;
      -moz-appearance: textfield;
    }

    .qtde-produto-controle .qtde-produto-valor::-webkit-outer-spin-button,
    .qtde-produto-controle .qtde-produto-valor::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* === CARD ETAPA === */
    .card-etapa {
      border-radius: 12px !important;
      border: 1px solid #e0e3eb;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
      overflow: hidden;
      margin: 10px 12px;
      width: calc(100% - 24px);
      background: #f5f6fa;
      transition: border-color 0.3s;
    }

    /* Estado de erro no card inteiro */
    .card-etapa.erro {
      border-color: #e74c3c;
      background: #fff0f0;
      box-shadow: 0 2px 12px rgba(231, 76, 60, 0.15) !important;
      transition: all 0.3s ease;
    }

    .card-etapa.erro .etapa-header {
      background: #fce4e4;
      border-bottom-color: #f5c3c3;
    }

    .card-etapa.erro .etapa-titulo {
      color: #c0392b;
    }

    .card-etapa.erro .etapa-subtitulo {
      color: #c0392b;
      font-weight: 700;
    }

    .card-etapa.erro .etapa-opcoes {
      background: #fff5f5;
    }

    .card-etapa.erro .opcao-qtde-row {
      border-color: #f5c3c3;
      background: #fff8f8;
    }

    .card-etapa.erro .opcao-item:active {
      background: #fce4e4;
    }

    .etapa-header {
      padding: 14px 16px 10px;
      background: #eceef5;
      border-bottom: 1px solid #e0e3eb;
      transition: background 0.3s, border-color 0.3s;
    }

    .etapa-titulo {
      font-size: 15px;
      font-weight: 700;
      color: #212121;
      margin: 0 !important;
      transition: color 0.3s;
    }

    .etapa-subtitulo {
      font-size: 12px;
      font-weight: 600;
      color: #9e9e9e;
      margin: 4px 0 0 !important;
      transition: color 0.3s;
    }

    .etapa-subtitulo.obrigatoria {
      color: #e74c3c;
    }

    .etapa-opcoes {
      padding: 10px 16px 14px;
    }

    /* === OPÇÕES (radio / checkbox) === */
    .opcao-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      margin: 4px 0;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
      font-size: 15px;
      color: #333;
      -webkit-tap-highlight-color: transparent;
    }

    .opcao-item:active {
      background: #eceef5;
    }

    .opcao-item input[type=checkbox],
    .opcao-item input[type=radio] {
      width: 20px;
      height: 20px;
      min-width: 20px;
      accent-color: #3f51b5;
      cursor: pointer;
    }

    .opcao-item .opcao-texto {
      flex: 1;
      line-height: 1.3;
    }

    .opcao-item .opcao-valor {
      font-size: 12px;
      font-weight: 700;
      color: #888;
      white-space: nowrap;
    }

    /* === OPÇÕES COM QUANTIDADE (+ / -) === */
    .opcao-qtde-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      margin: 4px 0;
      border-radius: 8px;
      background: #fff;
      border: 1px solid #e0e3eb;
    }

    .opcao-qtde-row .opcao-texto {
      flex: 1;
      font-size: 15px;
      color: #333;
      line-height: 1.3;
    }

    .opcao-qtde-controles {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .btn-subtrai,
    .btn-adiciona {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 8px;
      color: #fff;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: filter 0.15s;
      padding: 0;
    }

    .btn-subtrai {
      background: #e74c3c;
    }

    .btn-adiciona {
      background: #2e7d32;
    }

    .btn-subtrai:active,
    .btn-adiciona:active {
      filter: brightness(0.85);
    }

    .btn-subtrai i,
    .btn-adiciona i {
      font-size: 22px !important;
      vertical-align: middle;
    }

    .qtde-display {
      width: 36px;
      text-align: center;
      font-size: 17px;
      font-weight: 700;
      color: #3f51b5;
      border: none;
      background: transparent;
      outline: none;
      -moz-appearance: textfield;
    }

    .qtde-display::-webkit-outer-spin-button,
    .qtde-display::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* === MENSAGEM DE VALIDAÇÃO (dentro do header) === */
    .validacao-msg {
      display: none;
      padding: 6px 0 0;
      color: #c0392b;
      font-size: 12px;
      font-weight: 600;
      align-items: center;
      gap: 5px;
    }

    .validacao-msg.show {
      display: flex;
      animation: fadeIn 0.25s ease;
    }

    .validacao-msg i {
      font-size: 16px !important;
      color: #e74c3c;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }

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

    /* === SEÇÃO ETAPAS === */
    .etapas-container {
      padding-bottom: 8px;
    }

    .etapas-container .section-divider {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      margin: 0 12px;
    }

    .etapas-container .section-divider span {
      font-size: 11px;
      font-weight: 700;
      color: #9e9e9e;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    .etapas-container .section-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #e0e3eb;
    }

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

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

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

    [data-theme="dark"] .campo-grupo select {
      background: var(--bg-input);
      color: var(--text-primary);
      border-color: var(--border-color);
    }

    [data-theme="dark"] .qtde-produto-controle .qtde-produto-valor {
      color: var(--color-quantidade);
    }

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

    [data-theme="dark"] .etapa-header {
      background: var(--bg-surface);
      border-bottom-color: var(--border-color);
    }

    [data-theme="dark"] .etapa-titulo {
      color: var(--text-primary);
    }

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

    [data-theme="dark"] .etapa-opcoes {
      background: var(--bg-card);
    }

    [data-theme="dark"] .opcao-item {
      color: var(--text-primary);
    }

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

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

    [data-theme="dark"] .opcao-qtde-row {
      background: var(--bg-surface);
      border-color: var(--border-color);
    }

    [data-theme="dark"] .opcao-qtde-row .opcao-texto {
      color: var(--text-primary);
    }

    [data-theme="dark"] .qtde-display {
      color: var(--color-quantidade);
    }

    [data-theme="dark"] .etapas-container .section-divider span {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .etapas-container .section-divider::after {
      background: var(--border-color);
    }

    /* ── Dark Theme: Estado de erro (validação) ── */
    [data-theme="dark"] .card-etapa.erro {
      border-color: #e74c3c;
      background: rgba(231, 76, 60, 0.08);
      box-shadow: 0 2px 12px rgba(231, 76, 60, 0.2) !important;
    }

    [data-theme="dark"] .card-etapa.erro .etapa-header {
      background: rgba(231, 76, 60, 0.12);
      border-bottom-color: rgba(231, 76, 60, 0.2);
    }

    [data-theme="dark"] .card-etapa.erro .etapa-titulo {
      color: #ff6b6b;
    }

    [data-theme="dark"] .card-etapa.erro .etapa-subtitulo {
      color: #ff6b6b;
      font-weight: 700;
    }

    [data-theme="dark"] .card-etapa.erro .etapa-opcoes {
      background: rgba(231, 76, 60, 0.05);
    }

    [data-theme="dark"] .card-etapa.erro .opcao-qtde-row {
      border-color: rgba(231, 76, 60, 0.2);
      background: rgba(231, 76, 60, 0.06);
    }

    [data-theme="dark"] .card-etapa.erro .opcao-item:active {
      background: rgba(231, 76, 60, 0.12);
    }

    [data-theme="dark"] .validacao-msg {
      color: #ff6b6b;
    }

    [data-theme="dark"] .validacao-msg i {
      color: #ff6b6b;
    }
  </style>
</head>

<body>
  <script>
    loadPagina()
  </script>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header page">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row login">
        <span class="mdl-layout-title">ETAPAS DO PEDIDO</span>
      </div>
    </header>

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

    <main class="mdl-layout__content">

      <!-- Card do Produto -->
      <div class="card-produto-header">
        <div class="card-produto-body">
          <p class="produto-nome"><?= $produto->mat_003 ?></p>

          <div class="campo-grupo">
            <label>Qtde</label>
            <div class="qtde-produto-controle">
              <a href="javascript:void(0)" class="btn-subtrai-qtde">
                <i class="material-icons text-red md-48 btn-qtde">remove_circle</i>
              </a>
              <input type="number" id="qtde" class="qtde-produto-valor" value="1" min="1" max="99" readonly>
              <a href="javascript:void(0)" class="btn-adiciona-qtde">
                <i class="material-icons text-green md-48 btn-qtde">add_circle</i>
              </a>
            </div>
          </div>

          <?php if ($produto->b_venda_tamanho): ?>
            <div class="campo-grupo">
              <label for="tamanho">Tamanho</label>
              <select id="tamanho">
                <option value="<?= $tamanhoAbreviado ?>"><?= $descricao ?></option>
                <option value="P">Pequeno</option>
                <option value="M">Médio</option>
                <option value="G">Grande</option>
              </select>
            </div>
          <?php endif; ?>
        </div>
      </div>

      <!-- Etapas -->
      <div class="etapas-container">
        <div class="section-divider">
          <span>Personalize seu pedido</span>
        </div>

        <?php foreach ($etapas as $etapa):

          $sub_texto = '';
          $is_obrigatoria = false;
          if ($etapa->maximo_soma_qtde_etapa >= 1):
            if ($etapa->minimo_soma_qtde_etapa >= 1):
              $sub_texto = 'Obrigatório — escolha de ' . $etapa->minimo_soma_qtde_etapa . ' até ' . $etapa->maximo_soma_qtde_etapa . ' opções';
              $is_obrigatoria = true;
            else:
              $sub_texto = 'Obrigatório — escolha ' . $etapa->maximo_soma_qtde_etapa . ' opções';
              $is_obrigatoria = true;
            endif;
          elseif ($etapa->resposta_minima == 1 && $etapa->resposta_maxima == 1):
            $sub_texto = 'Obrigatório — escolha 1 opção';
            $is_obrigatoria = true;
          elseif ($etapa->resposta_minima >= 1 && $etapa->resposta_maxima > 1):
            $sub_texto = 'Escolha de ' . $etapa->resposta_minima . ' até ' . $etapa->resposta_maxima . ' opções';
            $is_obrigatoria = true;
          elseif ($etapa->resposta_minima == 0 && $etapa->resposta_maxima > 1):
            $sub_texto = 'Opcional — até ' . $etapa->resposta_maxima . ' opções';
          elseif ($etapa->resposta_minima == 0 && $etapa->resposta_maxima == 0):
            $sub_texto = '';
          endif;

        ?>
          <div class="card-etapa" id="card-etapa-<?= $etapa->id ?>">
            <div class="etapa-header">
              <p class="etapa-titulo etapa fase-<?= $etapa->id ?>"
                id="<?= $etapa->id ?>"
                data-id="<?= $etapa->id ?>"
                data-tipo="<?= $etapa->tipo ?>"
                data-resposta-obrigatoria="<?= (int) $etapa->resposta_obrigatoria ?>"
                data-resposta-minima="<?= $etapa->resposta_minima ?>"
                data-resposta-maxima="<?= $etapa->resposta_maxima ?>"
                data-maximo-soma-etapa="<?= $etapa->maximo_soma_qtde_etapa ?>"
                data-minimo-soma-etapa="<?= $etapa->minimo_soma_qtde_etapa ?>">
                <?= $etapa->titulo ?>
              </p>
              <?php if ($sub_texto): ?>
                <p class="etapa-subtitulo sub-<?= $etapa->id ?> <?= $is_obrigatoria ? 'obrigatoria' : '' ?>"><?= $sub_texto ?></p>
              <?php endif; ?>
              <div class="validacao-msg validacao-<?= $etapa->id ?>">
                <i class="material-icons">warning</i>
                <span>Preencha esta etapa para continuar</span>
              </div>
            </div>

            <div class="etapa-opcoes">
              <?php
              $sql = 'SELECT DISTINCT eo.* ';
              $sql .= 'FROM etapa_produtos ep INNER JOIN etapa e ON ep.id_etapa = e.id ';
              $sql .= 'INNER JOIN etapa_opcoes eo ON eo.id_etapa = ep.id_etapa ';
              $sql .= 'WHERE eo.exporta_integracao AND ep.status = 1 AND eo.status = 1 AND ep.id_produto = :codigo AND e.id = :etapa ';
              $sql .= 'ORDER BY eo.titulo';
              $stm = $pdo->prepare($sql);
              $stm->bindValue(':codigo', $produto->mat_004);
              $stm->bindValue(':etapa', $etapa->id);
              $stm->execute();
              $opcoes = $stm->fetchAll(PDO::FETCH_OBJ);

              foreach ($opcoes as $opcao):

                $valor_formatado = '';
                if ($etapa->tipo != 'A' && $opcao->valor_etapa > 0):
                  $valor_formatado = 'R$ ' . number_format($opcao->valor_etapa, 2, ',', '.');
                endif;

                if ($etapa->maximo_soma_qtde_etapa >= 1): ?>

                  <div class="opcao-qtde-row">
                    <span class="opcao-texto"
                      data-valor="<?= $opcao->valor_etapa ?>"
                      data-id-registro="<?= $opcao->id_registro ?>"
                      id="etapa<?= $opcao->id ?>"
                      name="etapa<?= $opcao->id_etapa ?>"
                      class="opcao etapa-<?= $opcao->id_etapa ?>"
                      value="<?= $opcao->titulo ?>">
                      <?= $opcao->titulo ?>
                      <?php if ($valor_formatado): ?>
                        <span class="opcao-valor"><?= $valor_formatado ?></span>
                      <?php endif; ?>
                    </span>
                    <div class="opcao-qtde-controles">
                      <button type="button"
                        class="btn-subtrai"
                        data-id="<?= $opcao->id ?>"
                        data-etapa="<?= $etapa->id ?>">
                        <i class="material-icons">remove</i>
                      </button>
                      <input type="number"
                        class="qtde-display etapa-qtde-<?= $etapa->id ?>"
                        data-descricao="<?= $opcao->titulo ?>"
                        data-id="<?= $opcao->id ?>"
                        data-id-registro="<?= $opcao->id_registro ?>"
                        data-tipo="<?= $etapa->tipo ?>"
                        id="quantidade-<?= $opcao->id ?>"
                        value="0"
                        readonly>
                      <button type="button"
                        class="btn-adiciona"
                        data-id="<?= $opcao->id ?>"
                        data-etapa="<?= $etapa->id ?>">
                        <i class="material-icons">add</i>
                      </button>
                    </div>
                  </div>

                  <?php else:
                  if ($etapa->resposta_minima == 1 && $etapa->resposta_maxima == 1): ?>
                    <label class="opcao-item opcao" data-etapa="<?= $opcao->id_etapa ?>" data-opcao="<?= $opcao->id ?>">
                      <input type="radio" data-valor="<?= $opcao->valor_etapa ?>"
                        data-id-registro="<?= $opcao->id_registro ?>"
                        id="etapa<?= $opcao->id ?>"
                        name="etapa<?= $opcao->id_etapa ?>"
                        class="opcao etapa-<?= $opcao->id_etapa ?>"
                        value="<?= $opcao->titulo ?>">
                      <span class="opcao-texto"><?= $opcao->titulo ?></span>
                      <?php if ($valor_formatado): ?>
                        <span class="opcao-valor"><?= $valor_formatado ?></span>
                      <?php endif; ?>
                    </label>
                  <?php else: ?>
                    <label class="opcao-item opcao" data-etapa="<?= $opcao->id_etapa ?>" data-opcao="<?= $opcao->id ?>">
                      <input type="checkbox" data-valor="<?= $opcao->valor_etapa ?>"
                        data-id-registro="<?= $opcao->id_registro ?>"
                        id="etapa<?= $opcao->id ?>"
                        class="opcao etapa-<?= $opcao->id_etapa ?>"
                        value="<?= $opcao->titulo ?>">
                      <span class="opcao-texto"><?= $opcao->titulo ?></span>
                      <?php if ($valor_formatado): ?>
                        <span class="opcao-valor"><?= $valor_formatado ?></span>
                      <?php endif; ?>
                    </label>
                  <?php endif; ?>
                <?php endif; ?>

              <?php endforeach; ?>
            </div>
          </div>
        <?php endforeach; ?>
      </div>

      <div class="box-altura"></div>
    </main>
    <div class="footer-fixo">
      <button class="btn-footer btn-footer-danger" onclick="javascript:window.history.go(-1)">
        <i class="material-icons">arrow_back</i>
        VOLTAR
      </button>
      <button class="btn-footer btn-footer-success btn-finalizar">
        <i class="material-icons">check_circle</i>
        PRÓXIMO
      </button>
    </div>
  </div>

  <?php include 'includes/inc_js.php'; ?>
  <script>
    function preloader() {
      ProcessingModal.hide();
      $('#page').show();
    }
    window.onload = preloader;

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

      var arrayEtapa = []
      var arrayOpcionais = []

      function alertTitleEtapa(classe, id) {
        let card = document.querySelector('#card-etapa-' + id)
        let validacao = document.querySelector('.validacao-' + id)

        // Scroll suave até o card
        card.scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        })

        // Aplica estado de erro no card inteiro
        card.classList.add('erro')

        // Mostra mensagem de validação no header
        if (validacao) {
          validacao.classList.add('show')
        }

        // Remove erro após 3 segundos
        setTimeout(() => {
          card.classList.remove('erro')
          if (validacao) validacao.classList.remove('show')
        }, 3000)
      }

      function preenchimentoValido() {
        let erro = 0;
        let id = 0

        $('.etapa').each(function(index) {
          let resposta_obrigatoria = $(this).attr('data-resposta-obrigatoria')
          let resposta_minima = $(this).attr('data-resposta-minima')
          let resposta_maxima = $(this).attr('data-resposta-maxima')
          let minimo_soma_resposta_etapa = parseFloat($(this).attr('data-minimo-soma-etapa'))
          let maximo_soma_resposta_etapa = parseFloat($(this).attr('data-maximo-soma-etapa'))
          let marcado = 0
          let etapa = this
          id = $(this).attr('data-id')

          if (maximo_soma_resposta_etapa > 0) {
            if (!isQtdeValidaEtapa(id)) {
              erro++;
              return false;
            }
          } else {
            $('.etapa-' + id).each(function(i) {
              if ($(this).prop('checked')) {
                marcado++;
              }
            })

            if (resposta_obrigatoria == 1 && marcado == 0) {
              erro++;
              return false;
            } else if (resposta_minima >= 1 && marcado < resposta_minima) {
              erro++;
              return false;
            }
          }

        });

        if (erro > 0) {
          alertTitleEtapa('fase-' + id, id)
        }

        return (erro == 0)
      }

      function preencheArray() {
        let ordem = 0

        $('.etapa').each(function(index) {
          let tipo = $(this).attr('data-tipo')
          let id = $(this).attr('data-id')
          let maximo_soma_resposta_etapa = parseFloat($(this).attr('data-maximo-soma-etapa'))

          if (maximo_soma_resposta_etapa > 0) {
            $('.etapa-qtde-' + id).each(function() {
              let valor = 0
              let id_registro = $(this).attr('data-id-registro')
              let descricao = $(this).attr('data-descricao')
              let tipo = $(this).attr('data-tipo')
              let qtde = parseFloat($(this).val())
              ordem++

              if (qtde > 0) {
                arrayEtapa.push({
                  ordem: ordem,
                  id: id_registro,
                  descricao: descricao,
                  valor: valor,
                  tipo: tipo,
                  quantidade: qtde
                })
              }
            })
          } else {
            $('.etapa-' + id).each(function(i) {
              if ($(this).prop('checked')) {
                let id_registro = $(this).attr('data-id-registro')
                let descricao = $(this).val()
                let valor = $(this).attr('data-valor')
                ordem++

                arrayEtapa.push({
                  ordem: ordem,
                  id: id_registro,
                  descricao: descricao,
                  valor: valor,
                  tipo: tipo,
                  quantidade: 1
                })
              }
            })
          }
        });
      }

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

        if (preenchimentoValido()) {
          let id = '<?= $id_produto ?>'
          let qtde = $('#qtde').val()
          let tamanho = $('#tamanho').val()
          let qtde_real = parseFloat($('#qtde').val())
          let contador = 0
          let ordem = 1
          preencheArray();

          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 = qtde_real.toFixed(3)
            produto.tamanho_padrao = produto_selecionado[0].tamanho_padrao
            produto.tamanho_pedido = (tamanho != undefined) ? tamanho : '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 = arrayOpcionais
            produto.pacote = arrayEtapa

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

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

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

      $('.opcao').on('click', function() {
        let etapa = $(this).attr('data-etapa')
        let opcao = $(this).attr('data-opcao')
        let resposta_minima = $('#' + etapa).attr('data-resposta-minima')
        let resposta_maxima = $('#' + etapa).attr('data-resposta-maxima')
        let marcado = 0

        // Esconde mensagem de validação ao interagir
        $('.validacao-' + etapa).removeClass('show')
        $('#card-etapa-' + etapa).removeClass('erro')

        $('.etapa-' + etapa).each(function() {
          if ($(this).prop('checked')) {
            marcado++;
          }
        })

        if (resposta_minima >= 1 && marcado == 0) {
          alertTitleEtapa('fase-' + etapa, etapa)
          $('#etapa' + opcao).prop('checked', false)
        } else if (resposta_maxima >= 1 && marcado > resposta_maxima) {
          alertTitleEtapa('fase-' + etapa, etapa)
          $('#etapa' + opcao).prop('checked', false)
        }

      })

      $(document).on('click', '.btn-adiciona-qtde', function() {
        let qtde = parseFloat($('#qtde').val())
        if (qtde < 99) {
          $('#qtde').val(qtde + 1)
        }
      })

      $(document).on('click', '.btn-subtrai-qtde', function() {
        let qtde = parseFloat($('#qtde').val())
        if (qtde > 1) {
          $('#qtde').val(qtde - 1)
        }
      })

      function somaQtdeSelecionada(id_etapa) {
        let selecionado = 0

        $('.etapa-qtde-' + id_etapa).each(function() {
          selecionado += parseFloat($(this).val())
        })

        return selecionado
      }

      function isQtdeValidaEtapa(etapa) {
        let selecionado = somaQtdeSelecionada(etapa)
        let qtde_combo = parseFloat($('#qtde').val())
        let qtde_maxima_permitida_etapa = parseFloat($('#' + etapa).attr('data-maximo-soma-etapa'))
        let qtde_minima_permitida_etapa = parseFloat($('#' + etapa).attr('data-minimo-soma-etapa'))
        let qtdeMaxima = qtde_combo * qtde_maxima_permitida_etapa
        let qtdeMinima = qtde_combo * qtde_minima_permitida_etapa

        if (qtde_maxima_permitida_etapa >= 1) {
          if (qtde_minima_permitida_etapa >= 1) {
            $('.sub-' + etapa).text('Obrigatório — escolha de ' + (qtde_combo * qtde_minima_permitida_etapa) + ' até ' + (qtde_combo * qtde_maxima_permitida_etapa) + ' opções')
          } else {
            $('.sub-' + etapa).text('Obrigatório — escolha ' + (qtde_combo * qtde_maxima_permitida_etapa) + ' opções')
          }
        }

        return (selecionado >= qtdeMinima && selecionado <= qtdeMaxima)
      }

      $(document).on('click', '.btn-adiciona', function(event) {
        let id = $(this).attr('data-id')
        let etapa = $(this).attr('data-etapa')
        let qtde_opcao = parseFloat($('#quantidade-' + id).val())
        let qtde_combo = parseFloat($('#qtde').val())
        let qtde_permitida_etapa = parseFloat($('#' + etapa).attr('data-maximo-soma-etapa'))
        let qtde_selecionada = somaQtdeSelecionada(etapa)

        // Esconde mensagem de validação ao interagir
        $('.validacao-' + etapa).removeClass('show')
        $('#card-etapa-' + etapa).removeClass('erro')

        qtde_opcao += parseFloat(1)

        if ((qtde_combo * qtde_permitida_etapa) > qtde_selecionada) {
          $('#quantidade-' + id).val(qtde_opcao)
        } else {
          alertTitleEtapa('fase-' + etapa, etapa)
        }
      })

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

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

    });
  </script>
</body>

</html>