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

<!---------------------- Modal for Adding new Admin -------------------->
<div class="modal fade" id="newAdminModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md 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="exampleModalLabel">
                    <i class="align-middle me-2 text-primary" data-feather="user-plus"></i> Add a New Administrator
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form method="post" id="add-admin-form">
                {% csrf_token %}
                <div class="modal-body p-4">
                    <h6 class="fw-bold text-dark mb-3 border-bottom pb-2">Admin Account Details</h6>

                    <div class="row g-3">
                        <div class="col-lg-6">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="first_name" placeholder="First name" name="first_name" required>
                                <label for="first_name">First Name</label>
                                <span class="text-danger small mt-1 d-block" id="first_name-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="last_name" placeholder="Last name" name="last_name" required>
                                <label for="last_name">Last Name</label>
                                <span class="text-danger small mt-1 d-block" id="last_name-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="email" class="form-control rounded-3" id="email" placeholder="Enter Email" name="email" required>
                                <label for="email">Email Address</label>
                                <span class="text-danger small mt-1 d-block" id="email-error"></span>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-floating">
                                <select class="form-select rounded-3" id="inst_name" name="inst_name" required>
                                    <option selected disabled value="">Select the Affiliated Institution</option>
                                    {% for i in inst %}
                                    <option value="{{i.id}}">{{i.institution_name}}</option>
                                    {% endfor %}
                                </select>
                                <label for="inst_name">Institution Name</label>
                                <span class="text-danger small mt-1 d-block" id="inst_name-error"></span>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="tel" class="form-control rounded-3" id="phn_no" placeholder="Enter Contact number" name="phn_no" required>
                                <label for="phn_no">Contact Number</label>
                                <span class="text-danger small mt-1 d-block" id="phn_no-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="username" placeholder="Enter Username" name="username" required>
                                <label for="username">Username</label>
                                <span class="text-danger small mt-1 d-block" id="username-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-floating">
                                <input type="password" class="form-control rounded-3" id="password" placeholder="Enter Password" name="password" required>
                                <label for="password">Password</label>
                                <span class="text-danger small mt-1 d-block" id="password-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-floating">
                                <input type="password" class="form-control rounded-3" id="confirm_password" placeholder="Confirm Password" name="confirm_password" required>
                                <label for="confirm_password">Confirm Password</label>
                                <span class="text-danger small mt-1 d-block" id="confirm_password-error"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between border-top p-4">
                    <button type="reset" 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> Reset & Close
                    </button>
                    <button type="submit" class="btn btn-primary fw-semibold rounded-pill px-4" id="saveButton">
                        <i class="align-middle me-1" data-feather="check"></i> Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!---------------------- Modal for Updating Admin -------------------->
<div class="modal fade" id="updateAdminModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md 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="updateModalLabel">
                    <i class="align-middle me-2 text-primary" data-feather="user-check"></i> Update Administrator Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form method="post" action="" id="update-admin-form">
                {% csrf_token %}
                <div class="modal-body p-4">
                    <h6 class="fw-bold text-dark mb-3 border-bottom pb-2">Admin Account Details</h6>

                    <div class="row g-3">
                        <div class="col-lg-6">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="first_name_update" placeholder="First name" name="first_name" required>
                                <label for="first_name_update">First Name</label>
                                <span class="text-danger small mt-1 d-block" id="first_name_update-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="last_name_update" placeholder="Last name" name="last_name" required>
                                <label for="last_name_update">Last Name</label>
                                <span class="text-danger small mt-1 d-block" id="last_name_update-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="email" class="form-control rounded-3" id="email_update" placeholder="Enter Email" name="email" required>
                                <label for="email_update">Email Address</label>
                                <span class="text-danger small mt-1 d-block" id="email_update-error"></span>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-floating">
                                <select class="form-select rounded-3" id="inst_name_update" name="inst_name" required>
                                    <option selected disabled value="">Select the Affiliated Institution</option>
                                    {% for i in inst %}
                                    <option value="{{i.id}}">{{i.institution_name}}</option>
                                    {% endfor %}
                                </select>
                                <label for="inst_name_update">Institution Name</label>
                                <span class="text-danger small mt-1 d-block" id="inst_name_update-error"></span>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="tel" class="form-control rounded-3" id="phn_no_update" placeholder="Enter Contact number" name="phn_no" required>
                                <label for="phn_no_update">Contact Number</label>
                                <span class="text-danger small mt-1 d-block" id="phn_no_update-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="username_update" placeholder="Enter Username" name="username" required>
                                <label for="username_update">Username</label>
                                <span class="text-danger small mt-1 d-block" id="username_update-error"></span>
                            </div>
                        </div>

                        <h6 class="fw-bold text-dark mt-4 border-bottom pb-2">Change Password</h6>
                        <div class="col-lg-6">
                            <div class="form-floating">
                                <input type="password" class="form-control rounded-3" id="password_update" placeholder="Enter Old Password" name="password" required>
                                <label for="password_update">Old Password (Required)</label>
                                <span class="text-danger small mt-1 d-block" id="password_update-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-floating">
                                <input type="password" class="form-control rounded-3" id="confirm_password_update" placeholder="Confirm Password" name="confirm_password">
                                <label for="confirm_password_update">New Password (Leave blank to keep old)</label>
                                <span class="text-danger small mt-1 d-block" id="confirm_password_update-error"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between border-top p-4">
                    <button type="reset" 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="button" class="btn btn-warning fw-semibold rounded-pill px-4" id="edit-button">
                        <i class="align-middle me-1" data-feather="edit"></i> Edit
                    </button>

                    <button type="submit" class="btn btn-primary fw-semibold rounded-pill px-4" id="update-button" hidden>
                        <i class="align-middle me-1" data-feather="save"></i> Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<!---------------------- Modal for Deleting Institution Admin -------------------->
