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

{% block title %}Formulário de Usuário{% endblock %}

{% block body %}
<input type="hidden" id="dadosPage" data-modo="{{ modo }}" data-idusuario="{{ idUsuario ?? '' }}" >

<style>
  .input-group .input-group-text.is-invalid {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
  }
</style>

<div class="col-lg-4 mb-3">
  <div class="demo-inline-spacing">
    {% if is_granted('ROLE_MASTER') %}
      <a href="{{ path('app_usuario') }}">
        <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-xl">
  <div class="card">
    <div class="card-body">
      <form id="formUsuario" novalidate>
        <div class="d-flex justify-content-between align-items-center">
          <h5 class="mb-1">Dados do Usuário</h5>
        </div>

        <hr class="my-3">

        <div class="row">
          <div class="col-md-12 mb-4">
            <label class="form-label">Nome</label>
            <div class="input-group input-group-merge">
              <span class="input-group-text"><i class="icon-base bx bx-user"></i></span>
              <input type="text" class="form-control" name="nome" value="{{ nome|default('') }}" placeholder="Nome completo" required />
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6 mb-4">
            <label class="form-label">E-mail</label>
            <div class="input-group input-group-merge">
              <span class="input-group-text"><i class="icon-base bx bx-envelope"></i></span>
              <input type="email" class="form-control" name="email" value="{{ email|default('') }}" placeholder="exemplo@email.com" required />
            </div>
          </div>

          {% if is_granted('ROLE_MASTER') %}
             <div class="col-md-6 mb-4">
                <label for="roles" class="form-label">Acesso</label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="bx bxs-shield "></i></span>
                    <select id="roles" name="roles" class="form-select">
                        <option value="ROLE_ADMIN" {% if 'ROLE_ADMIN' in roles|default([]) %}selected{% endif %}>Administrador</option>
                        <option value="ROLE_MASTER" {% if 'ROLE_MASTER' in roles|default([]) %}selected{% endif %}>Master</option>
                    </select>
                </div>
              </div>
            {% else %}
              <div class="col-md-6 mb-4">
                <label for="roles" class="form-label">Acesso</label>
                <div class="input-group input-group-merge">
                  <span class="input-group-text"><i class="bx bxs-shield "></i></span>
                  <input type="hidden" name="roles" value=" {% if 'ROLE_MASTER' in roles|default([]) %}Master{% else %}Administrador{% endif %}">
                  <span class="form-control">Administrador</span>
                </div>
              </div>
            {% endif %}
        </div>

        <div class="row">
          
          {% if is_granted('ROLE_MASTER') %}
            <div class="col-md-10 mb-4">
              <label class="form-label">Proprietário</label>
              <div class="input-group input-group-merge">
                <span class="input-group-text"><i class="icon-base bx bx-building"></i></span>
                <select class="form-select" id="idHolding" name="idHolding" required >
                  <option value="">Selecione</option>
                  {% for row in holdings %}
                    <option value="{{ row.idHolding }}" {% if idHolding is defined and idHolding == row.idHolding %}selected{% endif %}>{{ row.nome }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>

            <div class="col-md-2 mb-4">
              <label class="form-label">Status</label>
              <div class="input-group">
                <!-- <span class="input-group-text">
                  <i class="bx {{ status is defined and status == 'Ativo' ? 'bxs-toggle-right text-success' : 'bxs-toggle-left text-muted' }}"></i>
                </span>     -->          
                <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>
            </div>

          {% else %}
            <div class="col-md-10 mb-4">
              <label class="form-label">Proprietário</label>
              <div class="input-group input-group-merge">
                <span class="input-group-text"><i class="icon-base bx bx-building"></i></span>
                <input type="hidden" name="idHolding" value="{{ app.session.get('idHolding') }}">
                <span class="form-control">{{ holdingAtual }}</span>
              </div>
            </div>

            <div class="col-md-2 mb-4">
              <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>
            </div>
          {% endif %}

        </div>

        <hr class="my-4">
        <h6 class="mb-3 text-muted">Senha</h6>
        {% if modo == 'editar' %}
          <div class="form-text mb-4">Para trocar a senha, defina uma nova senha e a confirme.</div>
        {% endif %}

        <div class="row">
            <div class="col-md-6 mb-4">
                <label class="form-label">Nova Senha</label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="icon-base bx bx-lock-alt"></i></span>
                    <input type="password" class="form-control senha-toggle" name="password" id="password" placeholder="••••••••" autocomplete="new-password" />
                    <span class="input-group-text cursor-pointer toggle-icon"><i class="bx bx-hide"></i></span>
                </div>
            </div>

            <div class="col-md-6 mb-4">
                <label class="form-label">Confirmar Nova Senha</label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="icon-base bx bx-lock-alt"></i></span>
                    <input type="password" class="form-control senha-toggle" id="password_confirm" name="password_confirm" placeholder="••••••••" autocomplete="new-password" />
                    <span class="input-group-text cursor-pointer toggle-icon"><i class="bx bx-hide"></i></span>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary float-end mt-2" data-modo="{{ modo }}" data-idusuario="{{ idUsuario ?? '' }}">Salvar</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}

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

<script>
// Mostrar e ocultar senha
document.querySelectorAll('.toggle-icon').forEach(function (btn) {
  btn.addEventListener('click', function () {
    const input = this.closest('.input-group').querySelector('.senha-toggle');
    const icon = this.querySelector('i');

    if (input.type === 'password') {
      input.type = 'text';
      icon.classList.remove('bx-hide');
      icon.classList.add('bx-show');
    } else {
      input.type = 'password';
      icon.classList.remove('bx-show');
      icon.classList.add('bx-hide');
    }
  });
});

</script>
{% endblock %}