{% extends "base.html" %}
{% block head %}
  {{ super() }}
  
  <link
      rel="stylesheet"
      href="/assets/extensions/choices.js/public/assets/styles/choices.css"
    />
{% endblock %}
{% block content %}
<section class="user">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-body">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="/users">Gebruikers</a></li>
              <li class="breadcrumb-item active" aria-current="page">
                {{ user.get_name() }}
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
        <div class="card ">
          <div class="card-content">
            <div class="card-body">
              <div class="row">
                <div class="col-3">
                  <div class="">
                    <img src="{{ user.get_gravatar() }}" alt="Avatar" style="width: 100%;" />
                  </div>
                </div>
                <div class="col">
                  <form id="user-form" class="form">
                    <h6>Naam</h6>
                    <h4 class="card-title" id="user-name">{{ user.get_name() }}</h4>
                    <input
                          type="text"
                          class="form-control"
                          id="input-name"
                          value="{{ user.get_name() }}"
                          style="display: none;"
                          name="input-name"
                        />
                    <hr>
                    <p class="card-text">
                      <h6>E-mailadres</h6>
                      <span id="user-email">{{ user.get_email() }}</span>
                      <!-- <input
                          type="text"
                          class="form-control"
                          id="input-name"
                          value="{{ user.get_name() }}"
                          style="display: none;"
                        /> -->
                      <input
                          type="text"
                          class="form-control"
                          id="input-email"
                          value="{{ user.get_email() }}"
                          style="display: none;"
                          name="input-email"
                        />
                      <hr class="w-25 m-top-3 m-bottom-3">

                      <h6>Rollen</h6>
                      <span id="user-roles">{{ ", ".join(user.get_roles(as_name=True)) }}</span>
                      <hr class="w-25 m-top-3 m-bottom-3">
                      <select
                        class="choices form-select multiple-remove"
                        multiple="multiple"
                        id="input-roles"
                        style="display: none;"
                        name="input-roles"
                      >
                      {% for role in Role.get_all_roles() %}
                        <option value="{{ role.get_id() }}" {{ "selected" if role.get_name() in user.get_roles(as_name=True) else "" }}>{{ role.get_name() }}</option>
                      {% endfor %}
                      </select>

                      <h6>Groepen</h6>
                      <!-- {{ user.get_groups() }} -->
                      <span id="user-groups">{{ ", ".join(user.get_groups(sort_by_name=True, as_name=True)) }}</span>
                      <hr class="w-25 m-top-3 m-bottom-3">
                      <select
                        class="choices form-select multiple-remove"
                        multiple="multiple"
                        id="input-groups"
                        style="display: none;"
                        name="input-groups"
                      >
                      {% for group in Group.get_all_groups() %}
                        <option value="{{ group.get_id() }}" {{ "selected" if group.get_name() in user.get_groups(as_name=True) else "" }}>{{ group.get_name() }}</option>
                      {% endfor %}
                      </select>

                      <button class="btn btn-light-primary">Wachtwoord wijzigen</button>
                      <hr class="w-25 m-top-3 m-bottom-3">

                    </p>
                  </form>
                  
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer d-flex justify-content-between">
            <button class="btn btn-light-danger">Verwijderen</button>
            <div>
              <button class="btn btn-light-danger" id="button-cancel" style="display: none;">Annuleren</button>
              <button class="btn btn-light-success" id="button-save" style="display: none;">Opslaan</button>
              <button class="btn btn-light-primary" id="button-edit">Wijzigen</button>
            </div>
          </div>
        </div>
    </div>
</section>

<script src="/assets/extensions/choices.js/public/assets/scripts/choices.js"></script>
<script src="/assets/static/js/pages/form-element-select.js"></script>

<script>
var prevVals;
$(".choices").hide();

let choices = document.querySelectorAll(".choices")
let initChoice
for (let i = 0; i < choices.length; i++) {
  if (choices[i].classList.contains("multiple-remove")) {
    initChoice = new Choices(choices[i], {
      delimiter: ",",
      editItems: true,
      maxItemCount: -1,
      removeItemButton: true,
    })
  } else {
    initChoice = new Choices(choices[i])
  }
}

function toggleFormVisibility() {
  $("#input-name").toggle();
  $("#input-email").toggle();
  $(".choices").toggle();
  
  $("#button-cancel").toggle();
  $("#button-save").toggle();

  $("#user-name").toggle();
  $("#user-email").toggle();
  $("#user-roles").toggle();
  $("#user-groups").toggle();

  $("#button-edit").toggle();
}


function saveValues() {

}

function cacheValues() {
  prevVals = {
    'name': $("#input-name").val(),
    'email': $("#input-email").val(),
    'roles': $("#input-roles").val(),
    'groups': $("#input-groups").val()
  }
}

function resetValues() {
  $("#input-name").val(prevVals['name']),
  $("#input-email").val(prevVals['email']),
  $("#input-roles").val(prevVals['roles']),
  $("#input-groups").val(prevVals['groups'])
}

$("#button-edit").click(function(){
  cacheValues();
  toggleFormVisibility();
});

$("#button-cancel").click(function(){
  toggleFormVisibility();
  resetValues()
});

$("#button-save").click(function(){
  //console.log(JSON.stringify($("#user-form").serialize()))
  $.ajax({
    url: "/user-update",
    type: "POST",
    //dataType: "json",
    //contentType: "application/json",
    data: $("#user-form").serialize() + "&id={{ user.get_id() }}",
    success: function(data) {
      console.log(data)
    }
  });
    /*$.post({url: "/user-update"}, 
    {
      'id': {{ user.get_id() }},
      'name': $("#input-name").val(),
      'email': $("#input-email").val(),
      'roles': $("#input-roles").val(),
      'groups': $("#input-groups").val(),
    }, function(data, status) {
      console.log(data);
    })
  } catch (err) {
    console.error(`Error: ${err}`);
    return;
  }*/

  toggleFormVisibility();
  //location.reload();
});
</script>


  
{% endblock %}