{% extends 'base.html.twig' %}
{% block title %}Dashboard - GPI{% endblock %}
{% block bodySemCard %}

<div class="content-wrapper">
  <div class="container-xxl flex-grow-1 container-p-y">

    {# ====== KPIs (todos iguais) ====== #}
    <div class="row row-cols-1 row-cols-sm-2 row-cols-xl-4 g-4">

      {# Imóveis Cadastrados #}
      <div class="col">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <div class="d-flex align-items-start justify-content-between mb-3">
              <div class="avatar flex-shrink-0">
                <span class="avatar-initial rounded bg-label-secondary">
                  <i class="icon-base bx bx-building-house"></i>
                </span>
              </div>
              <div class="dropdown">
                <button class="btn p-0" type="button" id="opt_kpi1" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="icon-base bx bx-dots-vertical-rounded text-body-secondary"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="opt_kpi1">
                  <a class="dropdown-item" href="{{ url('app_imovel') }}">Ver imóveis</a>
                </div>
              </div>
            </div>
            <p class="mb-1 medium">Imóveis Cadastrados</p>
            <h5 class="card-title responsive-font fw-semibold mb-2">{{ totalImoveis }}</h5>
          </div>
        </div>
      </div>

      {# Valor Total do Patrimônio #}
      <div class="col">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <div class="d-flex align-items-start justify-content-between mb-3">
              <div class="avatar flex-shrink-0">
                <span class="avatar-initial rounded bg-label-success">
                  <i class="icon-base bx bx-dollar"></i>
                </span>
              </div>
              <div class="dropdown">
                <button class="btn p-0" type="button" id="opt_kpi2" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="icon-base bx bx-dots-vertical-rounded text-body-secondary"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="opt_kpi2">
                  <a class="dropdown-item" href="{{ url('app_imovel') }}">Ver imóveis</a>
                </div>
              </div>
            </div>
            <p class="mb-1 medium">Valor Total do Patrimônio</p>
            <h5 class="card-title responsive-font fw-semibold mb-2">R$ {{ totalPatrimonio }}</h5>
          </div>
        </div>
      </div>

      {# Imóveis Alugados #}
      <div class="col">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <div class="d-flex align-items-start justify-content-between mb-3">
              <div class="avatar flex-shrink-0">
                <span class="avatar-initial rounded bg-label-warning">
                  <i class="icon-base bx bx-lock-alt"></i>
                </span>
              </div>
              <div class="dropdown">
                <button class="btn p-0" type="button" id="opt_kpi3" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="icon-base bx bx-dots-vertical-rounded text-body-secondary"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="opt_kpi3">
                  <a class="dropdown-item" href="{{ url('app_imovel') }}">Ver imóveis</a>
                </div>
              </div>
            </div>
            <p class="mb-1 medium">Imóveis Alugados</p>
            <h5 class="card-title responsive-font fw-semibold mb-2">{{ imoveisAlugados }}</h5>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <div class="d-flex align-items-start justify-content-between mb-3">
              <div class="avatar flex-shrink-0">
                <span class="avatar-initial rounded bg-label-info">
                  <i class="bx bx-trending-up"></i>
                </span>
              </div>
              <div class="dropdown">
                <button class="btn p-0" type="button" id="opt_kpi4" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="icon-base bx bx-dots-vertical-rounded text-body-secondary"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="opt_kpi4">
                  <a class="dropdown-item" href="{{ url('app_faturamento') }}">Ver faturamento</a>
                </div>
              </div>
            </div>

            {% set recebido = valorRecebido|default(0) %}
            {% set esperado = valorEsperado|default(0) %}
            {% set pctRaw = esperado > 0 ? (100 * recebido / esperado) : 0 %}
            {% set pct = pctRaw > 100 ? 100 : (pctRaw < 0 ? 0 : pctRaw) %}

            <p class="mb-1 medium">Faturamento Mensal Previsto</p>
            <h5 class="card-title responsive-font fw-semibold mb-2">R$ {{ esperado|number_format(2, ',', '.') }}</h5>
            <!-- <div class="d-flex justify-content-between small text-muted">
              <span>R$ {{ recebido|number_format(2, ',', '.') }}</span>
              <span>R$ {{ esperado|number_format(2, ',', '.') }}</span>
            </div> -->
             <!-- <div class="progress my-2" role="progressbar" aria-label="Progresso do faturamento"
                 aria-valuenow="{{ pct|round(0, 'floor') }}" aria-valuemin="0" aria-valuemax="100">
              <div class="progress-bar bg-info" style="width: {{ pct }}%"></div>
            </div> -->
            <span class="small text-muted text-start mt-auto">Debitado a taxa de administração</span>
           <!--  <div class="progress my-2" role="progressbar" aria-label="Progresso do faturamento"
                 aria-valuenow="{{ pct|round(0, 'floor') }}" aria-valuemin="0" aria-valuemax="100">
              <div class="progress-bar bg-info" style="width: {{ pct }}%"></div>
            </div>
            <div class="small fw-semibold text-end mt-auto">{{ pct|round(0, 'floor') }}%</div> -->
          </div>
        </div>
      </div>

    </div>

    <div class="row g-4 mt-1">
      <div class="col-12 col-xl-12">
        <div class="card h-100">
          <div class="card-body">
            <div class="d-flex mb-4">
              <div class="avatar flex-shrink-0 me-3">
                <span class="avatar-initial rounded bg-label-info">
                  <i class="icon-base bx bx-trending-up"></i>
                </span>
              </div>
              <div>
                <p class="mb-0 text-muted small">Faturamento Mensal (Recebido)</p>
                <div class="d-flex align-items-center">
                  <h6 class="mb-0 me-2">Últimos 6 meses</h6>
                  {% if faturamentoMensal.variacao6Meses is defined %}
                    {% set variacao = faturamentoMensal.variacao6Meses %}
                    {% set positivo = variacao >= 0 %}
                    <small class="fw-medium {{ positivo ? 'text-success' : 'text-danger' }}">
                      <i class="icon-base bx {{ positivo ? 'bx-up-arrow-alt' : 'bx-down-arrow-alt' }}"></i>
                      {{ variacao|number_format(2, ',', '.') }}%
                    </small>
                  {% endif %}
                </div>
              </div>
            </div>
            <div id="graficoHome"></div>
          </div>
        </div>
      </div>

      <div class="col-12 col-xl-12">
        <div class="card h-100">
          <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title m-0 me-2">Últimas Transações</h5>
            <div class="dropdown">
              <button class="btn text-body-secondary p-0" type="button" id="transactionID"
                      data-bs-toggle="dropdown" aria-expanded="false">
                <i class="icon-base bx bx-dots-vertical-rounded icon-lg"></i>
              </button>
              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
                <a class="dropdown-item" href="{{ url('app_faturamento') }}">Ver faturamento</a>
              </div>
            </div>
          </div>
          <div class="card-body pt-4">
            <ul class="p-0 m-0">
              {% for row in transacoes %}
                <li class="d-flex align-items-center mb-4">
                  <div class="avatar flex-shrink-0 me-3">
                   
                    <span class="avatar-initial rounded bg-label-success"><i class="bx bx-check-circle"></i></span>
                  </div>

                  <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                    <div class="me-2">
                      <h6 class="fw-normal mb-0">
                        Pago em {{ row.dtPagamento|formatDate }}
                      </h6>
                      <small class="d-block text-muted">{{ row.nome }}<span style="font-size: 8px; color: #777;">●</span> Competência {{ row.mesReferencia }}/{{ row.anoReferencia }}</small>

                    </div>
                    <div class="d-flex align-items-center gap-2">
                      <h6 class="fw-normal mb-0">{{ row.valorPago|number_format(2, ',', '.') }}</h6>
                      <span class="text-body-secondary">R$</span>
                    </div>
                  </div>
                </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/componentes/Chart.js') }}"></script>
<script>
  const faturamentoValues = {{ faturamentoMensal.valores|json_encode|raw }};
  const faturamentoLabels = {{ faturamentoMensal.labels|json_encode|raw }};
  new Chart().initChart('#graficoHome', faturamentoValues, faturamentoLabels);
</script>
{% endblock %}