{# templates/faturamento/faturamento.html.twig #}
{% extends "base.html.twig" %}

{% block title %}Faturamento{% endblock %}

{% block body %}

{% set meses = {
  1:'Janeiro', 2:'Fevereiro', 3:'Março', 4:'Abril', 5:'Maio', 6:'Junho',
  7:'Julho', 8:'Agosto', 9:'Setembro', 10:'Outubro', 11:'Novembro', 12:'Dezembro'
} %}

{# anos disponíveis vindos da lista #}
{% set anosDisponiveis = [] %}
{% for r in lista %}
  {% if r.ano not in anosDisponiveis %}
    {% set anosDisponiveis = anosDisponiveis|merge([r.ano]) %}
  {% endif %}
{% endfor %}
{% if anosDisponiveis is empty %}
  {% set anosDisponiveis = [ano] %}
{% endif %}

<div class="container-xxl px-2">
  {% set mediaMensal = (totalFaturamento / 12) %}

  <div class="row g-3 mb-3">
    <div class="col-12">
      <div class="card border-0 shadow-sm rounded-4 bg-light">
        <div class="card-body p-3 p-md-4">
          <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3">

            <div class="d-flex align-items-center gap-2">
              <h5 class="mb-0 fw-semibold">Resumo do Faturamento de {{ ano }}</h5>
            </div>

            <div class="d-flex flex-column flex-sm-row gap-3 w-100 w-md-auto">
              <div class="rounded-3 bg-white border p-3 flex-fill">
                <div class="text-muted small mb-1 d-flex align-items-center gap-1">
                  <i class="bx bx-chart"></i> Total do ano
                </div>
                <div class="fs-4 fw-bold">
                  R$ {{ totalFaturamento|number_format(2, ',', '.') }}
                </div>
              </div>

              <div class="rounded-3 bg-white border p-3 flex-fill">
                <div class="text-muted small mb-1 d-flex align-items-center gap-1">
                  <i class="bx bx-bar-chart-alt-2"></i> Média por mês
                </div>
                <div class="fs-5 fw-semibold">
                  R$ {{ mediaMensal|number_format(2, ',', '.') }}
                </div>
                <small class="text-muted">Considerando 12 meses</small>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3 align-items-center mb-3">
    <div class="col-12 col-lg-4">
      <div class="row g-2 align-items-center">
        <div class="col-auto">
          <label for="filtroAno" class="col-form-label">Ano</label>
        </div>
        <div class="col-auto">
          <select id="filtroAno" name="ano" class="form-select">
            {% for row in listaAnos %}
              <option value="{{ row['ano'] }}" {{ row['ano'] == ano ? 'selected' : '' }}>{{ row['ano'] }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-4">
      <div class="col-12 col-md ms-md-3">
        <input
          type="text"
          id="searchFaturamento"
          class="form-control"
          placeholder="🔍 Pesquisar por mês..." />
      </div>
    </div>

    <div class="col-12 col-lg-4 d-flex gap-2 justify-content-lg-end">
      <a id="btnPdf"
         class="btn btn-danger d-inline-flex align-items-center"
         href="{{ path('app_faturamento_exportar', { ano: ano }) }}"
         data-pdf-template="{{ path('app_faturamento_exportar', { ano: ano }) }}">
        <i class="bx bxs-file-pdf me-2"></i>
        PDF
      </a>
    </div>
  </div>

  <div class="row justify-content-center mb-2">
    <div class="col-auto">
      <small id="totalItems" class="text-muted"></small>
    </div>
  </div>

  <div id="faturamento" class="row gy-3">
    {% for m in 1..12 %}
      {% set row = porMes[m ~ '']|default(null) %}
      {% set total = row ? row.totalLiquido|default(0) : 0 %}
      {% set totalFormat = total|number_format(2, ',', '.') %}
      {% set mesNome = row.mesExtenso|default(meses[m]) %}

      <div class="col-12 card-item" data-search="{{ mesNome }} {{ m }} {{ ano }}">
        <div class="card shadow-lg border-0 rounded-3">
          <div class="card-body p-3">
            <div class="d-flex flex-row align-items-center gap-3">

              <div class="flex-grow-1">
                <div class="d-flex align-items-center gap-1">
                  <h6 class="mb-1 fw-semibold">{{ mesNome }}</h6>
                  <span style="font-size: 8px; color: #777;">●</span>
                  <span class="badge bg-light text-body border">{{ ano }}</span>
                </div>
                <p class="card-text text-muted mb-1 d-flex align-items-center gap-1">
                  R$ {{ totalFormat }}
                </p>
              </div>

              <div class="ms-auto">
                <a 
                  href="#"
                  class="btn btn-outline-primary btn-sm carregarOffcanvas"
                  data-url="{{ path('app_faturamento_detalhe', {'ano': ano, 'mes': m}) }}"
                  data-titulo="Detalhamento de {{ mesNome }}/{{ ano }}"
                  data-bs-toggle="offcanvas"
                  data-bs-target="#offcanvasEnd"
                >
                  <i class="bx bx-show text-primary me-1"></i> Visualizar
                </a>
              </div>

            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="row mt-4">
    <div class="col text-center">
      <nav aria-label="Paginação">
        <ul id="paginationFaturamento" class="pagination justify-content-center mb-0"></ul>
      </nav>
    </div>
  </div>

</div>
{% endblock %}

{% block javascripts %}
<script>
  jQuery(function($) {
    window.tabelaServicos = new TabelaDefault({
      cardContainerId: 'faturamento',
      paginationId: 'paginationFaturamento',
      searchInputId: 'searchFaturamento',
      itemsPerPage: 12
    });

    var pdfTpl = $('#btnPdf').data('pdf-template');

    function buildPdfUrl(ano) {
      if (/\d{4}/.test(pdfTpl)) {
        return pdfTpl.replace(/\d{4}(?!.*\d)/, String(ano));
      }
      var url = new URL(pdfTpl, window.location.origin);
      url.searchParams.set('ano', String(ano));
      return url.toString();
    }

    $('#filtroAno').on('change', function() {
      var ano = $(this).val();

      $('#btnPdf').attr('href', buildPdfUrl(ano));

      var urlBase = "{{ path('app_faturamento') }}";
      window.location.href = urlBase + '?ano=' + encodeURIComponent(ano);
    });
  });
</script>
{% endblock %}