{% extends 'admin-dashboard.html' %}
{% load static %}
{% block content %}

<div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="profileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content rounded-4 shadow-lg border-0">

            <div class="modal-header border-bottom px-4 pt-4 pb-3">
                <h5 class="modal-title fw-bolder text-dark" id="profileModalLabel">
                    <i class="align-middle me-2 text-primary" data-feather="user"></i> Update Profile Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form method="post">
                {% csrf_token %}
                <div class="modal-body p-4">

                    <h6 class="mb-3 fw-bold text-dark border-bottom pb-2">User Details</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="userFirstName" placeholder="Firstname" value="{{ admin.first_name }}" name="first_name" required>
                                <label for="userFirstName">First Name</label>
                                <div class="invalid-feedback">First Name is required and must contain only letters and spaces.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="userLastName" placeholder="Lastname" value="{{ admin.last_name }}" name="last_name" required>
                                <label for="userLastName">Last Name</label>
                                <div class="invalid-feedback">Last Name is required and must contain only letters and spaces.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="email" class="form-control rounded-3" id="userEmail" placeholder="Email ID" value="{{ admin.email }}" name="email" required>
                                <label for="userEmail">Email ID</label>
                                <div class="invalid-feedback">Please enter a valid email address.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="number" class="form-control rounded-3" id="userPhn" placeholder="Phone number" value="{{ admin.phn_no }}" name="phn_no" required>
                                <label for="userPhn">Phone Number</label>
                                <div class="invalid-feedback">Phone Number is required and must be exactly 10 digits.</div>
                            </div>
                        </div>
                    </div>

                    {% if not admin.is_superuser %}
                    <h6 class="mb-3 fw-bold text-dark border-bottom pb-2">Institution Details</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="instName" placeholder="Institution Name" value="{{ admin.institution.institution_name }}" name="institution_name" required>
                                <label for="instName">Institution Name</label>
                                <div class="invalid-feedback">Institution Name is required (letters and spaces only).</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="number" class="form-control rounded-3" id="instPhn" placeholder="Institution Phone" value="{{ admin.institution.phn }}" name="institution_phn" required>
                                <label for="instPhn">Institution Phone</label>
                                <div class="invalid-feedback">Institution Phone Number is required and must be exactly 10 digits.</div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-floating">
                                <textarea class="form-control rounded-3" id="instAddress" placeholder="Institution Address" name="institution_address" style="height: 100px;" required>{{ admin.institution.address }}</textarea>
                                <label for="instAddress">Institution Address</label>
                                <div class="invalid-feedback">Institution Address is required.</div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>

                <div class="modal-footer d-flex justify-content-between border-top p-4">
                    <button type="button" class="btn btn-outline-danger fw-semibold rounded-pill px-4" data-bs-dismiss="modal">
                        <i class="align-middle me-1" data-feather="x"></i> Close
                    </button>
                    <button type="submit" class="btn btn-primary fw-semibold rounded-pill px-4">
                        <i class="align-middle me-1" data-feather="check"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="updateDataModal" tabindex="-1" aria-labelledby="updateDataModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content rounded-4 shadow-lg border-0">

            <div class="modal-header border-bottom px-4 pt-4 pb-3">
                <h5 class="modal-title fw-bolder text-dark" id="updateDataModalLabel">
                    <i class="align-middle me-2 text-primary" data-feather="key"></i> Change Account Credentials
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form method="post" action="/administrator/update_account_details/">
                {% csrf_token %}
                <div class="modal-body p-4">

                    {% if not admin.is_superuser and preference.email_enabled %}
                    <fieldset class="mb-5 p-4 border rounded-4 bg-light">
                        <legend class="h6 text-primary fw-bold px-2">Institution Email Credentials</legend>
                        <p class="text-muted small mb-4">Update credentials for automated email notifications (only needed if changing email service providers).</p>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="email" class="form-control rounded-3" id="instEmail" placeholder="Institution Email" value="{{ admin.institution.email }}" name="institution_email" required>
                                    <label for="instEmail">Institution Email</label>
                                    <div class="invalid-feedback">Institution Email is required.</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="password" class="form-control rounded-3" id="instAppPassword" placeholder="Email App Password" name="institution_app_password" value="{{ admin.institution.email_app_password }}" required>
                                    <label for="instAppPassword">Email App Password</label>
                                    <div class="invalid-feedback">Email App Password is required.</div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    {% endif %}

                    <fieldset>
                        <legend class="h6 text-dark fw-bold border-bottom pb-2 mb-3">User Account Credentials</legend>

                        <p class="text-muted small">Enter your <strong class="text-dark">current password</strong> to verify your identity before making any changes.</p>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control rounded-3" id="newUsername" placeholder="New Username" value="{{ admin.username }}" name="new_username" required>
                                    <label for="newUsername">New Username</label>
                                    <div class="invalid-feedback">New Username is required.</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="password" class="form-control rounded-3" id="oldPassword" placeholder="Current Password" name="old_password" required>
                                    <label for="oldPassword">Current Password</label>
                                    <div class="invalid-feedback">Current Password is mandatory to save any changes.</div>
                                </div>
                            </div>
                        </div>

                        <h6 class="text-dark fw-bold mt-4">Change Password</h6>
                        <p class="text-muted small">To keep your current password, simply <strong class="text-dark">leave these fields blank</strong>.</p>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="password" class="form-control rounded-3" id="newPassword" placeholder="New Password" name="new_password">
                                    <label for="newPassword">New Password</label>
                                    <div class="invalid-feedback">Password must be at least 8 characters long, including uppercase, lowercase, number, and symbol.</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="password" class="form-control rounded-3" id="confirmPassword" placeholder="Confirm Password" name="confirm_password">
                                    <label for="confirmPassword">Confirm New Password</label>
                                    <div class="invalid-feedback">New Password and Confirm Password must match.</div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>

                <div class="modal-footer d-flex justify-content-between border-top p-4">
                    <button type="button" class="btn btn-outline-danger fw-semibold rounded-pill px-4" data-bs-dismiss="modal">
                        <i class="align-middle me-1" data-feather="x"></i> Close
                    </button>
                    <button type="submit" class="btn btn-primary fw-semibold rounded-pill px-4">
                        <i class="align-middle me-1" data-feather="check"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container-fluid p-0">
    <h1 class="mb-4 fw-bold {% if admin.is_superuser %} text-center {% endif %}">{{ admin.username }}'s Profile</h1>

    <div class="row g-4">

        <div class="col-lg-4 {% if admin.is_superuser %} mx-auto {% endif %}">
            <div class="card border-0 shadow-lg rounded-4 h-100">
                <div class="card-body p-4 text-center">

                    <h4 class="fw-bold text-dark mb-1">{% if admin.is_superuser %} Superuser {% else %} User {% endif %} Profile</h4>
                    <p class="text-muted small mb-4">Account Type</p>

                    <form id="uploadAdminImgForm" method="post" action="/administrator/admin_profile_img/" enctype="multipart/form-data" class="mb-4">
                        {% csrf_token %}
                        <input type="file" id="adminImgUpload" name="admin_img" style="display: none;">
                        <label for="adminImgUpload">
                            <img
                                {% if admin.profile_pic %}
                                    src="{{ admin.profile_pic.url }}"
                                {% else %}
                                    src="{% static 'Dashboard/img/avatars/default-avatar.jpg' %}"
                                {% endif %}
                                alt="Click to upload an image"
                                style="cursor: pointer; width: 150px; height: 150px; object-fit: cover; transition: transform 0.2s;"
                                class="border border-4 border-primary rounded-circle shadow-lg profile-img-hover">
                        </label>
                    </form>

                    <h3 class="fw-bolder text-primary">{{ admin.first_name }} {{ admin.last_name }}</h3>
                    <span class="text-secondary d-block mb-3">@{{ admin.username }}</span>

                    <ul class="list-group list-group-flush text-start border-top pt-3">
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span class="text-muted">Email:</span> <span class="fw-bold">{{ admin.email }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span class="text-muted">Contact:</span> <span class="fw-bold">{{ admin.phn_no|default:'N/A' }}</span>
                        </li>
                    </ul>

                    <div class="mt-4 pt-3 d-grid gap-2">
                        <button type="button" class="btn btn-primary fw-semibold rounded-pill py-2" data-bs-toggle="modal" data-bs-target="#profileModal">
                            <i class="align-middle me-1" data-feather="edit"></i> Update Profile Details
                        </button>
                        <button type="button" class="btn btn-outline-danger fw-semibold rounded-pill py-2" data-bs-toggle="modal" data-bs-target="#updateDataModal">
                            <i class="align-middle me-1" data-feather="lock"></i> Update Credentials
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {% if admin.institution %}
        <div class="col-lg-8">

            <div class="card border-0 shadow-lg rounded-4 mb-4">
                <div class="card-body p-4">
                    <h4 class="fw-bold text-dark mb-4 border-bottom pb-2">Institution Details</h4>
                    <div class="row g-3 align-items-center">
                        <div class="col-md-8">
                            <ul class="list-group list-group-flush text-start">
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">Name:</span> <span class="fw-bold text-end">{{ admin.institution.institution_name }}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">Email:</span> <span class="fw-bold text-end">{{ admin.institution.email }}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">Phone:</span> <span class="fw-bold text-end">{{ admin.institution.phn }}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-start px-0 py-2">
                                    <span class="text-muted me-3">Address:</span> <span class="fw-bold text-end">{{ admin.institution.address }}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-4 d-flex justify-content-center align-items-center">
                            <form id="uploadInstitutionImgForm" method="post" action="/administrator/admin_inst_img/" enctype="multipart/form-data">
                                {% csrf_token %}
                                <input type="file" id="instImgUpload" name="inst_img" style="display: none;">
                                <label for="instImgUpload" class="text-center">
                                    <span class="d-block small text-muted mb-2">Institution Logo</span>
                                    <img
                                        {% if admin.institution.institution_img %}
                                            src="{{ admin.institution.institution_img.url }}"
                                        {% else %}
                                            src="{% static 'frontend/img/default_logo.jpg' %}"
                                        {% endif %}
                                        alt="Click to upload logo"
                                        style="cursor: pointer; width: 120px; height: 120px; object-fit: cover;"
                                        class="border border-3 border-secondary rounded-3 shadow-sm">
                                </label>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-lg rounded-4 mb-4">
                <div class="card-body p-4">
                    <h4 class="fw-bold text-dark mb-4 border-bottom pb-2">Notification Preference</h4>
                    <form method="POST" action="/administrator/update_notification_preference/" class="row g-3">
                        {% csrf_token %}
                        <div class="col-12 d-flex justify-content-start gap-5 align-items-center flex-wrap">

                            <div class="d-flex align-items-center">
                                <span class="fw-bold me-3 text-muted">Email Service:</span>
                                <div class="form-check form-switch form-check-lg">
                                    <input class="form-check-input" type="checkbox" role="switch" name="email_enabled" id="email_toggle"
                                           {% if preference.email_enabled %}checked{% endif %}>
                                </div>
                            </div>

                            <div class="d-flex align-items-center">
                                <span class="fw-bold me-3 text-muted">Whatsapp Service:</span>
                                <div class="form-check form-switch form-check-lg">
                                    <input class="form-check-input" type="checkbox" role="switch" name="whatsapp_enabled" id="whatsapp_toggle"
                                           {% if preference.whatsapp_enabled %}checked{% endif %}>
                                </div>
                            </div>

                            <div class="d-flex align-items-center">
                                <span class="fw-bold me-3 text-muted">SMS Service:</span>
                                <div class="form-check form-switch form-check-lg">
                                    <input class="form-check-input" type="checkbox" role="switch" name="sms_enabled" id="sms_toggle"
                                           {% if preference.sms_enabled %}checked{% endif %}>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 d-flex justify-content-end gap-3 mt-4">
                            <button type="submit" class="btn btn-primary fw-semibold rounded-pill py-2 px-3">
                                <i class="align-middle me-1" data-feather="save"></i> Save Preferences
                            </button>
                            <a href="/administrator/default-notification/" class="btn btn-outline-secondary fw-semibold rounded-pill py-2 px-3">
                                <i class="align-middle me-1" data-feather="refresh-cw"></i> Reset to Default
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="col-lg-12">
            {% if admin.institution and admin.institution.default_bank %}
            <div class="card border-0 shadow-lg rounded-4 mb-4">
                <div class="card-body p-4">
                    <h4 class="fw-bold text-dark mb-4 border-bottom pb-2">Default Bank Details</h4>
                    <div class="row g-4">
                        <div class="col-md-6">
                            <ul class="list-group list-group-flush text-start">
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">A/c Holder Name:</span> <span class="fw-bold text-end">{{admin.institution.default_bank.account_holder_first_name}} {{admin.institution.default_bank.account_holder_last_name}}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">A/c Holder Phn:</span> <span class="fw-bold text-end">{{admin.institution.default_bank.account_holder_phn_no}}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">Bank Name:</span> <span class="fw-bold text-end">{{admin.institution.default_bank.bank_name}}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-start px-0 py-2">
                                    <span class="text-muted me-3">A/c Holder Address:</span> <span class="fw-bold text-end">{{admin.institution.default_bank.account_holder_address}}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-group list-group-flush text-start">
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">Branch Name:</span> <span class="fw-bold text-end">{{admin.institution.default_bank.branch_name}}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">IFSC Code:</span> <span class="fw-bold text-end">{{admin.institution.default_bank.ifsc_code}}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">Account Number:</span> <span class="fw-bold text-end">{{admin.institution.default_bank.account_no}}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                    <span class="text-muted">UPI ID:</span> <span class="fw-bold text-end">{{admin.institution.default_bank.upi_id}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        // ===============================================
        // A. Profile Details Form Validation Logic
        // ===============================================

        // 🎯 CRITICAL FIX: Target the form inside the specific profile modal
        const profileModal = document.getElementById('profileModal');
        const profileForm = profileModal ? profileModal.querySelector('form') : null;

        // --- 1. Define Input Elements ---

        // User Details
        const firstNameInput = document.getElementById('userFirstName');
        const lastNameInput = document.getElementById('userLastName');
        const emailInput = document.getElementById('userEmail');
        const phnInput = document.getElementById('userPhn');

        // Institution Details (Check if they exist for non-superusers)
        const instNameInput = document.getElementById('instName');
        const instPhnInput = document.getElementById('instPhn');
        const instAddressInput = document.getElementById('instAddress');

        // --- 2. Define Strict Regex Patterns ---
        const nameRegex = /^[a-zA-Z\s]+$/;         // Letters and spaces only
        const phoneRegex = /^\d{10}$/;             // Exactly 10 digits only
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        // --- 3. Helper Function to Display Validation Status ---
        function updateValidationStatus(inputElement, isValid, errorMessage = "") {
            if (!inputElement) return; // Guard clause

            // Use optional chaining for robustness
            const feedbackElement = inputElement.closest('.form-floating')?.querySelector('.invalid-feedback');

            if (isValid) {
                inputElement.classList.remove('is-invalid');
                inputElement.classList.add('is-valid');
            } else {
                inputElement.classList.remove('is-valid');
                inputElement.classList.add('is-invalid');
            }

            // Optional: Override hardcoded message
            if (!isValid && feedbackElement && errorMessage) {
                 feedbackElement.textContent = errorMessage;
            }
        }

        // --- 4. Main Validation Function ---
        function validateProfileForm() {
            let formIsValid = true;

            if (!profileForm) return true; // Exit if form not found

            // --- Reset status for all inputs (Only within the profile form) ---
            const allInputs = profileForm.querySelectorAll('input, textarea');
            allInputs.forEach(input => {
                input.classList.remove('is-valid', 'is-invalid');
            });

            // A. Validate User Details
            if (firstNameInput && (firstNameInput.value.trim() === '' || !nameRegex.test(firstNameInput.value.trim()))) {
                updateValidationStatus(firstNameInput, false, firstNameInput.value.trim() === '' ? "First Name is required." : "First Name must contain only letters and spaces.");
                formIsValid = false;
            }

            if (lastNameInput && (lastNameInput.value.trim() === '' || !nameRegex.test(lastNameInput.value.trim()))) {
                updateValidationStatus(lastNameInput, false, lastNameInput.value.trim() === '' ? "Last Name is required." : "Last Name must contain only letters and spaces.");
                formIsValid = false;
            }

            if (emailInput && (emailInput.value.trim() === '' || !emailRegex.test(emailInput.value.trim()))) {
                updateValidationStatus(emailInput, false, emailInput.value.trim() === '' ? "Email ID is required." : "Please enter a valid email address.");
                formIsValid = false;
            }

            if (phnInput && (phnInput.value.trim() === '' || !phoneRegex.test(phnInput.value.trim()))) {
                updateValidationStatus(phnInput, false, phnInput.value.trim() === '' ? "Phone Number is required." : "Phone Number must be exactly 10 digits (numbers only).");
                formIsValid = false;
            }


            // B. Validate Institution Details (if fields exist)
            if (instNameInput) {
                if (instNameInput.value.trim() === '' || !nameRegex.test(instNameInput.value.trim())) {
                    updateValidationStatus(instNameInput, false, instNameInput.value.trim() === '' ? "Institution Name is required." : "Institution Name must contain only letters and spaces.");
                    formIsValid = false;
                }

                if (instPhnInput.value.trim() === '' || !phoneRegex.test(instPhnInput.value.trim())) {
                    updateValidationStatus(instPhnInput, false, instPhnInput.value.trim() === '' ? "Institution Phone is required." : "Institution Phone Number must be exactly 10 digits (numbers only).");
                    formIsValid = false;
                }

                if (instAddressInput.value.trim() === '') {
                    updateValidationStatus(instAddressInput, false, "Institution Address is required.");
                    formIsValid = false;
                }
            }

            return formIsValid;
        }

        // --- 5. Attach Profile Form Event Listener ---
        if (profileForm) {
            profileForm.addEventListener('submit', (event) => {
                const formIsValid = validateProfileForm();

                if (!formIsValid) {
                    event.preventDefault();
                    event.stopPropagation();
                    const firstInvalid = profileForm.querySelector('.is-invalid');
                    if (firstInvalid) {
                        firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                }
            });
        }


        // ===============================================
        // B. Profile Image Auto-Submit Logic
        // ===============================================

        const autoSubmitForm = (event) => {
            const fileInput = event.target;
            if (fileInput.files && fileInput.files.length > 0) {
                // Submit the form that the file input belongs to
                fileInput.form.submit();
            }
        };

        const adminImgUpload = document.getElementById('adminImgUpload');
        const instImgUpload = document.getElementById('instImgUpload');

        if (adminImgUpload) {
            adminImgUpload.addEventListener('change', autoSubmitForm);
        }
        if (instImgUpload) {
            instImgUpload.addEventListener('change', autoSubmitForm);
        }


        // ===============================================
        // C. Password Validation Logic (UPDATED)
        // ===============================================

        // This targets the modal where password change fields typically reside
        const updateDataModal = document.getElementById('updateDataModal');

        if (updateDataModal) {
            // Find the form *inside* the password modal/section
            const passwordForm = updateDataModal.querySelector('form');
            const oldPasswordInput = document.getElementById('oldPassword');
            const newUsernameInput = document.getElementById('newUsername');
            const newPasswordInput = document.getElementById('newPassword');
            const confirmPasswordInput = document.getElementById('confirmPassword');

            // Password complexity regex (at least 8 chars, 1 upper, 1 lower, 1 number, 1 symbol)
            const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

            // Helper function for visual feedback (use the one defined in section A)
            function updateCredentialValidationStatus(inputElement, isValid, errorMessage = "") {
                if (!inputElement) return;
                const feedbackElement = inputElement.closest('.form-floating')?.querySelector('.invalid-feedback');

                if (isValid) {
                    inputElement.classList.remove('is-invalid');
                    inputElement.classList.add('is-valid');
                } else {
                    inputElement.classList.remove('is-valid');
                    inputElement.classList.add('is-invalid');
                }

                if (!isValid && feedbackElement) {
                     feedbackElement.textContent = errorMessage;
                }
            }


            if (passwordForm) {
                passwordForm.addEventListener('submit', (event) => {
                    let passwordFormIsValid = true;

                    // Clear previous validation states for all fields in this form
                    [oldPasswordInput, newUsernameInput, newPasswordInput, confirmPasswordInput].forEach(input => {
                        if (input) {
                            input.classList.remove('is-valid', 'is-invalid');
                        }
                    });

                    // --- 1. Current Password (oldPassword) is MANDATORY for ANY change (Username or Password) ---
                    if (oldPasswordInput && oldPasswordInput.value.trim() === '') {
                        updateCredentialValidationStatus(oldPasswordInput, false, "Current Password is required to verify your identity and save changes.");
                        passwordFormIsValid = false;
                    } else {
                        updateCredentialValidationStatus(oldPasswordInput, true);
                    }

                    // --- 2. New Username validation (optional: add stricter regex if needed) ---
                    if (newUsernameInput && newUsernameInput.value.trim() === '') {
                         updateCredentialValidationStatus(newUsernameInput, false, "New Username cannot be empty.");
                         passwordFormIsValid = false;
                    } else {
                         updateCredentialValidationStatus(newUsernameInput, true);
                    }

                    // --- 3. New Password Fields Validation (Conditional) ---
                    const newPwd = newPasswordInput ? newPasswordInput.value : '';
                    const confirmPwd = confirmPasswordInput ? confirmPasswordInput.value : '';

                    // Check if user is trying to change the password (at least one field filled)
                    if (newPwd.length > 0 || confirmPwd.length > 0) {

                        // A. Check for New Password Input
                        if (newPwd.length === 0) {
                            updateCredentialValidationStatus(newPasswordInput, false, "New Password is required if Confirm Password is set.");
                            passwordFormIsValid = false;
                        }
                        // B. Check for Password Complexity
                        else if (!passwordRegex.test(newPwd)) {
                            updateCredentialValidationStatus(newPasswordInput, false, "Password must be at least 8 characters long, including an uppercase letter, a lowercase letter, a number, and a symbol.");
                            passwordFormIsValid = false;
                        } else {
                            updateCredentialValidationStatus(newPasswordInput, true);
                        }

                        // C. Check if passwords match
                        if (newPwd !== confirmPwd) {
                            updateCredentialValidationStatus(confirmPasswordInput, false, "New Password and Confirm Password do not match.");
                            // Check if newPasswordInput failed validation first, if not, update its status to avoid confusion
                            if (passwordFormIsValid) {
                               updateCredentialValidationStatus(newPasswordInput, false, "New Password and Confirm Password do not match.");
                            }
                            passwordFormIsValid = false;
                        } else {
                            updateCredentialValidationStatus(confirmPasswordInput, true);
                            if (passwordFormIsValid) {
                               updateCredentialValidationStatus(newPasswordInput, true);
                            }
                        }
                    } else {
                        // If fields are blank, they are valid (since changing password is optional)
                        if(newPasswordInput) newPasswordInput.classList.remove('is-valid', 'is-invalid');
                        if(confirmPasswordInput) confirmPasswordInput.classList.remove('is-valid', 'is-invalid');
                    }


                    if (!passwordFormIsValid) {
                        event.preventDefault();
                        event.stopPropagation();

                        // Scroll to the first invalid input in this modal
                        const firstInvalid = passwordForm.querySelector('.is-invalid');
                        if (firstInvalid) {
                            firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                    }
                });
            }
        }
    });
</script>

{% endblock %}