{% if offCanva %}
  <input type="hidden" name="offCanva" id="offCanva" value="{{ offCanva }}">
{% else %}
  <div class="row" style="margin-bottom: 3em;" id="lancarPagamento">
    <div class="d-flex justify-content-between align-items-center mt-3 mb-2">
      <p class="mb-1 text-muted">>> Lançar novo pagamento</p>
    </div>

    <div class="col-md-2">
      <label class="form-label" for="mesPagamento">Mês</label>
      <div class="input-group">
        <select class="form-select" id="mesPagamento" name="mesPagamento" required>
          <option value="">Selecione</option>
          {% for i in 1..12 %}
            <option data-extenso="{{ i|getMesPorExtenso }}" value="{{ i }}">
              {{ i|getMesPorExtenso }}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>

    <div class="col-md-2">
      <label class="form-label" for="anoPagamento">Ano</label>
      <div class="input-group">
        <select class="form-select" id="anoPagamento" name="anoPagamento" required>
          <option value="">Selecione</option>
          {% if dtInicioContrato is not empty and dtFimContrato is not empty %}
            {% set anoInicio = dtInicioContrato|date('Y') %}
            {% set anoFim = dtFimContrato|date('Y') %}

            {% for ano in anoInicio..anoFim %}
                <option value="{{ ano }}">{{ ano }}</option>
            {% endfor %}
          {% endif %}
        </select>
      </div>
    </div>

    <div class="col-md-3">
      <label class="form-label" for="valorPagamento">Valor</label>
      <div class="input-group input-group-merge">
        <span class="input-group-text">R$</span>
        <!-- <input type="number" class="form-control text-end" id="valorPagamento" name="valorPagamento" placeholder="0" required /> -->
        <input type="text" class="form-control formataMoeda" id="valorPagamento" name="valorPagamento" placeholder="0" required/>
      </div>
    </div>

    <div class="col-md-3">
      <label class="form-label" for="dataPagamento">Data</label>
      <div class="input-group">
          <input 
              type="date" 
              class="form-control" 
              id="dataPagamento" 
              name="dataPagamento" 
              value="{{ 'now'|date('Y-m-d') }}" 
              required
          />
      </div>
    </div>

    <div class="col-md-2">
      <label class="form-label" for="buttonLancarPagamento"></label>
      <div class="input-group">
        <button class="btn btn-primary w-100 buttonLancarPagamento" data-situacao="{{ situacao }}" data-idimovel="{{ idImovel }}" data-idaluguel="{{ idAluguel ?? '' }}" >Lançar</button>
      </div>
    </div>

  </div>
{% endif %}

<div id="extratoContainer" class="row gy-3">

  <div class="d-flex justify-content-between align-items-center mt-3 mb-2">
    <p class="mb-1 text-muted">>> Extrato</p>
  </div>


  {% for row in pagamentos %}
