{% extends "base.html.twig" %}

{% block title %}Imóveis{% endblock %}
{% block body %}
<!-- <h5 class="card-title text-primary mb-3 text-center">Holding</h5> -->
<div class="col-lg-4">
  <div class="demo-inline-spacing">
    <a href="{{ url('app_imovel_form_adicionar') }}">
      <button type="button" class="btn btn-primary">
        <span class="icon-base bx bx-plus icon-sm me-2"></span>Adicionar Imóvel
      </button>
    </a>
  </div>
</div>
<div class="tabela-container container-fluid px-2">
  <!-- Campo de busca responsivo -->
  <div class="row my-3">
    <div class="col-12">
      <input
        type="text"
        id="searchInput2"
        class="form-control form-control-md"
        placeholder="🔍 Pesquisar por nome ..." />
    </div>
  </div>

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

 {% set mapaIcones = {
  'Casa': 'bx-home-smile',
  'Loja': 'bx-store',
  'Galpão': 'bx-buildings',
  'Lote': 'bx-landscape',
  'APTO': 'bx-building',
  'Flat': 'bx-hotel',
  'Outro': 'bx-category-alt'
} %}

  <!-- Cards responsivos -->
  <div id="cardContainer2" class="row gy-3">
  {% for row in lista %}
    {% set iconeClasse = mapaIcones[row.tipo] ?? 'bx-category-alt' %}
    <div class="col-12 card-item" data-search="{{ row.nome }} {{ row.tipo }} {{ row.situacao }} ">
      <div class="card shadow-lg border-0 rounded-4">

        {% if (row.pagamentoAtrasado|default(0)) > 0 %}
          <span class="badgeDireita" title="Meses em atraso">
            {{ row.pagamentoAtrasado }}
          </span>
        {% endif %}

        <div class="card-body p-2">
          <div class="d-flex flex-row align-items-center gap-3">

            <div class="flex-shrink-0 ">
              <img src="{{ row.urlS3|default('uploads/fotos/sem-foto.jpg') }}" 
                   class="rounded-circle"
                   style="width: 70px; height: 70px; object-fit: cover;" />
            </div>

            <div class="flex-grow-1">
              <h6 class="mb-1 fw-semibold">{{ row.nome }}</h6>

              <p class="mb-1 text-muted small d-flex align-items-center flex-wrap gap-1">
                <i class="bx {{ iconeClasse }} fs-5"></i>
                <span>{{ row.tipo }}</span>

                <span style="font-size: 8px; color: #777;">●</span>

                  {% if row.status == 'Vendido' %}

                    <span class="badge bg-danger d-inline-flex align-items-center gap-1">
                      <i class="bx bxs-tag"></i> {{ row.status }}
                    </span>

                  {% else %}
                    {% if row.situacao == 'Vago' %}
                      <span class="badge bg-success d-inline-flex align-items-center gap-1">
                        <i class="bx bx-door-open"></i> {{ row.situacao }}
                      </span>
                    {% elseif row.situacao == 'Locado' %}
                      <span class="badge bg-danger d-inline-flex align-items-center gap-1">
                        <i class="bx bx-lock-alt"></i> {{ row.situacao }}
                      </span>
                    {% elseif row.situacao == 'Locado' %}
                      <span class="badge bg-secondary d-inline-flex align-items-center gap-1">
                        <i class="bx bx-question-mark"></i> {{ row.situacao ?: 'Indefinido' }}
                      </span>
                    {% endif %}

                  {% endif %}
                </p>

                {% if row.situacao == 'Locado' %}
                  <p class="mb-1 text-muted small d-flex align-items-center flex-wrap gap-1">
                    {% if row.situacaoPagamento == 'Em dia' %}
                      <span class="badge bg-info d-inline-flex align-items-center gap-1">
                        <i class="bx bx-credit-card"></i> Pagamento em dia
                      </span>
                    {% elseif row.situacaoPagamento == 'Atrasado' %}
                      <span class="badge bg-warning text-dark d-inline-flex align-items-center gap-1">
                        <i class="bx bx-time-five"></i> Pagamento atrasado
                      </span>
                    {% elseif row.situacaoPagamento == 'Pendente' %}
                      <span class="badge bg-light text-dark border d-inline-flex align-items-center gap-1">
                        <i class="bx bx-hourglass"></i> Pagamento pendente
                      </span>
                    {% endif %}
                  </p>
                {% endif %}
            </div>

            <!-- Botão dropdown -->
            <div class="ms-auto">
              <div class="dropdown">
                <button class="btn btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"></button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <a class="dropdown-item d-flex align-items-center gap-1" href="{{ path('app_imovel_gerenciar', {'idImovel': row.idImovel}) }}">
                      <i class="bx bx-cog text-secondary"></i> Gerenciar
                    </a>
                  </li>
                </ul>
              </div>
            </div>

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


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

{% endblock %}

{% block javascripts %}
<script type="text/javascript">

  $(document).ready(function() {

    const tabelaServicos = new TabelaDefault({
          cardContainerId: 'cardContainer2',
          paginationId: 'pagination2',
          searchInputId: 'searchInput2',
          itemsPerPage: 10
      });
  });

</script>
{% endblock %}