{% extends "user_dashboard_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}Change Password{% endblock  %}


{% block content %}
    {# ... (messages block remains same) ... #}
    {% if messages %}
        <div class="container mt-3">
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <section class="boxs">
        <h6 class="subtitle">Change Password</h6>
        <hr>
        <form method="post">
            {% csrf_token %}
            <div class="row">
                <div class="col-md-6">
                    {{ form.name|as_crispy_field }}
                </div>
                <div class="col-md-6">
                    {{ form.email|as_crispy_field }}
                </div>
                <div class="col-md-6">
                    {{ form.phone|as_crispy_field }}
                </div>
            </div>


            <div class="row">
                <div class="col-md-6 position-relative">
                    {{ form.password|as_crispy_field }}
                    <span class="eye" onclick="toggleEmpPassword('id_password', 'eye_pass')" style="position: absolute; right: 25px; top: 38px; cursor: pointer;">
                        <i class="bi bi-eye-slash" id="eye_pass"></i>
                    </span>
                </div>

                <div class="col-md-6 position-relative">
                    {{ form.confirm_password|as_crispy_field }}
                    <span class="eye" onclick="toggleEmpPassword('id_confirm_password', 'eye_conf')" style="position: absolute; right: 25px; top: 38px; cursor: pointer;">
                        <i class="bi bi-eye-slash" id="eye_conf"></i>
                    </span>
                </div>
            </div>

            <div class="submit_btn text-center pt-3 pb-4">
                <button type="submit">Submit</button>
            </div>
        </form>
    </section>
{% endblock  %}

{% block JS %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<script>
// Toggle Password Function
function toggleEmpPassword(fieldId, iconId) {
    const input = document.getElementById(fieldId);
    const icon = document.getElementById(iconId);
    
    if (input.type === "password") {
        input.type = "text";
        icon.classList.replace("bi-eye-slash", "bi-eye");
    } else {
        input.type = "password";
        icon.classList.replace("bi-eye", "bi-eye-slash");
    }
}

$(document).ready(function() {
    $('#id_categories').select2({
        allowClear: true,
        width: '100%'
    });
});
    
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const submitBtn = form.querySelector('button[type="submit"]');

    form.addEventListener('submit', function(e) {
        // Only disable if form is valid (basic check)
        if (form.checkValidity()) {
            submitBtn.disabled = true;
            submitBtn.innerText = "Submitting...";
        }
    });
});
</script>
{% endblock  %}