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


{% block body %}
<style>
    /* Estilo para validação de input-group, se necessário */
    .input-group .input-group-text.is-invalid {
        border-color: #dc3545 !important;
        color: #dc3545 !important;
    }
</style>

<div class="row mb-3">
  <div class="col-12 col-md-4 mb-3">
    <a href="{{ path('app_imovel') }}">
      <button type="button" class="btn btn-primary w-auto">
        <span class="icon-base bx bx-chevron-left icon-sm me-1"></span> Voltar
      </button>
    </a>
  </div>
  <div class="col-lg-4 d-flex justify-content-center align-items-center gap-2 text-center">
    <span class="fw-bold">{{ nome ?? '' }}</span>
    {% if status is defined and status == 'Vendido' %}

      <span style="font-size: 8px; color: #777;">●</span>
      <span class="d-inline-flex align-items-center px-3 py-1 rounded-pill bg-danger text-white fw-semibold" style="font-size: 0.85rem;">
        <i class="bx bxs-tag me-1"></i> {{ status }}
      </span>

    {% else %}

      {% if situacao is defined and situacao %}
        <span style="font-size: 8px; color: #777;">●</span>

        {% if situacao == 'Vago' %}
          <span class="d-inline-flex align-items-center px-3 py-1 rounded-pill bg-success text-white fw-semibold" style="font-size: 0.85rem;">
            <i class="bx bx-door-open me-1"></i> {{ situacao }}
          </span>
        {% elseif situacao == 'Locado' %}
          <span class="d-inline-flex align-items-center px-3 py-1 rounded-pill bg-danger text-white fw-semibold" style="font-size: 0.85rem;">
            <i class="bx bx-lock-alt me-1"></i> {{ situacao }}
          </span>
        {% endif %}
      {% endif %}

    {% endif %}


  </div>
  <div class="col-lg-4">
  </div>
</div>

<div class="col-xl">
  <div class="card">
    <div class="card-body">
      <div class="col-xl-12">
        <div class="nav-align-top nav-tabs-shadow">
          <div class="">
            <ul class="nav nav-tabs flex-nowrap" role="tablist" style="overflow-x: auto; overflow-y: visible; white-space: nowrap; padding-top: 10px;">
            <!-- <ul class="nav nav-tabs" role="tablist"> -->
              <li class="nav-item">
                <button
                  type="button"
                  class="nav-link active"
                  role="tab"
                  data-bs-toggle="tab"
                  data-bs-target="#navs-top-home"
                  aria-controls="navs-top-home"
                  aria-selected="true">
                  Dados
                </button>
              </li>

              {% if modo == 'gerenciar' %}
                <li class="nav-item">
                  <button
                    type="button"
                    class="nav-link"
                    role="tab"
                    data-bs-toggle="tab"
                    data-bs-target="#navs-top-documento_imovel"
                    aria-controls="navs-top-documento_imovel"
                    aria-selected="false">
                    Documentos
                  </button>
                </li>

                <li class="nav-item">
                  <button
                    type="button"
                    class="nav-link position-relative"
                    role="tab"
                    data-bs-toggle="tab"
                    data-bs-target="#navs-top-aluguel"
                    aria-controls="navs-top-aluguel"
                    aria-selected="false">
                    Aluguel

                    {% if (pagamentoAtrasado|default(0)) > 0 %}
                      <span class="badgeButtonDireita" title="Meses em atraso">
                        {{ pagamentoAtrasado }}
                      </span>
                    {% endif %}
                  </button>
                </li>

                <li class="nav-item">
                  <button
                    type="button"
                    class="nav-link"
                    role="tab"
                    data-bs-toggle="tab"
                    data-bs-target="#navs-top-historico"
                    aria-controls="navs-top-historico"
                    aria-selected="false">
                    Histórico de Aluguel
                  </button>
                </li>

                <li class="nav-item">
                  <button
                    type="button"
                    class="nav-link"
                    role="tab"
                    data-bs-toggle="tab"
                    data-bs-target="#navs-top-foto"
                    aria-controls="navs-top-foto"
                    aria-selected="false">
                    Fotos
                  </button>
                </li>
              {% endif %}

            </ul>
          </div>
          <div class="tab-content p-2 pt-5">

            <div class="tab-pane fade show active" id="navs-top-home" role="tabpanel" >
              {% include 'imovel/tabs/formImovel.html.twig' %}
            </div>

            {% if modo == 'gerenciar' %}
              <div class="tab-pane fade" id="navs-top-documento_imovel" role="tabpanel">
                {% include 'componentes/documentos.html.twig' with { documentos: documentoImovel, id: idImovel, tela: 'imovel' } %}
              </div>

              <div class="tab-pane fade" id="navs-top-aluguel" role="tabpanel">
                {% include 'imovel/tabs/formAluguel.html.twig' %}
              </div>

              <div class="tab-pane fade" id="navs-top-historico" role="tabpanel">
                {% include 'imovel/tabs/historicoAluguel.html.twig' %}
              </div>

              <div class="tab-pane fade" id="navs-top-foto" role="tabpanel">
                {% include 'imovel/tabs/fotosImovel.html.twig' %}
              </div>
            {% endif %}

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}

<script src="{{ asset('js/componentes/FormValidation.js') }}"></script>
<script src="{{ asset('js/imovel/Imovel.js') }}"></script>
<script src="{{ asset('js/aluguel/Aluguel.js') }}"></script>
<script src="{{ asset('js/foto/Foto.js') }}"></script>
<script type="text/javascript">
  
</script>

{% endblock %}