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

{% block title %}Proprietário{% endblock %}
{% block body %}

<input type="hidden" id="dadosPage" data-modo="{{ modo }}" data-idholding="{{ idHolding }}" >
<style type="text/css">
  .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">
    <div class="demo-inline-spacing">
      {% if is_granted('ROLE_MASTER') %}
        <a href="{{ url('app_holding') }}">
          <button type="button" class="btn btn-primary">
            <span class="icon-base bx bx-chevron-left icon-sm me-1"></span>Voltar
          </button>
        </a>
      {% endif %}
    </div>
  </div>
  <div class="col-lg-4 d-flex justify-content-center align-items-center gap-2 text-center">
    <span class="fw-bold">{{ nome ?? '' }}</span>
  </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">
          <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 == 'visualizar' %}
              <li class="nav-item">
                <button
                  type="button"
                  class="nav-link"
                  role="tab"
                  data-bs-toggle="tab"
                  data-bs-target="#navs-top-documento_holding"
                  aria-controls="navs-top-documento_holding"
                  aria-selected="false">
                  Documentos
                </button>
              </li>
            {% endif %}
          </ul>
          <div class="tab-content p-2 pt-5">

            <div class="tab-pane fade show active" id="navs-top-home" role="tabpanel" >
              <form id="formHolding" novalidate>
                <!-- <div class="d-flex justify-content-between align-items-center">
                  <h5 class="mb-1">Dados do Proprietário</h5>
                </div> -->
                <div class="row">
                  <div class="col-md-8 mb-4">
                    <label class="form-label" for="basic-icon-default-fullname">CNPJ</label>
                    <div class="input-group input-group-merge">
                      <span id="basic-icon-default-fullname2" class="input-group-text"
                        ><i class="icon-base bx bx-paperclip"></i
                      ></span>
                      <input
                        required
                        type="text"
                        class="form-control limitaNumero"
                        id="cnpj"
                        name="cnpj"
                        value="{{ cnpj ?? '' }}"
                        placeholder="CNPJ"
                        aria-label="CNPJ"
                        aria-describedby="basic-icon-default-fullname2" />
                    </div>
                  </div>
                  <div class="col-md-4 mb-6">
                    <label class="form-label" for="basic-icon-default-phone">Telefone</label>
                    <div class="input-group input-group-merge">
                      <span id="basic-icon-default-phone2" class="input-group-text"
                        ><i class="icon-base bx bx-phone"></i
                      ></span>
                      <input
                        type="text"
                        id="telefone"
                        name="telefone"
                        value="{{ telefone ?? '' }}"
                        class="form-control phone-mask limitaNumero"
                        placeholder="Telefone"
                        aria-label=""
                        aria-describedby="basic-icon-default-phone2" />
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-8 mb-4">
                    <label class="form-label" for="basic-icon-default-fullname">Nome</label>
                    <div class="input-group input-group-merge" >
                      <span id="basic-icon-default-fullname2" class="input-group-text"
                        ><i class="icon-base bx bx-buildings"></i
                      ></span>
                      <input
                        required
                        type="text"
                        class="form-control"
                        id="nome"
                        name="nome"
                        value="{{ nome ?? '' }}"
                        placeholder="Nome"
                        aria-label=""
                      />
                    </div>
                  </div> 

                  <div class="col-md-4 mb-6">
                    <label class="form-label" for="basic-icon-default-phone">Inscrição Municipal</label>
                    <div class="input-group input-group-merge">
                      <span id="basic-icon-default-phone2" class="input-group-text"
                        ><i class="icon-base bx bx-clipboard"></i
                      ></span>
                      <input
                        type="text"
                        id="im"
                        name="im"
                        value="{{ im ?? '' }}"
                        class="form-control limitaNumero"
                        placeholder="Inscrição Municipal"
                        aria-label="Inscrição Municipal"
                        aria-describedby="im" />
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-10 mb-6">
                    <label class="form-label" for="basic-icon-default-email">Email</label>
                    <div class="input-group input-group-merge">
                      <span class="input-group-text"><i class="icon-base bx bx-envelope"></i></span>
                      <input
                        type="text"
                        id="email"
                        name="email"
                        value="{{ email ?? '' }}"
                        class="form-control"
                        placeholder="E-mail"
                        aria-label="E-mail"
                        aria-describedby="basic-icon-default-email2" />
                    </div>
                  </div>
                  <div class="col-md-2 mb-6">
                    {% if is_granted('ROLE_MASTER') %}
                      <label class="form-label">Status</label>
                      <div class="input-group">
                        <select class="form-select" name="status">
                          <option value="Ativo" {% if status|default('Ativo') == 'Ativo' %}selected{% endif %}>Ativo</option>
                          <option value="Inativo" {% if status|default('Ativo') == 'Inativo' %}selected{% endif %}>Inativo</option>
                        </select>
                      </div>
                    {% else %}
                      <label class="form-label">Status</label>
                      <div class="input-group input-group-merge">
                        <span class="input-group-text">
                          <i class="bx {{ status == 'Ativo' ? 'bxs-toggle-right text-success' : 'bxs-toggle-left text-muted' }}"></i>
                        </span>
                        <input type="hidden" name="status" value="{% if status|default('Ativo') == 'Ativo' %}Ativo{% else %}Inativo{% endif %}">
                        <span class="form-control">{{ status is defined ? status : '' }}</span>
                      </div>
                    {% endif %}
                  </div>
                </div>

                <div class="d-flex justify-content-between align-items-center">
                  <h5 class="mb-1">Endereço</h5>
                </div>
                <div class="row">
                  <div class="col-md-4 mb-4">
                    <label class="form-label" for="cep">CEP</label>
                    <div class="input-group input-group-merge">
                      <span id="cep-icon" class="input-group-text">
                        <i class="icon-base bx bx-map"></i>
                      </span>
                      <input
                        type="text"
                        class="form-control input-mask-cep tooltipstered limitaNumero"
                        id="cep"
                        name="cep"
                        value="{{ cep ?? '' }}"
                        placeholder="__.___-__"
                        aria-label="CEP"
                        aria-describedby="cep-icon"
                        data-callback="atualizaCep"
                        data-toggle-tooltip="true"
                      />
                    </div>
                  </div>

                  <div class="col-md-8 mb-4">
                    <label class="form-label" for="rua">Rua</label>
                    <div class="input-group input-group-merge">
                      <span id="rua-icon" class="input-group-text">
                        <i class="icon-base bx bx-map"></i>
                      </span>
                      <input
                        type="text"
                        class="form-control"
                        id="rua"
                        name="rua"
                        value="{{ rua ?? '' }}"
                        placeholder="Rua"
                        aria-label="Endereço"
                        aria-describedby="rua-icon"
                      />
                    </div>
                  </div>

                  <div class="col-md-1 mb-4">
                    <label class="form-label" for="uf">UF</label>
                    <div class="input-group input-group-merge">
                      <span id="uf-icon" class="input-group-text">
                        <i class="icon-base bx bx-building"></i>
                      </span>
                      <input
                        type="text"
                        class="form-control"
                        id="uf"
                        name="uf"
                        value="{{ uf ?? '' }}"
                        placeholder="UF"
                        aria-label="UF"
                        aria-describedby="uf-icon"
                      />
                    </div>
                  </div>

                  <div class="col-md-3 mb-4">
                    <label class="form-label" for="cidade">Cidade</label>
                    <div class="input-group input-group-merge">
                      <span id="cidade-icon" class="input-group-text">
                        <i class="icon-base bx bx-building"></i>
                      </span>
                      <input
                        type="text"
                        class="form-control"
                        id="cidade"
                        name="cidade"
                        value="{{ cidade ?? '' }}"
                        placeholder="Cidade"
                        aria-label="Cidade"
                        aria-describedby="cidade-icon"
                      />
                    </div>
                  </div>

                  <div class="col-md-3 mb-4">
                    <label class="form-label" for="bairro">Bairro</label>
                    <div class="input-group input-group-merge">
                      <span id="bairro-icon" class="input-group-text">
                        <i class="icon-base bx bx-map-pin"></i>
                      </span>
                      <input
                        type="text"
                        class="form-control"
                        id="bairro"
                        name="bairro"
                        value="{{ bairro ?? '' }}"
                        placeholder="Bairro"
                        aria-label="Bairro"
                        aria-describedby="bairro-icon"
                      />
                    </div>
                  </div>

                  <div class="col-md-2 mb-4">
                    <label class="form-label" for="numero">Número</label>
                    <div class="input-group input-group-merge">
                      <span id="numero-icon" class="input-group-text">
                        <i class="icon-base bx bx-hash"></i>
                      </span>
                      <input
                        type="text"
                        class="form-control"
                        id="numero"
                        name="numero"
                        value="{{ numero ?? '' }}"
                        placeholder="Número"
                        aria-label="Número"
                        aria-describedby="numero-icon"
                      />
                    </div>
                  </div>

                  <div class="col-md-3 mb-4">
                    <label class="form-label" for="complemento">Complemento</label>
                    <div class="input-group input-group-merge">
                      <span id="complemento-icon" class="input-group-text">
                        <i class="icon-base bx bx-note"></i>
                      </span>
                      <input
                        type="text"
                        class="form-control"
                        id="complemento"
                        name="complemento"
                        value="{{ complemento ?? '' }}"
                        placeholder="Complemento"
                        aria-label="Complemento"
                        aria-describedby="complemento-icon"
                      />
                    </div>
                  </div>
                </div>

                <button type="submit" class="btn btn-primary float-end mt-2" data-modo="{{ modo }}" data-idholding="{{ idHolding }}" >Salvar</button>

              </form>
            </div>

            <div class="tab-pane fade" id="navs-top-documento_holding" role="tabpanel">

              {% include 'componentes/documentos.html.twig' with { documentos: documentos, id: idHolding, tela: 'holding' } %}

            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

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

{% endblock %}