<?php
// footer.php
?>
    </div> <!-- End of .main-content -->

    <!-- Password Change Modal -->
    <?php if (isset($isAdmin) && $isAdmin): ?>
    <div class="modal-overlay" id="passModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Update Credentials</h3>
                <button class="close-btn" onclick="closePassModal()">&times;</button>
            </div>
            <!-- Update Password Logic Form -->
            <form action="index.php" method="POST">
                <input type="hidden" name="action" value="update_admin_credentials">
                
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" name="new_username" value="<?= e($username ?? '') ?>" required autocomplete="off">
                </div>
                
                <div class="form-group">
                    <label>Old Password</label>
                    <input type="password" name="old_password" required placeholder="Enter current password" autocomplete="off">
                </div>
                
                <div class="form-group">
                    <label>New Password</label>
                    <input type="password" name="new_password" required placeholder="Enter new password" autocomplete="off">
                </div>
                
                <button type="submit" class="submit-btn">Save Changes</button>
            </form>
        </div>
    </div>

    <script>
        function openPassModal() {
            document.getElementById('passModal').classList.add('active');
        }
        function closePassModal() {
            document.getElementById('passModal').classList.remove('active');
        }
        document.getElementById('passModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closePassModal();
            }
        });
    </script>
    <?php endif; ?>

</body>
</html>