<!--<div class="modal fade" id="adminPermanentDeleteModal" tabindex="-1" aria-labelledby="adminPermanentDeleteModalLabel" aria-hidden="true">-->
<!--    <div class="modal-dialog">-->
<!--        <div class="modal-content">-->
<!--            <div class="modal-header">-->
<!--                <h1 class="modal-title fs-5" id="adminPermanentDeleteModalLabel"><strong>Delete Institution Admin</strong></h1>-->
<!--                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
<!--            </div>-->

<!--            <form method="post" action="">-->
<!--                {% csrf_token %}-->
<!--                <div class="modal-body">-->
<!--                    <div class="alert alert-danger" role="alert">-->
<!--                        <strong>Warning!</strong> Deleting this admin account is permanent and cannot be undone.-->
<!--                        <br>-->
<!--                        This user will be removed from the system and lose all access.-->
<!--                    </div>-->
<!--                    <p>Are you sure you want to proceed?</p>-->
<!--                </div>-->
<!--                <div class="modal-footer d-flex justify-content-between">-->
<!--                    <button type="reset" class="btn btn-danger" data-bs-dismiss="modal">Close</button>-->
<!--                    <button type="submit" class="btn btn-warning">Delete Permanently</button>-->
<!--                </div>-->
<!--            </form>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!---------------------- All Admin Table Details -------------------->
<div class="row">
    <div class="col-12 ">
        <h1 class="mb-4 fw-bold">Administrator Details</h1>

        <div class="card border-0 shadow-lg rounded-4 flex-fill">

            <div class="card-header bg-white rounded-top-4 border-0 d-flex justify-content-end align-items-center p-4">
                <button type="button" class="btn btn-info fw-semibold rounded-pill py-2 px-3 me-2" data-bs-toggle="modal" data-bs-target="#newAdminModal">
                    <i class="align-middle me-1" data-feather="plus"></i> Register New Administrator
                </button>
                <button type="button" class="btn btn-primary fw-semibold rounded-pill py-2 px-3"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasFilter"
                    aria-controls="offcanvasFilter">
                    <i class="align-middle me-1" data-feather="filter"></i> Advanced Filter
                </button>
            </div>

            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasFilter" aria-labelledby="offcanvasFilterLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title fw-bold" id="offcanvasFilterLabel">
                        <i class="align-middle me-2" data-feather="filter"></i> Filter Options
                    </h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <form method="get" class="row g-3 align-items-end">

                        <div class="col-12">
                            <h6 class="mt-0 mb-3 fw-bold text-dark">Search Criteria</h6>
                        </div>

                        <div class="col-md-12">
                            <label for="admin_name" class="form-label small text-muted mb-1">Administrator Name</label>
                            <input type="text" class="form-control" id="admin_name" name="admin_name" placeholder="Enter Administrator Name">
                        </div>
                        <div class="col-md-12">
                            <label for="institution_filter" class="form-label small text-muted mb-1">Institution Name</label>
                            <input type="text" class="form-control" id="institution_filter" name="institution_filter" placeholder="Enter Institution Name">
                        </div>
                        <div class="col-md-12">
                            <label for="admin_username" class="form-label small text-muted mb-1">Username</label>
                            <input type="text" class="form-control" id="admin_username" name="admin_username" placeholder="Enter Username">
                        </div>
                        <div class="col-md-12">
                            <label for="admin_email" class="form-label small text-muted mb-1">Email ID</label>
                            <input type="text" class="form-control" id="admin_email" name="admin_email" placeholder="Enter Administrator Email ID">
                        </div>
                        <div class="col-md-12">
                            <label for="admin_phone" class="form-label small text-muted mb-1">Phone Number</label>
                            <input type="text" class="form-control" id="admin_phone" name="admin_phone" placeholder="Enter Phone number">
                        </div>

                        <div class="col-12 mt-4">
                            <h6 class="mb-3 fw-bold text-dark">Sorting & Status</h6>
                        </div>

                        <div class="col-md-12">
                            <label for="status_filter" class="form-label small text-muted mb-1">Status</label>
                            <select id="status_filter" name="status_filter" class="form-select">
                                <option value="">All</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="order_by_name" class="form-label small text-muted mb-1">Order by Admin's Name</label>
                            <select id="order_by_name" name="name_order" class="form-select">
                                <option value="">None</option>
                                <option value="asc">Ascending</option>
                                <option value="desc">Descending</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="order_by_institution" class="form-label small text-muted mb-1">Order by Institution</label>
                            <select id="order_by_institution" name="institution_order" class="form-select">
                                <option value="">None</option>
                                <option value="asc">Ascending</option>
                                <option value="desc">Descending</option>
                            </select>
                        </div>
                        <div class="col-12 text-end mt-4 pt-3 border-top">
                            <button type="submit" class="btn btn-primary fw-semibold rounded-pill py-2 px-3 w-100 mb-2">
                                <i class="align-middle me-1" data-feather="check"></i> Apply Filters
                            </button>
                            <a href="." class="btn btn-outline-secondary fw-semibold rounded-pill py-2 px-3 w-100">
                                <i class="align-middle me-1" data-feather="x"></i> Clear Filters
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-borderless align-middle mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th class="text-white small fw-bold text-uppercase ps-4">Sl no.</th>
                                <th class="text-white small fw-bold text-uppercase">Full name</th>
                                <th class="text-white small fw-bold text-uppercase">Username</th>
                                <th class="text-white small fw-bold text-uppercase">Email Address</th>
                                <th class="text-white small fw-bold text-uppercase">Institution</th>
                                <th class="text-white small fw-bold text-uppercase">Contact Number</th>
                                <th class="text-center text-white small fw-bold text-uppercase">Status</th>
                                <th class="text-center text-white small fw-bold text-uppercase pe-4">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for i in administrators %}
                        <tr {% if i.is_superuser %}class="table-primary bg-opacity-10"{% endif %}>
                            <td class="ps-4">{{forloop.counter}}</td>
                            <td class="fw-semibold text-dark">{{i.first_name}} {{i.last_name}}</td>
                            <td>{{i.username}}</td>
                            <td>{{i.email}}</td>
                            <td>{{i.institution.institution_name|default:"N/A"}}</td>
                            <td>{{i.phn_no|default:"N/A"}}</td>
                            <td class="text-center">
                                {% if i.table_status %}
                                    <span class="badge bg-success bg-opacity-10 text-success fw-bold rounded-pill p-2">
                                        <i class="align-middle me-1" data-feather="check-circle"></i> Active
                                    </span>
                                {% else %}
                                    <span class="badge bg-danger bg-opacity-10 text-danger fw-bold rounded-pill p-2">
                                        <i class="align-middle me-1" data-feather="x-circle"></i> Inactive
                                    </span>
                                {% endif %}
                            </td>
                            <td class="text-center pe-4 text-nowrap">
                                <div class="d-flex align-items-center justify-content-center gap-2">
                                    <a class="btn btn-sm btn-primary rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#updateAdminModal" data-action-type="view"
                                       data-admin-id="{{ i.id }}"
                                       data-first-name="{{ i.first_name }}"
                                       data-last-name="{{ i.last_name }}"
                                       data-email="{{ i.email }}"
                                       data-inst-id="{{ i.institution.id }}"
                                       data-phn-no="{{ i.phn_no }}"
                                       data-username="{{ i.username }}"
                                       title="Edit Administrator Details">
                                        <i class="align-middle" data-feather="edit"></i>
                                    </a>

                                    {% if i.table_status %}
                                    <a class="btn btn-sm btn-warning rounded-pill px-3" href="/administrator/change-admin-status/{{i.id}}/" title="Set Inactive">
                                        <i class="align-middle" data-feather="toggle-right"></i>
                                    </a>
                                    {% else %}
                                    <a class="btn btn-sm btn-success rounded-pill px-3" href="/administrator/change-admin-status/{{i.id}}/" title="Set Active">
                                        <i class="align-middle" data-feather="toggle-left"></i>
                                    </a>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const adminDeleteModal = document.getElementById('adminPermanentDeleteModal');

        if (adminDeleteModal) {
            adminDeleteModal.addEventListener('show.bs.modal', (event) => {
                const button = event.relatedTarget;
                const adminId = button.getAttribute('data-admin-id');
                const form = adminDeleteModal.querySelector('form');

                // The URL should match your Django URL pattern
                const newActionUrl = `/administrator/delete-insti-admin/${adminId}/`;
                form.action = newActionUrl;
            });
        }
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // --- Shared Validation Functions and Regex Patterns ---
        const nameRegex = /^[a-zA-Z\s]+$/;
        const phoneRegex = /^\d{10}$/;
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

        function updateValidationStatus(inputElement, isValid, errorMessage = "") {
            const errorSpan = document.getElementById(`${inputElement.id}-error`);
            if (isValid) {
                inputElement.classList.remove('is-invalid');
                inputElement.classList.add('is-valid');
                if (errorSpan) errorSpan.textContent = "";
            } else {
                inputElement.classList.remove('is-valid');
                inputElement.classList.add('is-invalid');
                if (errorSpan) errorSpan.textContent = errorMessage;
            }
        }

        // --- Validation Logic for the "Add Admin" Form ---
        const addAdminForm = document.getElementById('add-admin-form');
        if (addAdminForm) {
            addAdminForm.addEventListener('submit', function (event) {
                if (!validateAddAdminForm()) {
                    event.preventDefault();
                }
            });

            function validateAddAdminForm() {
                let formIsValid = true;

                // Validate all fields
                const firstNameInput = document.getElementById('first_name');
                const lastNameInput = document.getElementById('last_name');
                const emailInput = document.getElementById('email');
                const phoneInput = document.getElementById('phn_no');
                const instSelect = document.getElementById('inst_name');
                const usernameInput = document.getElementById('username');
                const passwordInput = document.getElementById('password');
                const confirmPasswordInput = document.getElementById('confirm_password');

                if (!nameRegex.test(firstNameInput.value)) {
                    updateValidationStatus(firstNameInput, false, "Must contain only letters and spaces.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(firstNameInput, true);
                }

                if (!nameRegex.test(lastNameInput.value)) {
                    updateValidationStatus(lastNameInput, false, "Must contain only letters and spaces.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(lastNameInput, true);
                }

                if (!emailInput.value || !/^\S+@\S+\.\S+$/.test(emailInput.value)) {
                    updateValidationStatus(emailInput, false, "Please enter a valid email address.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(emailInput, true);
                }

                if (!phoneRegex.test(phoneInput.value)) {
                    updateValidationStatus(phoneInput, false, "Please enter a valid 10-digit phone number.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(phoneInput, true);
                }

                if (!instSelect.value) {
                    updateValidationStatus(instSelect, false, "Please select an institution.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(instSelect, true);
                }

                if (usernameInput.value.trim() === "") {
                    updateValidationStatus(usernameInput, false, "Username cannot be empty.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(usernameInput, true);
                }

                if (!passwordRegex.test(passwordInput.value)) {
                    updateValidationStatus(passwordInput, false, "Min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 symbol.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(passwordInput, true);
                }

                if (confirmPasswordInput.value !== passwordInput.value) {
                    updateValidationStatus(confirmPasswordInput, false, "Passwords do not match.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(confirmPasswordInput, true);
                }

                return formIsValid;
            }
        }

        // --- Validation and Logic for the "Update Admin" Form ---
        const updateAdminModal = document.getElementById('updateAdminModal');
        if (updateAdminModal) {
            const updateAdminForm = document.getElementById('update-admin-form');
            const formInputs = updateAdminModal.querySelectorAll('input, select');
            const editButton = document.getElementById('edit-button');
            const updateButton = document.getElementById('update-button');

            function validateUpdateAdminForm() {
                let formIsValid = true;

                // Validate all required fields
                const firstNameInput = document.getElementById('first_name_update');
                const lastNameInput = document.getElementById('last_name_update');
                const emailInput = document.getElementById('email_update');
                const phoneInput = document.getElementById('phn_no_update');
                const instSelect = document.getElementById('inst_name_update');
                const usernameInput = document.getElementById('username_update');

                if (!nameRegex.test(firstNameInput.value)) {
                    updateValidationStatus(firstNameInput, false, "Must contain only letters and spaces.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(firstNameInput, true);
                }

                if (!nameRegex.test(lastNameInput.value)) {
                    updateValidationStatus(lastNameInput, false, "Must contain only letters and spaces.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(lastNameInput, true);
                }

                if (!emailInput.value || !/^\S+@\S+\.\S+$/.test(emailInput.value)) {
                    updateValidationStatus(emailInput, false, "Please enter a valid email address.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(emailInput, true);
                }

                if (!phoneRegex.test(phoneInput.value)) {
                    updateValidationStatus(phoneInput, false, "Please enter a valid 10-digit phone number.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(phoneInput, true);
                }

                if (!instSelect.value) {
                    updateValidationStatus(instSelect, false, "Please select an institution.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(instSelect, true);
                }

                if (usernameInput.value.trim() === "") {
                    updateValidationStatus(usernameInput, false, "Username cannot be empty.");
                    formIsValid = false;
                } else {
                    updateValidationStatus(usernameInput, true);
                }

                // Conditional validation for password fields
                const oldPasswordInput = document.getElementById('password_update');
                const newPasswordInput = document.getElementById('confirm_password_update');

                // Clear any previous password validation messages first
                updateValidationStatus(oldPasswordInput, true);
                updateValidationStatus(newPasswordInput, true);

                if (newPasswordInput.value.trim() !== '') {
                    if (oldPasswordInput.value.trim() === '') {
                        updateValidationStatus(oldPasswordInput, false, "Old password is required to change password.");
                        formIsValid = false;
                    }
                    if (!passwordRegex.test(newPasswordInput.value)) {
                        updateValidationStatus(newPasswordInput, false, "Min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 symbol.");
                        formIsValid = false;
                    }
                }

                return formIsValid;
            }

            updateAdminModal.addEventListener('show.bs.modal', event => {
                const button = event.relatedTarget;
                const firstName = button.getAttribute('data-first-name');
                const lastName = button.getAttribute('data-last-name');
                const email = button.getAttribute('data-email');
                const instId = button.getAttribute('data-inst-id');
                const phnNo = button.getAttribute('data-phn-no');
                const username = button.getAttribute('data-username');
                const updateAdminId = button.getAttribute('data-admin-id');

                updateAdminForm.action = `/administrator/update-institution-admin/${updateAdminId}/`;
                document.getElementById('first_name_update').value = firstName;
                document.getElementById('last_name_update').value = lastName;
                document.getElementById('email_update').value = email;
                document.getElementById('phn_no_update').value = phnNo;
                document.getElementById('username_update').value = username;
                document.getElementById('inst_name_update').value = instId;
                document.getElementById('password_update').value = '';
                document.getElementById('confirm_password_update').value = '';

                formInputs.forEach(input => {
                    input.classList.remove('is-valid', 'is-invalid');
                    const errorSpan = document.getElementById(`${input.id}-error`);
                    if (errorSpan) errorSpan.textContent = '';
                });

                formInputs.forEach(input => {
                    input.disabled = true;
                });
                editButton.hidden = false;
                updateButton.hidden = true;
            });

            editButton.addEventListener('click', () => {
                editButton.hidden = true;
                updateButton.hidden = false;
                formInputs.forEach(input => {
                    input.disabled = false;
                });
            });

            updateAdminForm.addEventListener('submit', function (event) {
                if (!validateUpdateAdminForm()) {
                    event.preventDefault();
                }
            });
        }
    });
</script>

{% endblock %}