<div class="col-12 card-item">
  <div class="card border-0 shadow-sm px-3 py-3">

    <div class="row g-3 align-items-center">
      {# Esquerda: título/valores (sempre ocupa o espaço) #}
      <div class="col-12 col-md">
        <h6 class="mb-1 fw-semibold text-dark d-flex flex-wrap align-items-center gap-2">
          <span class="text-truncate">
            {{ row.mesReferencia|getMesPorExtenso }}/{{ row.anoReferencia }}
          </span>
          <span class="opacity-50" style="font-size:8px;">●</span>

          {% if row.status %}
            {% if row.status == 'Pago' %}
              <span class="badge bg-success d-inline-flex align-items-center gap-1 px-2 py-1" style="font-size:.75rem;">
                <i class="bx bx-check-circle"></i>
                {{ row.dtPagamento ? 'Pago em ' ~ row.dtPagamento|formatDate : '' }}
              </span>
            {% elseif row.status == 'Vencido' %}
              <span class="badge bg-warning d-inline-flex align-items-center gap-1 px-2 py-1 text-dark" style="font-size:.75rem;">
                <i class="bx bx-error-circle"></i>
                {{ row.dataVencimento ? 'Vencido em ' ~ row.dataVencimento|formatDate : '' }}
              </span>
            {% elseif row.status == 'Aguardando' %}
              <span class="badge bg-secondary d-inline-flex align-items-center gap-1 px-2 py-1" style="font-size:.75rem;">
                <i class="bx bx-hourglass"></i> {{ row.status ?: 'Indefinido' }}
              </span>
            {% endif %}
          {% endif %}
        </h6>

        {% set partes = [] %}
        {% if row.valorCalculado is not same as(null) %}
          {% set partes = partes|merge(['Aluguel: R$ ' ~ row.valorCalculado|number_format(2, ',', '.')]) %}
        {% endif %}
        {% if row.valorPago is not same as(null) %}
          {% set partes = partes|merge(['Recebido: R$ ' ~ row.valorPago|number_format(2, ',', '.')]) %}
        {% endif %}
        {% if partes %}
          <div class="text-secondary small">{{ partes|join(' • ') }}</div>
        {% endif %}
      </div>

      {# Direita (desktop): ações; (mobile): vai para baixo e centraliza #}
      <div class="col-12 col-md-auto d-flex flex-wrap align-items-center gap-2 justify-content-center justify-content-md-end">

        {% if row.status %}
          {% if row.status == 'Pago' %}
            <div class="border border-secondary-subtle rounded-3 px-2 py-2 d-flex align-items-center gap-2">
              <span class="fw-medium">Recibo</span>

              <div class="btn-group" role="group" aria-label="Ações Recibo">
                <button
                  class="btn btn-light btn-sm shadow-sm buttonAnexarReciboAluguel"
                  title="Anexar arquivo"
                  aria-label="Anexar arquivo"
                  data-idimovel="{{ idImovel }}"
                  data-idaluguel="{{ row.idAluguel }}"
                  data-idpagamento="{{ row.idPagamento }}"
                  data-mesextenso="{{ row.mesReferencia|getMesPorExtenso }}"
                  data-mesref="{{ row.mesReferencia }}"
                  data-anoref="{{ row.anoReferencia }}"
                  data-valor="{{ row.valorCalculado }}"
                >
                  <i class="bx bx-paperclip fs-6"></i>
                  <span class="d-none d-sm-inline ms-1">Anexar</span>
                </button>

                {% if row.identificadorRecibo is defined and row.identificadorRecibo is not empty %}
                  <button
                    class="btn btn-primary btn-sm shadow-sm buttonVerReciboAluguel"
                    title="Ver arquivo"
                    aria-label="Ver arquivo"
                    data-idimovel="{{ idImovel }}"
                    data-idaluguel="{{ row.idAluguel }}"
                    data-idpagamento="{{ row.idPagamento }}"
                    data-mesextenso="{{ row.mesReferencia|getMesPorExtenso }}"
                    data-mesref="{{ row.mesReferencia }}"
                    data-anoref="{{ row.anoReferencia }}"
                    data-valor="{{ row.valorCalculado }}"
                    data-identificadorrecibo="{{ row.identificadorRecibo|default('') }}"
                  >
                    <i class="bx bx-file fs-6"></i>
                    <span class="d-none d-sm-inline ms-1">Ver</span>
                  </button>

                  <button
                    class="btn btn-danger btn-sm shadow-sm buttonExcluirReciboAluguel"
                    title="Excluir arquivo"
                    aria-label="Excluir arquivo"
                    data-idimovel="{{ idImovel }}"
                    data-idaluguel="{{ row.idAluguel }}"
                    data-idpagamento="{{ row.idPagamento }}"
                    data-mesextenso="{{ row.mesReferencia|getMesPorExtenso }}"
                    data-mesref="{{ row.mesReferencia }}"
                    data-anoref="{{ row.anoReferencia }}"
                    data-valor="{{ row.valorCalculado }}"
                    data-identificadorrecibo="{{ row.identificadorRecibo|default('') }}"
                  >
                    <i class="bx bx-trash fs-6"></i>
                    <span class="d-none d-sm-inline ms-1">Excluir</span>
                  </button>
                {% endif %}
              </div>
            </div>

            <button
              class="btn btn-white btn-sm p-0 shadow-sm buttonRetirarPagamento"
              title="Retirar pagamento"
              aria-label="Retirar pagamento"
              data-idimovel="{{ idImovel }}"
              data-idaluguel="{{ row.idAluguel }}"
              data-idpagamento="{{ row.idPagamento }}"
              data-mesextenso="{{ row.mesReferencia|getMesPorExtenso }}"
              data-mesref="{{ row.mesReferencia }}"
              data-anoref="{{ row.anoReferencia }}"
              data-valor="{{ row.valorCalculado }}"
            >
              <i class="bx bx-checkbox-checked text-success fs-2"></i>
            </button>

          {% else %}
            <button
              class="btn btn-white btn-sm p-0 shadow-sm buttonMarcarComoPago"
              title="Marcar como pago"
              aria-label="Marcar como pago"
              data-idimovel="{{ idImovel }}"
              data-idaluguel="{{ row.idAluguel }}"
              data-mesextenso="{{ row.mesReferencia|getMesPorExtenso }}"
              data-mesref="{{ row.mesReferencia }}"
              data-anoref="{{ row.anoReferencia }}"
              data-valor="{{ row.valorCalculado }}"
            >
              <i class="bx bx-checkbox text-success fs-2"></i>
            </button>
          {% endif %}
        {% endif %}

      </div>
    </div>

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

</div>

<input
  type="file"
  id="inputAnexarReciboAluguel"
  class="d-none"
  accept=".pdf,.jpg,.jpeg,.png"
/>