{% extends "whm/base.html" %}
{% block title %}Update User{% endblock title %}

{% block content %}
<div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">  
<div class="card card-default">
<div class="card-header">
        <h2>Update user</h2>
        

      </div>
<div class="card-body">
   
    
    <form method="post" action="">
        {% csrf_token %}
		
		
		
        <div class="row mb-2">
            <div class="col-lg-6">
              <div class="form-group">
                <label  for="firstName">First name</label>
                <input name="first_name" type="text" class="form-control" id="firstName" value="{{usr.first_name}}" required>
              </div>
            </div>

            <div class="col-lg-6">
              <div class="form-group">
                <label for="lastName">Last name</label>
                <input name="last_name" type="text" class="form-control" id="lastName" value="{{usr.last_name}}" required>
              </div>
            </div>
          </div>
        <div class="form-group">
            <label for="dns_name">username</label>
            <input type="text" class="form-control" id="dns_name" name="username" value="{{usr.username}}" required>
        </div>

        <div class="form-group">
            <label for="ttl">Email</label>
            <input type="email" class="form-control" id="ttl" name="email" value="{{usr.email}}" required>
        </div>

        <div class="form-group">
            <label for="type">Package</label>
            <select class="form-control" id="type" name="pkg_id" required>
                 {% for pk in pkg %} 
         <option value="{{ pk.id }}" {% if pk.id == pkg_id %}selected{% endif %}>{{ pk.name }}</option>
        {% endfor %}
            </select>
        </div>

      

        <div class="form-group">
		<label for="dbpassc" style="margin-right: 10px;">Confirm Password</label>
<div class="form-group form-inline mb-3" style="display: flex; align-items: center;">
   
    <input type="text" id="password" name="password" class="form-control" value="" placeholder="blank for leave"> 
	<button id="gen" class="btn btn-primary btn-sm" onclick="return generateAndFillPassword();">Genarate</button>
</div>

        <button type="submit" class="mb-1 btn btn-success btn-sm">Update user</button>
		
	{% if usr.is_active == 1 %}
    <p style="color: red;">
        Note: To delete an account, it must be suspended first.
    </p>
 {% endif %}
    </form>
	

	<form action="{% url 'suspend_user' usr.id %}" method="post" style="display: inline; float: right;">
    {% csrf_token %}
    {% if usr.is_active == 0 %}
        <button type="submit" name="action" value="unsuspend" class="btn btn-secondary btn-sm" onclick="return confirm('Are you sure you want to Unsuspend this user?');">Unsuspend</button> 
        <button type="submit" name="action" value="delete" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this user?');">Delete</button>
    {% else %}
        <button type="submit" name="action" value="suspend" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to suspend this user?');">Suspend</button>
    {% endif %}
</form>

</div>
</div></div></div>
<script>
    function generateStrongPassword(length = 16) {
        const lowercase = 'abcdefghijklmnopqrstuvwxyz';
        const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const digits = '0123456789';
        const specialChars = '!@#$%^&*()_+[]{}|;:,.<>?';
        
        const allCharacters = lowercase + uppercase + digits + specialChars;
        let password = '';

        // Ensure the password contains at least one character from each category
        password += lowercase[Math.floor(Math.random() * lowercase.length)];
        password += uppercase[Math.floor(Math.random() * uppercase.length)];
        password += digits[Math.floor(Math.random() * digits.length)];
        password += specialChars[Math.floor(Math.random() * specialChars.length)];

        // Fill the rest of the password length with a mix of all characters
        for (let i = 4; i < length; i++) {
            password += allCharacters[Math.floor(Math.random() * allCharacters.length)];
        }

        // Shuffle the password to ensure randomness
        password = password.split('').sort(() => Math.random() - 0.5).join('');
        return password;
    }

    function generateAndFillPassword() {
        const password = generateStrongPassword();
        document.getElementById('password').value = password;
        
        return false; // Prevent any default action (not strictly necessary here)
    }
	
	 const selectedValue = "{{ pkg_id }}"; // Django template variable
    const selectElement = document.getElementById("packageSelect");

    selectElement.value = selectedValue;

    if (selectElement.value !== selectedValue) {
        console.warn(`Value "${selectedValue}" not found in the dropdown.`);
    }
</script>
{% endblock content %}