{% extends 'layout.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block content %}

{% if profile %}
<div class="mx-1 my-2">
  <h3 class="p-2" style="background-color:#212529;color:white;">PROFILE DETAILS...</h3>
  <div class="row">
    <div class="col-sm-12 col-lg-3 mobile__hidden">
        <img src="{% static 'assets/img/avatar.jpg' %}" alt="avatar" width="100%"/>
    </div>
    <div class="col-sm-12 col-lg-9">
      <p class="mb-0">USERNAME : <strong>{{user.username}}</strong></p>
      <p class="mb-0">FIRST NAME : <strong>{{user.first_name}}</strong></p>
      <p class="mb-0">LAST NAME : <strong>{{user.last_name}}</strong></p>
      <p class="mb-0">EMAIL : <strong>{{user.email}}</strong></p>
      <p class="mb-0">ROLE : <strong>{{profile.role}}</strong></p>
      <p class="mb-0"><small>Created <strong>{{profile.datetime_created}}</strong></small></p>
    </div>
  </div>

<hr>
<a href="/" class="btn" style="background-color: #0c031a;color:white;">BACK</a>
<!--button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">UPDATE PROFILE</button-->
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#changePasswordModal">CHANGE PASSWORD</button>
{% if profile.role == 'SUPERADMIN' %}
  <a href="/register/" class="btn btn-secondary">REGISTER USER</a>
  <a href="/admin" class="btn btn-outline-dark">ADMIN</a>
{% endif %}
</div>
<!--MODAL STARTS-->
<!-- Modal -->
<div class="modal fade mt-5" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header" style="background-color: #0c031a;color:white;">
          <h1 class="modal-title fs-5" id="exampleModalLabel">UPDATE PROFILE..</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="">
                <form method="post" action="" id="formPage">
                    {% csrf_token %}
                            {{form|crispy}}
                            <input type="hidden" value="{{profile.id}}" name="profileID">
                            
                        <button type="button" class="btn btn-primary mt-3" data-bs-dismiss="modal">CANCEL</button>
                        <button type="submit" class="btn mt-3" id="submitBtn" style="background-color: #0c031a;color:white;">UPDATE</button>
                    </form>
                </div>
        </div>
        <div class="modal-footer" style="background-color: #0c031a;color:white;">
          <p>Update user Profile</p>
        </div>
      </div>
    </div>
  </div>
  
<!--MODAL ENDS-->

<!--CHANGE PASSWORD MODAL STARTS-->
<!--MODAL STARTS-->
<!-- Modal -->
<div class="modal fade mt-5" id="changePasswordModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="background-color: #0c031a;color:white;">
        <h1 class="modal-title fs-5" id="changePasswordModalLabel">CHANGE PASSWORD..</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <div class="">
              <form method="post" action="/accounts/change_password/{{profile.id}}" id="changePasswordModalPage">
                  {% csrf_token %}
                          
                  <div class="mb-3">
                    <label for="id_fname" class="form-label requiredField">PASSWORD*</label>
                    <input type="text" name="password1" maxlength="25" class="textinput textInput form-control" required="">
                  </div>

                  <div class="mb-3">
                    <label for="id_fname" class="form-label requiredField">PASSWORD*</label>
                    <input type="text" name="password2" maxlength="25" class="textinput textInput form-control" required="">
                  </div>



                          <input type="hidden" value="{{profile.id}}" name="profileID">
                          
                      <button type="button" class="btn btn-primary mt-3" data-bs-dismiss="modal">CANCEL</button>
                      <button type="submit" class="btn mt-3" id="changePasswordModalPagesubmitBtn" style="background-color: #0c031a;color:white;">UPDATE PASSWORD...</button>
                  </form>
              </div>
      </div>
      <div class="modal-footer" style="background-color: #0c031a;color:white;">
        <p>Update user Password</p>
      </div>
    </div>
  </div>
</div>

<!--MODAL ENDS-->
<!--CHANGE PASSWORD MODAL ENDS-->
{% else %}
<h3>NO PROFILE FOUND...</h3>
</div>
{% endif %}

    <script>
        document.getElementById("formPage").onsubmit = function() {
                    document.getElementById("submitBtn").disabled = true;
                    document.getElementById("submitBtn").innerText = 'COMPLETING REGISTRATION...';
                }
    </script>

<script>
  document.getElementById("changePasswordModalPage").onsubmit = function() {
              document.getElementById("changePasswordModalPagesubmitBtn").disabled = true;
              document.getElementById("changePasswordModalPagesubmitBtn").innerText = 'UPDATING PASSWORD...';
          }
</script>

    <script>
            $(document).ready(function(){
                var labels = document.getElementsByTagName('label');
                Array.from(labels).forEach(element => {element.innerText = element.innerText.toUpperCase() });
                $('#div_id_fname>label').text('FIRST NAME*');
                $('#div_id_lname>label').text('LAST NAME*');
            });
    </script>
{% endblock %}