<div class="modal fade" id="passwordModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <form action="<%= ROUTES.ADMIN_CHANGE_PASSWORD %>" method="POST">

                <div class="modal-header">
                    <h5 class="modal-title">🔐 Change Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body p-4">

                    <div class="mb-3">
                        <label class="form-label">Current Password</label>
                        <div class="input-wrapper">
                            <input type="password" name="current_password" class="form-control" required>
                            <span class="toggle-password" onclick="togglePasswordForChange(this)">
                                <i class="fa fa-eye-slash"></i>
                            </span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">New Password</label>
                        <div class="input-wrapper">
                            <input type="password" name="new_password" class="form-control" required>
                            <span class="toggle-password" onclick="togglePasswordForChange(this)">
                                <i class="fa fa-eye-slash"></i>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="form-label">Confirm Password</label>
                        <div class="input-wrapper">
                            <input type="password" name="confirm_new_password" class="form-control" required>
                            <span class="toggle-password" onclick="togglePasswordForChange(this)">
                                <i class="fa fa-eye-slash"></i>
                            </span>

                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary px-4">
                        Update
                    </button>
                </div>

            </form>

        </div>

    </div>
</div>



<div class="modal fade" id="profileModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <form action="<%= ROUTES.ADMIN_PROFILE_UPDATE %>" method="POST" enctype="multipart/form-data">

                <div class="modal-header">
                    <h5 class="modal-title">👤 Update Profile</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body p-4">

                    <!-- Image -->
                    <div class="text-center mb-3">
                        <img id="previewImage"
                            src="<%= user.profile_image ? user.profile_image : '/images/default.png' %>" style="width:110px;height:110px;border-radius:50%;object-fit:cover;
                             border:3px solid #eee;">
                    </div>

                    <input type="file" name="profile_image" class="form-control mb-3" onchange="previewFile(event)">

                    <label class="form-label">Name</label>
                    <input type="text" name="name" class="form-control mb-3" value="<%= user.name %>" required>

                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" value="<%= user.email %>" readonly>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-success px-4">
                        Save
                    </button>
                </div>

            </form>

        </div>

    </div>
</div>


<div id="coursesModal" style="
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.5);
justify-content:center;
align-items:center;
z-index:9999;">

    <div style="
    width:450px;
    background:#fff;
    border-radius:10px;
    padding:20px;
    position:relative;">

        <span id="closeCoursesModal" style="position:absolute;right:15px;top:10px;cursor:pointer;font-size:20px;">
            &times;
        </span>

        <h4>Student Courses</h4>

        <div id="coursesList" style="margin-top:20px;"></div>

    </div>

</div>



<div id="batchesModal" style="
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.5);
justify-content:center;
align-items:center;
z-index:9999;">

    <div style="
    width:450px;
    background:#fff;
    border-radius:10px;
    padding:20px;
    position:relative;">

        <span id="closeBatchesModal" style="position:absolute;right:15px;top:10px;cursor:pointer;font-size:20px;">
            &times;
        </span>

        <h4>Student Batches</h4>

        <div id="batchesList" style="margin-top:20px;"></div>

    </div>

</div>