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

{% block title %}Proprietário{% 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="{{ path('app_holding_form_adicionar') }}">
	    <button type="button" class="btn btn-primary">
	      <span class="icon-base bx bx-plus icon-sm me-2"></span>Adicionar Proprietário
	    </button>
	</a>
  </div>
</div>
<div class="tabela-container container-fluid px-2">
  <div class="row my-3">
    <div class="col-12">
      <input
        type="text"
        id="searchInput2"
        class="form-control form-control-md"
        placeholder="🔍 Pesquisar por nome, CNPJ ou telefone..." />
    </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="cardContainer2" class="row gy-3">
    {% for row in lista %}
      <div class="col-12 card-item" data-search="{{ row.nome }} {{ row.cnpj }} {{ row.telefone }} {{ row.status }}">
        <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">
                    {{ row.nome }}
                  </h6>
                  <span style="font-size: 8px; color: #777;">●</span>
                  {% if row.status == 'Ativo' %}
                    <span class="badge bg-success d-inline-flex align-items-center gap-1 px-2 py-1" style="font-size: 0.75rem;">
                      <i class="bx bxs-toggle-right"></i> Ativo
                    </span>
                  {% elseif row.status == 'Inativo' %}
                    <span class="badge bg-danger d-inline-flex align-items-center gap-1 px-2 py-1" style="font-size: 0.75rem;">
                      <i class="bx bxs-toggle-left"></i> Inativo
                    </span>
                  {% else %}
                    <span class="badge bg-secondary d-inline-flex align-items-center gap-1 px-2 py-1" style="font-size: 0.75rem;">
                      <i class="bx bx-question-mark"></i> {{ row.status ?: 'Desconhecido' }}
                    </span>
                  {% endif %}
                </div>
                <p class="card-text text-muted mb-1 d-flex align-items-center gap-1">
                  <i class="bx bx-phone"></i> {{ row.telefone|formataTelefone }}
                </p>
                <p class="card-text text-muted d-flex align-items-center gap-1">
                  <i class="bx bx-id-card"></i> {{ row.cnpj|formataCNPJ }}
                </p>
              </div>

              <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_holding_form_visualizar', {'idHolding': row.idHolding}) }}">
                        <i class="bx bx-show text-primary me-1"></i> Visualizar
                      </a>
                    </li>
                    <li>
                      {% if row.status == 'Ativo' %}
                        <a href="#" class="dropdown-item d-flex align-items-center gap-1 alterarStatusHolding"
                           data-idholding="{{ row.idHolding }}"
                           data-nomeholding="{{ row.nome }}"
                           data-status="Inativo">
                          <i class="bx bxs-toggle-left text-danger"></i> Inativar
                        </a>
                      {% else %}
                        <a href="#" class="dropdown-item d-flex align-items-center gap-1 alterarStatusHolding"
                           data-idholding="{{ row.idHolding }}"
                           data-nomeholding="{{ row.nome }}"
                           data-status="Ativo">
                          <i class="bx bxs-toggle-right text-success"></i> Ativar
                        </a>
                      {% endif %}
                    </li>
                  </ul>
                </div>
              </div>

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

  <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">
        </ul>
      </nav>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/holding/Holding.js') }}"></script>
<script type="text/javascript">

  $(document).ready(function() {

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

</script>
{% endblock %}