{% extends 'partials/base.html' %}
{% load static %}
{% block extra_css %}
{% load crispy_forms_tags %}
{% endblock extra_css %}
{% block content %}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <form
          action=""
          id="user_form"
          method="POST"
          class="needs-validation"
          enctype="multipart/form-data"
          novalidate
          autocomplete="off"
        >
          {% csrf_token %} 
          {% include 'menu/messages.html' %}
          {% block messageblock %}
          {% endblock %}
          <div class="row">
            <div class="offset-md-4 col-md-4 mb-3">
                <div class="mb-3">
                    <label class="form-label" for="oldpassword">Old Password <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input id="oldpassword" type="password" class="form-control" name="oldpassword" placeholder="Old Password">
                        <button id="oldpassword1-toggle" class="btn btn-outline-secondary" type="button">
                            <i id="oldpassword-icon" class="fa fa-eye fs-5"></i>
                        </button>
                    </div>
                    <div class="error-message" id="oldpassword-error"></div>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="newpassword1">New Password <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input id="newpassword1" type="password" class="form-control" name="newpassword1" placeholder="New Password">
                        <button id="newpassword1-toggle" class="btn btn-outline-secondary" type="button">
                            <i id="newpassword1-icon" class="fa fa-eye fs-5"></i>
                        </button>
                    </div>
                    <div class="error-message" id="newpassword1-error"></div>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="newpassword2">Confirm New Password <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input id="newpassword2" type="password" class="form-control" name="newpassword2" placeholder="Confirm New Password">
                        <button id="newpassword2-toggle" class="btn btn-outline-secondary" type="button">
                            <i id="newpassword2-icon" class="fa fa-eye fs-5"></i>
                        </button>
                    </div>
                    <div class="error-message" id="newpassword2-error"></div>
                </div>
            </div>

              
            <div class="text-center">
                <button class="btn btn-primary w-md waves-effect waves-light" type="submit">Change Password</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- end col -->
</div>
{% endblock content %}

{% block extra_javascript %}
<script>
$(document).ready(function() {
    
    // Make an AJAX request to fetch the company data
    $.ajax({
        url: '/authentication/get_company_data',  // Replace with the actual URL to fetch the company data
        method: 'GET',
        success: function(response) {
            // Assuming the response is a JSON object containing the company data
            var companyData = response;
            // Update the image source using the company_data
            var companyLogo = companyData['company_logo']
            var logoSrc = "{{ MEDIA_URL }}" + companyLogo;
            $('.small-logo').attr('src', logoSrc);
            $('.big-logo').attr('src', logoSrc);
        },
        error: function(xhr, status, error) {
            // Handle error if the AJAX request fails
            console.log(error);
        }
    });

 function togglePasswordVisibility(inputId, iconId) {
    var passwordInput = document.getElementById(inputId);
    var passwordIcon = document.getElementById(iconId);

    if (passwordInput.type === "password") {
        passwordInput.type = "text";
        passwordIcon.classList.remove("fa-eye");
        passwordIcon.classList.add("fa-eye-slash");
    } else {
        passwordInput.type = "password";
        passwordIcon.classList.remove("fa-eye-slash");
        passwordIcon.classList.add("fa-eye");
    }
}

// Toggle password visibility when the eye icon is clicked
$("#oldpassword1-toggle").on("click", function() {
    togglePasswordVisibility("oldpassword", "oldpassword-icon");
});

$("#newpassword1-toggle").on("click", function() {
    togglePasswordVisibility("newpassword1", "newpassword1-icon");
});

$("#newpassword2-toggle").on("click", function() {
    togglePasswordVisibility("newpassword2", "newpassword2-icon");
});
    

   $('#user_form').validate({
        rules: {
            oldpassword: "required",
            newpassword1: "required",
            newpassword2: {
                required: true,
                equalTo: "#newpassword1"
            }
        },
        messages: {
            oldpassword: "Please enter the old password",
            newpassword1: "Please enter the new password",
            newpassword2: {
                required: "Please enter the confirm new password",
                equalTo: "New password and confirm new password should be the same"
            }
        },
        errorPlacement: function(error, element) {
            var fieldId = element.attr("id") + "-error";
            error.appendTo($("#" + fieldId));
        }
    });

});
</script>
{% endblock extra_javascript %}