{% extends './base.html' %}
{% load static %}
{% block content %}
<div class="container-fluid py-4">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-xl-11 col-sm-10 col-8 mb-xl-0 mb-4">
              <div class="row">
                <div class="col-md-1 col-3">
                  <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                    <i class="ri-profile-line text-lg opacity-10" aria-hidden="true"></i>
                  </div> 
                </div>
                <div class="col-md-11 col-9" style="display:flex; align-items:center;">
                  <div class="numbers">
                    <h5 class="font-weight-bolder mb-0">Update Profile `{{user}}` :</h5>
                  </div>
                </div>
              </div>
        </div>
        {% comment %} <div class="col-xl-2 col-sm-6 mb-xl-0 mb-4"></div> {% endcomment %}
        {% comment %} <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4"></div> {% endcomment %}
        <div class="col-xl-1 col-sm-2 col-4 mb-xl-0 mb-4">
          <div id="loading"></div>
        </div>
      </div>
      <div class="card mt-4">
          <div class="card-body">
          <div class="table-responsive p-0">
                <div class="modal-body">
                  {% if securityKey == None %}
                  <label for="recipient-name" class="col-form-label">Add Mail Security Key:</label>                           
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <input type="text" class="form-control" name="securityKey" placeholder="Enter Mail Security Key">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                              <button type="button" class="btn bg-gradient-primary" onclick="addSecurity()">Add</button>                          
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    <label for="recipient-name" class="col-form-label">Change Password:</label>                           
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <input type="text" class="form-control" name="password"placeholder="Update Password">
                              </div>
                            </div>
                            <div class="col-sm-4">
                              <div class="form-group">
                                <button type="button" class="btn bg-gradient-primary" onclick="changePass()">Add</button>                          
                              </div>
                            </div>
                          </div>
                    <form action="/uploadSignature/" method="POST" enctype="multipart/form-data">
                      {% csrf_token %}
                      <label for="recipient-name" class="col-form-label">Change Signature:</label>                           
                      <div class="row">
                          <div class="col-sm-4">
                              <div class="form-group">
                                  <input type="file" class="form-control" name="signature" accept="image/*">
                              </div>
                          </div>
                          <div class="col-sm-4">
                              <div class="form-group">
                                <button type="submit" class="btn bg-gradient-primary">Add</button>                          
                              </div>
                          </div>
                      </div>
                      {% if signature != '' %}
                      <div class="row">
                        <div class="col-sm-4">
                          <img src="/media/{{signature}}" class="img-responsive" style="height: 100px;">
                        </div>
                      </div>
                      {% endif %}
                    </form>
                </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    function addSecurity()
    {
      $('#loading').html(`<img src="{% static 'img/loading-gif.gif' %}"style="height:45px;">`);
      var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
      var securityKey = $('[name="securityKey"]').val();
      $.ajax({
        url: "/addSecurity/",
        method:"POST",
        headers: {"X-CSRFToken": csrf_token},
        data:{data:securityKey , csrfmiddlewaretoken: csrf_token},
        success: function(response){
          console.log(response);
          snackbar(response.message)
          $('#loading').html(``);
      }});
    }
    function changePass()
    {
      $('#loading').html(`<img src="{% static 'img/loading-gif.gif' %}"style="height:45px;">`);
      var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
      var password = $('[name="password"]').val();
      $.ajax({
        url: "/changePass/",
        method:"POST",
        headers: {"X-CSRFToken": csrf_token},
        data:{data:password , csrfmiddlewaretoken: csrf_token},
        success: function(response){
          console.log(response);
          $('[name="password"]').val(``);
          snackbar(response.message);
          $('#loading').html(``);
        }
      });
    }
  </script>
  {% endblock content %}