<?php
/* View shell — filtro por período + operadores ativos + container AJAX.
 * Todo o conteúdo dinâmico é renderizado pelo fechamento-caixa.js. */
?>
<?php
$cssV = @filemtime($_SERVER['DOCUMENT_ROOT'] . '/assets/css/fechamento-caixa.css') ?: time();
$jsV  = @filemtime($_SERVER['DOCUMENT_ROOT'] . '/assets/js/fechamento-caixa.js')  ?: time();
?>
<link rel="stylesheet" href="/assets/css/fechamento-caixa.css?v=<?= $cssV ?>">

<div class="container-fluid px-4 py-3">

  <!-- Cabeçalho -->
  <div class="d-flex align-items-center gap-3 mb-4">
    <div class="p-2 rounded-3" style="background:#1e2130">
      <i class="bi bi-cash-stack fs-3" style="color:#4f8ef7"></i>
    </div>
    <div>
      <h4 class="mb-0 fw-bold">Fechamento de Caixa</h4>
      <small class="text-muted">Conferência por operador · apenas supervisores</small>
    </div>
  </div>

  <!-- Legenda explicativa dos termos do módulo -->
  <div class="pbi-hint mb-3" style="margin-top:0">
    <strong>Apurado Sistema</strong> = total que o sistema calculou pelas vendas. <strong>Apurado Operadora</strong> = o que a operadora/operador declarou ter no caixa. A <strong>diferença</strong> entre os dois mostra sobra ou falta de caixa. Abas: <strong>Vendas Detalhadas</strong> lista cada venda do turno; <strong>Informado Operador</strong> mostra o que o operador declarou por forma de pagamento.
  </div>

  <!-- Painel de filtros -->
  <div class="card border-0 mb-4" style="background:#1e2130">
    <div class="card-body pb-2">

      <!-- Botões de período -->
      <div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
        <span class="text-muted small me-1">Período:</span>
        <button class="fc-periodo-btn active" data-periodo="hoje">
          <i class="bi bi-calendar-day me-1"></i>Hoje
        </button>
        <button class="fc-periodo-btn" data-periodo="semana">
          <i class="bi bi-calendar-week me-1"></i>Semana
        </button>
        <button class="fc-periodo-btn" data-periodo="mes">
          <i class="bi bi-calendar-month me-1"></i>Mês
        </button>
        <button class="fc-periodo-btn" data-periodo="ano">
          <i class="bi bi-calendar-range me-1"></i>Ano
        </button>

        <span class="text-muted small ms-3 me-1">ou selecione:</span>

        <!-- Seletor de mês/ano/dia (calendário 2 níveis) -->
        <div class="fc-mes-picker" id="fc-mes-picker">
          <button class="fc-mes-btn" id="fc-mes-display" type="button" onclick="fcToggleMesPicker(event)">
            <i class="bi bi-calendar3 me-1"></i>
            <span id="fc-mes-label">—</span>
            <i class="bi bi-chevron-down ms-1" style="font-size:.75rem"></i>
          </button>
          <div class="fc-mes-dropdown" id="fc-mes-dropdown">

            <!-- Nível 1: grade de meses -->
            <div id="fc-nivel-mes">
              <div class="fc-mes-nav">
                <button type="button" onclick="fcMesAno(-1)"><i class="bi bi-chevron-left"></i></button>
                <span id="fc-mes-ano-label">2026</span>
                <button type="button" onclick="fcMesAno(+1)"><i class="bi bi-chevron-right"></i></button>
              </div>
              <div class="fc-mes-grid" id="fc-mes-grid"></div>
            </div>

            <!-- Nível 2: grade de dias (calendário do mês) -->
            <div id="fc-nivel-dia" style="display:none">
              <div class="fc-dia-nav">
                <button type="button" onclick="fcVoltarMeses()" title="Voltar aos meses">
                  <i class="bi bi-chevron-left"></i> Meses
                </button>
                <span id="fc-dia-mes-label">Mai 2026</span>
                <div style="display:flex;gap:2px">
                  <button type="button" onclick="fcNavDia(-1)"><i class="bi bi-chevron-left"></i></button>
                  <button type="button" onclick="fcNavDia(+1)"><i class="bi bi-chevron-right"></i></button>
                </div>
              </div>
              <div class="fc-semana-header">
                <span>Seg</span><span>Ter</span><span>Qua</span><span>Qui</span><span>Sex</span><span>Sáb</span><span>Dom</span>
              </div>
              <div class="fc-dia-grid" id="fc-dia-grid"></div>
              <button type="button" class="fc-mes-inteiro-btn" onclick="fcSelecionarMesInteiro()">
                <i class="bi bi-calendar-month me-1"></i>Mês inteiro
              </button>
            </div>

          </div>
        </div>

        <!-- Inputs ocultos usados internamente pelo JS -->
        <input type="hidden" id="fc-data-ini">
        <input type="hidden" id="fc-data-fim">
      </div>

      <!-- Painel de operadores ativos -->
      <div id="fc-operadores-painel">
        <div class="text-muted small mb-1">
          <i class="bi bi-people me-1"></i>
          <span id="fc-periodo-label">Carregando operadores...</span>
        </div>
        <div id="fc-operadores-lista" class="fc-ops-grid">
          <!-- preenchido pelo JS -->
          <?php for ($i = 0; $i < 6; $i++): ?>
            <div class="fc-skeleton" style="height:56px;border-radius:.4rem"></div>
          <?php endfor ?>
        </div>
      </div>

    </div>
  </div>

  <!-- Área de resultado dos fechamentos (preenchida pelo JS) -->
  <div id="fc-resultado">
    <div class="text-center py-5 text-muted">
      <i class="bi bi-hand-index fs-1 d-block mb-2" style="color:#2d3452"></i>
      Selecione um operador acima para ver os fechamentos
    </div>
  </div>

</div>

<script src="/assets/js/fechamento-caixa.js?v=<?= $jsV ?>"></script>
