{% include 'partials/header.html.twig' %}

<link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">

<script src="{{ asset('assets/libs/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>

      <div class="body-wrapper">
        <div class="container-fluid">

          <div class="card card-body py-3">
              <div class="row align-items-center">
                  <div class="col-12">
                      <div class="d-sm-flex align-items-center justify-space-between">
                          <h4 class="mb-4 mb-sm-0 card-title">Nouveau membre</h4>
                      </div>
                  </div>
              </div>
          </div>

          <div class="card">
            <div class="card-body wizard-content">
              <form id="addUser" class="form-horizontal r-separator needs-validation" novalidate="">
              <div class="card-body">
                <h5>Informations générales</h5>
              </div>
             <div class="form-group p-3 mb-3">
                <div class="row">
                  <label for="prenom" class="col-sm-3 text-end  col-form-label">Prénom</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" data-field="prenom" id="prenom" required>
                  </div>
                </div>
              </div>
              <div class="form-group mb-3 p-3 pt-0">
                <div class="row">
                  <label for="nom" class="col-sm-3 text-end  col-form-label">Nom</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" data-field="nom" id="nom" required>
                  </div>
                </div>
              </div>
              <div class="form-group mb-3 p-3 pt-0">
                <div class="row">
                  <label for="email" class="col-sm-3 text-end  col-form-label">Email</label>
                  <div class="col-sm-9">
                    <input type="email" class="form-control" id="email" data-field="email" required>
                  </div>
                </div>
              </div>
              <div class="form-group p-3 pt-0">
                <div class="row">
                  <label for="telephone" class="col-sm-3 text-end  col-form-label">Téléphone</label>
                  <div class="col-sm-9">
                    <input type="number" class="form-control" id="telephone" data-field="telephone">
                  </div>
                </div>
              </div>

              <div class="card-body text-bg-light">
                <h4 class="card-title mt-2 pb-3">Adresse</h4>
              </div>
             <div class="form-group p-3 text-bg-light">
                <div class="row">
                  <label for="adresse" class="col-sm-3 text-end  col-form-label">Adresse</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="adresse" data-field="adresse">
                  </div>
                </div>
              </div>
              <div class="form-group p-3 text-bg-light">
                <div class="row">
                  <label for="codepostal" class="col-sm-3 text-end  col-form-label">Code postal</label>
                  <div class="col-sm-9">
                    <input type="number" class="form-control" id="codepostal" data-field="codepostal">
                  </div>
                </div>
              </div>
              <div class="form-group p-3 text-bg-light">
                <div class="row">
                  <label for="ville" class="col-sm-3 text-end  col-form-label">Ville</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="ville" data-field="ville">
                  </div>
                </div>
              </div>
              <div class="form-group p-3 text-bg-light">
                <div class="row">
                  <label for="pays" class="col-sm-3 text-end  col-form-label">Pays</label>
                  <div class="col-sm-9">
                    <select class="form-select" id="pays" data-field="pays">
                      <option>Sélectionnez un pays</option>
                      <option>France</option>
                      <option>Suisse</option>
                      <option>Allemagne</option>
                    </select>
                  </div>
                </div>
              </div>
              
              <div class="card-body">
                <h5>Compte</h5>
              </div>
              <div class="form-group p-3">
                <div class="row">
                  <label for="role" class="col-sm-3 text-end  col-form-label">Rôle</label>
                  <div class="col-sm-9">
                    <select class="form-select select2" id="role" data-field="role" required>
                      <option value="">Sélectionnez un rôle</option>
                      {% for role in roles %}
                        <option value="{{role.id}}">{{role.nom}}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
              </div>

              <div class="form-group p-3 pt-0 mt-3">
                <div class="row">
                  <label for="motdepasse" class="col-sm-3 text-end  col-form-label">Mot de passe</label>
                  <div class="col-sm-9">
                    <div class="input-group mb-3">
                      <input type="password" class="form-control" id="motdepasse" data-field="motdepasse" required>
                      <button class="btn bg-primary-subtle text-primary " type="button" id="btnToggle"> <iconify-icon icon="solar:eye-outline" class="fs-7"></iconify-icon></button>
                      <button class="btn bg-primary-subtle text-primary " type="button" id="btnGenererMotDePasse">Générer!</button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="p-3">
                <div class="form-group text-end">
                  <button type="button" class="btn btn-primary" data-form="addUser" data-btn="enregistrer" data-route="{{ path('staff_add') }}" data-modal="null">
                    Enregistrer
                  </button>
                  <a href="{{ path('staff_index')}}"class="btn bg-danger-subtle text-danger ms-6" id="btnAnnuler">
                    Annuler
                  </a>
                </div>
              </div>
            </form>
            </div>
          </div>

        </div>
      </div>

  <script>
  document.addEventListener('DOMContentLoaded', () => {
    // Initialisation pour les éléments déjà dans le DOM
    $('.select2').select2();
    });

    function handleColorTheme(e) {
      document.documentElement.setAttribute("data-color-theme", e);
    }
  </script>
</div>

<script>
    const profilRoute = "{{ path('staff_profil', { 'id': 'ID_PLACEHOLDER' }) }}";
    const userAdd = "{{ path('staff_add') }}";
</script>

<script src="{{ asset('assets/js/user/user_new.js') }}"></script>

{% include 'partials/footer.html.twig' %}