{% 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">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 class="col-lg-6 order-lg-1 order-2">
                  <div class="d-flex align-items-center justify-content-around m-4">
                    <div class="text-center">
                      <i class="ti ti-file-description fs-6 d-block mb-2"></i>
                      <h4 class="mb-0 fw-semibold lh-1">938</h4>
                      <p class="mb-0 ">Projets ouverts</p>
                    </div>
                    <div class="text-center">
                      <i class="ti ti-user-circle fs-6 d-block mb-2"></i>
                      <h4 class="mb-0 fw-semibold lh-1">3,586</h4>
                      <p class="mb-0 ">Tâches en cours</p>
                    </div>
                    <div class="text-center">
                      <i class="ti ti-user-check fs-6 d-block mb-2"></i>
                      <h4 class="mb-0 fw-semibold lh-1">2,659</h4>
                      <p class="mb-0 ">Tickets en cours</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">
                            <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" value="{{ user.prenom }}">
                                    <input type="hidden" class="form-control" id="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" value="{{ user.nom }}">
                                </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" 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" 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" 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" 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">
                                        <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">
                                        <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">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" 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 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">
                            <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>
                                </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">
                                        <button class="btn bg-primary-subtle text-primary " type="button" id="btnToggle"> <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">
                                        <button class="btn bg-primary-subtle text-primary " type="button" id="btnToggleConfirm"> <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 class="btn btn-primary" id="btnEnregistrerCompte" disabled>
                                        Enregistrer
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                  
                </div>
              </div>
            </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);
    }

    const userUpdateRoute = "{{ path('user_update') }}";
    const userUpdatePasswordRoute = "{{ path('user_update_password') }}";

</script>

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

</div>

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