{% extends '@App/partials/base.html.twig' %}

{% block content %}

    <div class="body-wrapper" data-controller="user-profile"
         data-user-profile-update-url-value="{{ path('user_update') }}"
         data-user-profile-password-url-value="{{ path('user_update_password') }}">
        <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">Utilisateur : {{ user.prenom}} {{ user.nom}}</h4>
                </div>
              </div>
            </div>
          </div>

          <div class="card overflow-hidden">
            <div class="card-body p-0">
              <div class="row align-items-center">
                <div class="col-lg-6 mt-n3">
                  <div class="mt-n5">
                    <div class="d-flex align-items-center justify-content-center mb-2">
                      <div class="d-flex align-items-center justify-content-center round-110">
                        <div class="border border-4 border-white d-flex align-items-center justify-content-center rounded-circle overflow-hidden round-100">
                          <img src="" alt="matdash-img" class="w-100 h-100">
                        </div>
                      </div>
                    </div>
                    <div class="text-center">
                      <h5 class="mb-0">{{ user.prenom}} {{ user.nom}}</h5>
                      <p class="mb-0">{{ user.role}}</p>
                    </div>
                  </div>
                </div>
                
              </div>
              <ul class="nav nav-pills user-profile-tab justify-content-end mt-2 bg-primary-subtle rounded-2 rounded-top-0" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link hstack gap-2 rounded-0 fs-12 py-6 active" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="true" tabindex="-1">
                    <i class="ti ti-user-circle fs-5"></i>
                    <span class="d-none d-md-block">Profil</span>
                  </button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link hstack gap-2 rounded-0 fs-12 py-6" id="pills-compte-tab" data-bs-toggle="pill" data-bs-target="#pills-compte" type="button" role="tab" aria-controls="pills-compte" aria-selected="false" tabindex="-1">
                    <i class="ti ti-lock fs-5"></i>
                    <span class="d-none d-md-block">Compte</span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
          <div class="tab-content" id="pills-tabContent">

            <div class="tab-pane fade  active show" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
              <div class="row">
                <div class="col-lg-12">
                  <div class="card">
                    <div class="card-body wizard-content">
                        <form class="form-horizontal r-separator needs-validation"
                              data-controller="form"
                              data-action="submit->user-profile#submitProfile"
                              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" id="prenom" name="prenom" data-field="prenom" value="{{ user.prenom }}" required>
                                    <input type="hidden" class="form-control" id="userid" name="userid" data-field="userid" value="{{ user.id }}">
                                </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" id="nom" name="nom" data-field="nom" value="{{ user.nom }}" 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" name="telephone" data-field="telephone" value="{{ user.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" name="adresse" data-field="adresse" value="{{ user.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" name="codepostal" data-field="codepostal" value="{{ user.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" name="ville" data-field="ville" value="{{ user.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 select2" id="pays" name="pays" data-field="pays">
                                        <option value="">Sélectionnez un pays</option>
                                        <option value="France" {% if user.pays == 'France' %} selected {% endif %}>France</option>
                                        <option value="Suisse" {% if user.pays == 'France' %} selected {% endif %}>Suisse</option>
                                        <option value="Allemagne" {% if user.pays == 'France' %} selected {% endif %}>Allemagne</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <h4 class="card-title mt-2 pb-3">Rôle</h4>
                            </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" name="role" data-field="role" required>
                                        <option value="">Sélectionnez un rôle</option>
                                        {% for role in roles %}
                                          <option value="{{role.id}}" {% if role == user.role %} selected {% endif %}>{{role.nom}}</option>
                                        {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <h4 class="card-title mt-2 pb-3">Permissions personnalisées</h4>
                            </div>
                            <div class="form-group p-3">
                                <div class="row">
                                    <label for="permissions" class="col-sm-3 text-end col-form-label">Permissions</label>
                                    <div class="col-sm-9">
                                        <select id="permissions" class="select2 form-control" name="permissions" data-field="permissions" multiple="multiple">
                                            {% for permission in permissions %}
                                                <option value="{{ permission.id }}" {% if permission.id in userPermissionIds %}selected{% endif %}>
                                                    {{ permission.groupe }} - {{ permission.nom }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                        <small class="text-muted">Ces permissions s'ajoutent a celles du role.</small>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <h4 class="card-title mt-2 pb-3">Société(s)</h4>
                            </div>
                            <div class="form-group p-3">
                                <div class="row">
                                    <label for="sociétés" class="col-sm-3 text-end  col-form-label">Société(s)</label>
                                    <div class="col-sm-9">
                                       <select id="societes" class="select2 form-control" name="societes" data-field="societes" multiple="multiple">
                                        {% for societe in societes %}
                                            <option value="{{societe.id}}" {% if societe in user.societe %}selected{% endif %}>{{societe.nom}}</option>
                                        {% endfor %}
                                      </select>
                                    </div>
                                </div>
                            </div>
                        
                            <div class="p-3">
                                <div class="form-group text-end">
                                    <button type="submit" class="btn btn-primary" id="btnEnregistrer">
                                        Enregistrer
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                  
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="pills-compte" role="tabpanel" aria-labelledby="pills-compte-tab" tabindex="0">
              <div class="row">
                <div class="col-lg-12">
                  <div class="card">
                    <div class="card-body wizard-content">
                        <form class="form-horizontal r-separator needs-validation"
                              data-controller="form"
                              data-action="submit->user-profile#submitPassword"
                              novalidate>
                            <div class="card-body">
                                <h5>Compte</h5>
                            </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" value="{{ user.email }}" disabled>
                                    <input type="hidden" class="form-control" id="userid_password" name="userid" data-field="userid" value="{{ user.id }}">
                                </div>
                                </div>
                            </div>
                            <div class="form-group p-3 pt-0">
                                <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" name="motdepasse" data-field="motdepasse" data-user-profile-target="password" data-action="input->user-profile#validatePassword" required>
                                        <button class="btn bg-primary-subtle text-primary" type="button" data-action="click->user-profile#togglePassword" data-user-profile-target="togglePassword"> <iconify-icon icon="solar:eye-outline" class="fs-7"></iconify-icon></button>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="form-group p-3 pt-0">
                                <div class="row mt-3">
                                <label for="confirmationmotdepasse" class="col-sm-3 text-end  col-form-label">Confirmation du mot de passe</label>
                                <div class="col-sm-9">
                                    <div class="input-group mb-3">
                                        <input type="password" class="form-control" id="confirmationmotdepasse" data-user-profile-target="passwordConfirm" data-action="input->user-profile#validatePassword" required>
                                        <button class="btn bg-primary-subtle text-primary" type="button" data-action="click->user-profile#togglePasswordConfirm" data-user-profile-target="togglePasswordConfirm"> <iconify-icon icon="solar:eye-outline" class="fs-7"></iconify-icon></button>
                                    </div>
                                    <div class="invalid-feedback">Ces deux mots de passe ne sont pas identiques</div>
                                </div>
                                </div>
                            </div>

                            <div class="p-3">
                                <div class="form-group text-end">
                                    <button type="submit" class="btn btn-primary" id="btnEnregistrerCompte" data-user-profile-target="passwordSubmit" disabled>
                                        Enregistrer
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                  
                </div>
              </div>
            </div>

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

{% endblock %}