{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">
      <div class="media">
        <img class="img-profile " width="17%" src="{{ prof_user.profile.get_photo_url }}">
        <div class="media-body col-5">
          <h2 class="account-heading">Profil von {{ prof_user.first_name }} {{ prof_user.last_name }}</h2>
          <hr>
          <div class="row mt-2">
                  <div class="col-md-6">
                      <h6><b>Name</b></h6>
                      <p>
                          {{ prof_user.first_name}} {{ prof_user.last_name }}
                      </p>
                      <h6><b>E-Mail</b></h6>
                      <p>
                         {{ prof_user.email }}
                      </p>
                      <h6><b>Agenturfunktion</b></h6>
                      <p>
                          {{ prof_user.profile.get_func_display }}
                      </p>                      
                  </div>
                  <div class="col-md-6">
                      <h6><b>Tätigkeit</b></h6>
                      <p>
                          {{ prof_user.profile.compfunc }}
                      </p>
                      <h6><b>Fesetznetz</b></h6>
                      <p>
                          {{ prof_user.profile.phoneland }}
                      </p>
                      <h6><b>Mobil</b></h6>
                      <p>
                          {{ prof_user.profile.phonemobile }}
                      </p>                            
                  </div>
             </div>
          </div>
      </div>
      <!-- Für das Speichern der Bilder enctype -->
      <div class="col-7 mt-5">
      <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <fieldset class="form-group">
          <legend class="border-bottom mb-4">
            Profil bearbeiten
          </legend>
          <!-- FORMS LADEN -->          
          {{ profileform_form|crispy }}
          <button type="button" id="" onclick="javascript:sendPassMail({{prof_user.pk}})" class="btn btn-success">E-Mail mit Link zur Passworterstellung senden</button>&nbsp;&nbsp;<span class="alert alert-success" id="mailsend" role="alert" style="display: none;">&nbsp;E-Mail gesendet!</span>
        </fieldset>        
        Übergeordneter Mitarbeiter: <span id="ps_act">{{prof_user.profile.parent.first_name}} {{prof_user.profile.parent.last_name}}</span>
         <div class="input-group mb-3">
          <input class="form-control" name="puser" id="puser" list="parentuser" type="text" onkeyup="javascript:checkValueAddParent()">     
          <div class="input-group-append">
          <button type="button" id="addusertouserp" onclick="javascript:addUserParentUser()" class="btn btn-success" disabled>Festlegen</button>
          <button type="button" onclick="javascript:clearSearchfield()" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
        </div> 
          <datalist id="parentuser" nmae="parentuser">
            {% for us in possible_users %}
              <option id="{{us.pk}}" value="{{us.first_name}} {{us.last_name}}"></option>         
            {% endfor %}
          </datalist>
        
    </div>
        <hr>
        <div class="form-group">
          <button type="submit" class="btn btn-success">Speichern</button>&nbsp;
          <a href="{% url 'users-management' %}" class="btn">Abbrechen</a>
        </div>
      </form>
    </div>
    </div>
<script type="text/javascript">
  //Call Function in view to send e-mail with pass-reset-data
  function sendPassMail(id){
    $.ajax(
      {
          type: "GET",
          url: "/dashboard/sendpassmail",
          data:{             
             userid : {{prof_user.pk}}
          },
          success: function( data ) 
          { 
            if(data["message"] == 0){
              $("#mailsend").fadeIn().delay(4000).fadeOut();
            }
        }
       }); 
  }


  tempid = null;
  function clearSearchfield(){
    $("#puser").val("");
    $("#addusertouserp").prop('disabled', true);
  }

  function addUserParentUser(){
    $.ajax(
      {
          type: "GET",
          url: "/dashboard/setuserparent",
          data:{
             userid: tempid,
             action : 'adduserp',
             objectid : {{prof_user.pk}}
          },
          success: function( data ) 
          { 
            console.log(data);
            clearSearchfield();   
            //Add User-Button      
            $("#ps_act").html(data['username_clean']);
            $("#parentuser").empty();
            for (var i in data['remaining_users']) {
              id = data['remaining_users'][i]['id'];
              name = data['remaining_users'][i]['first_name'] + " " + data['remaining_users'][i]['last_name'];
              $("#parentuser").append('<option id="'+id+'" value="'+name+'"></option>');
            }            
        }
       });  
  }

  function checkValueAddParent()
  {
    
    var g = $('#puser').val();
    var id = $('#parentuser').find('option[value="' + g + '"]').attr('id');
    if(id != undefined && id.length > 0){       
      tempid = id;        
      $("#addusertouserp").prop('disabled', false); 
    }
    else{
      tempid = null;        
      $("#addusertouserp").prop('disabled', true);
    }     
  }
</script>
{% endblock content %}